Question

我必须使用分页创建一个网格。商店所需的json数据将进入ajax调用。在这里，我创建了存储，并加载了从ajax调用返回的数据。但网格显示返回的所有数据。我必须将每页限制为5个。

我尝试了以下代码，

      var store= new Ext.data.JsonStore({
        autoLoad    : {params: {start: 0, limit: 5}},
        totalProperty   : recordCount,
        sortInfo    : { field: "POS", direction: "ASC" },
        idProperty  : 'POS',
        data        : {},
        fields      : [
                        {'name' : 'POS'},
                        {'name' : 'NUM'}, 
                        {'name' : 'TIT'},
                        {'name' : 'MEN'},
                        {'name' : 'EIH'},
                        {'name' : 'WAE'},
                        {'name' : 'PRI'},
                        {'name' : 'LIF'}], 

    });

    var adrConn = $.getJSON('ajax.cfm', $.extend(test, {
        }), function(r) {   
            activeData = r.DATA;
            store.loadData(activeData);
            }
    );

    var grid = new Ext.grid.GridPanel({
          title         : '&raquo; test',
          applyTo       : 'panel',
          width         : 1000,
          loadMask      : false,
          autoHeight    : true,
          viewConfig    : {
                emptyText   : 'No data to display'
          },             
          tbar          : mainGridToolbar,
          bbar          : new Ext.PagingToolbar({
                  store         : store,
                  displayInfo   : true  
          }),
          store         : store,
          columns: [
                {header: "1", width : 50, dataIndex: 'POS', sortable: true},
                {header: "2", dataIndex: 'NUM', sortable: true},
                {header: "3", dataIndex: 'TIT', sortable: true},
                {header: "4", dataIndex: 'MEN', sortable: true},
                {header: "5", dataIndex: 'EIH', sortable: true},
                {header: "6", dataIndex: 'WAE', sortable: true},
                {header: "7", dataIndex: 'PRI', sortable: true},
                {header: "8", dataIndex: 'LIF', sortable: true}
          ]
      });

任何帮助都必须得到赞赏...谢谢你

Answer 1

通过使用PagingToolbar，您可以将网格大小限制为5 在该工具栏中，您可以像这样声明网格

 pageSize: 5,

PagingToolbar的示例是here！

希望这可以帮助你......

Answer 2

您还需要在后端处理te分页。这可能是你获得所有记录的原因。 ExtJS只是将参数发送到你的后端，并期望它将返回正确的记录。

在MySQL中（偏移=开始，限制=限制，此页面将为1）：

SELECT column FROM table
OFFSET 0 LIMIT 5

Ext JS Grid中的分页

2 个答案: