1

ストアにページサイズを設定し、プロキシ設定に totalproperty を設定し、dockedItems 構成も定義しました。ただし、ページでは、指定されたページサイズではなく、すべてのレコードが表示されます。これが私のコードです：

js ファイル:

var sm = Ext.create('Ext.selection.CheckboxModel'); 
    Ext.define('SuperUser', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'fname', type: 'string' },
            { name: 'lname', type: 'string' },
            { name: 'email', type: 'string' },
            { name: 'uid', type: 'string' },
            { name: 'isSup', type: 'boolean' },
            { name: 'upDate', type: 'string' },
            { name: 'upBy', type: 'string' }
        ]
    });
  //Create the grid
    var superGrid=Ext.define('supusergrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.supusergrid',
    title: 'Super Admin Grid',
    gridId:'grid',
    model:'SuperUser',
    store: Ext.create('Ext.data.Store', {
        storeId: 'supUserStore',
         pageSize: 3,
        model:'SuperUser',
        autoLoad: true,
            proxy: { 
                type: 'ajax',
                url : 'supUserStore.json',
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty:'total' 
                    } 
                }
    }),
    selModel: sm,
    columns: [
              { 
                  header: 'First Name',
                  dataIndex: 'fname' 
            },
              {
                header: 'Last Name', 
                dataIndex: 'lname' 
                },
              { 
                    header: 'Email', 
                    dataIndex: 'email'
                    },
              { 
                        header: 'User ID', 
                        dataIndex: 'uid' 
                        },

             {
                 header: 'Super Admin', 
                 dataIndex: 'isSup'
                 },
              { 
                     header: 'Updated Date',
                     dataIndex: 'upDate',

                     },
              { 
                         header: 'Updated By',
                         dataIndex: 'upBy'
                         }
          ],
          dockedItems: [{
              xtype: 'pagingtoolbar',
              store: Ext.data.StoreManager.lookup('supUserStore'),   
              dock: 'bottom',
              displayInfo: true
          }],
    initComponent: function () {
        this.callParent(arguments);

    }
});
    Ext.onReady(function () {
        Ext.widget('supusergrid', {

            renderTo: 'div1'
        });
    });

json ファイル:

{
    "success": true,
    "total": 12,
    "data":  [
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jane","lname":"Smith","email": "j.smith@netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron@netapp.com" },
                { "fname": "Jim","lname":"Smith","email": "jm.smith@netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron@netapp.com"}
            ] 
}

私が間違っているところを提案してください。

4

2 に答える 2

0

Ajax プロキシを使用しています。サーバー上で、リクエスト パラメータ page、start、および limit をインターセプトできます。次に、ページ データを使用して json 応答を作成します。

于 2012-12-28T12:26:48.613 に答える
0

ストアのページングは​​、あなたが思っているほどスマートではありません。ページ サイズが 3 レコードで、合計 12 のレコードがあるからといって、すべてが 4 つの適切なページに分割されるわけではありません。

store.loadPageストアを呼び出すと、パラメータstartとlimitパラメータがプロキシ リクエストに追加されます。応答が戻ってくると、結果セットを正しく制限したと見なされ、提供されたすべてのレコードが読み込まれます。これらのパラメーターを使用して、ストアに返される結果を制限するのはユーザーの責任です。通常、これらのパラメーターを利用できるように、サーバーにデータを投稿する必要があります。

ありがたいことに、役立つ UX コンポーネントがあります: Ext.ux.data.PagingMemoryProxy

そして、これがどのように機能するかを示すサンプル コードを次に示します。Sliding Pager の例

于 2013-02-07T15:48:11.053 に答える