ExtJS 4.2 网格分页答案

【问题标题】：ExtJS 4.2 Grid PaginationExtJS 4.2 网格分页
【发布时间】：2013-11-04 15:07:20
【问题描述】：

我想为通过 Web 服务接收数据的网格面板设置客户端分页，但我不知道如何进行。

到目前为止，这是我的代码。分页工具栏显示正确的页数，但是，所有结果都显示在第一页中。在页面中前进和后退没有任何区别。

型号

Ext.define('MCS.model.task.myModel', {
extend: 'Ext.data.Model',
fields:
[
    { name: 'Case_ID', type : 'Auto' },
    { name: 'BP_Name', type : 'Auto' },
    { name: 'Project', type : 'Auto' }
],

proxy:
{
    type: 'ajax',
    url: '/Service/Task?type=mytasks',
    reader:
    {
        type: 'json',
        root: 'data'
    },
},
});

商店

Ext.define('MCS.store.task.myStore', {
extend: 'Ext.data.Store',
requires: 'MCS.model.task.myModel',
model: 'MCS.model.task.myModel',

pageSize : 10,

autoLoad: true
});

网格面板

Ext.define('MCS.view.task.myGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',

store: 'task.myStore',
columns: [],

dockedItems:
[
    { xtype: 'myToolbar', 
        dock: 'top',
    },
    { xtype: 'pagingtoolbar',
        dock: 'bottom',
        displayMsg: '{0} - {1} of {2}',
        emptyMsg: 'No data to display',
        store: 'task.myStore'
    }
],

initComponent: function ()
{
    this.columns =
    [
        { text: 'Case ID', dataIndex: 'Case_ID' },
        { text: 'Business Partner Name', dataIndex: 'BP_Name' },
        { text: 'Project', dataIndex: 'Project' }
    ];

    this.callParent();
}
});

【问题讨论】：

这可能会帮助您解决这个问题。请参阅已接受的答案。 stackoverflow.com/questions/42650224/…

标签： extjs4 extjs4.2

【解决方案1】：

Ext.define('Crm.store.Companies', {
   extend: 'Ext.data.Store',
   requires: 'Crm.model.Company',
   model: 'Crm.model.Company',
   autoLoad: {start: 0, limit: 5},
   pageSize: 5,
   remoteSort: true,
   sorters: [{
              property : 'name',
              direction: 'asc'
          }],
   proxy: {
     type: 'rest',
     url : 'service/companyList/json',
     reader: {
        type: 'json',
        root: 'companyList',
        totalProperty: 'total'
     }
   }
});

【讨论】：

【解决方案2】：

我没有分页本地数据的个人经验，但分页工具栏的 Ext 文档有一些您可能会觉得有用的信息和链接。

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.toolbar.Paging

在页面中搜索“使用本地数据分页”以找到我所指的部分。该部分的正下方是一个 cmets 链接。点击它展开 cmets 并阅读它们。

我希望这会有所帮助。祝你好运！

【讨论】：

【解决方案3】：

Code Link

    Ext.define('School.model.Student', 
{
    extend : 'Ext.data.Model',
    idProperty : 'Id',
    fields: [
        { name: 'Id', type: 'int', defaultValue: 0 },
        { name: 'firstName', type: 'string' },
        { name: 'middleName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'birthDate', type: 'date' },
        { name: 'address1', type: 'string' },
        { name: 'address2', type: 'string' },
        { name: 'city', type: 'string' },
        { name: 'state', type: 'string' }
    ],
    validations : [{
        type : 'presence',
        field : 'firstName'
    }],
   proxy : 
    {
        type : 'ajax',

        api : 
        {
            read: '/ExampleService.svc/studentswithpaging/'
        },
        reader : 
        {
            type : 'json',
            root : 'Students',
            totalProperty : 'TotalCount'
        }

    }
});

【讨论】：

【解决方案4】：

这可能有点晚了，但请始终确保您在服务器端处理分页，分页工具栏将向您的脚本发送启动和限制参数；因此您的脚本必须确保它根据这些参数获取数据。

 <?php
  $start = $_GET['start'];
  $limit = $_GET['limit'];
  $sql = "SELECT * FROM table limit $start,$limit;
?>

【讨论】：