Question

我希望对通过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
});

的GridPanel

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();
}
});

Answer 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'
     }
   }
});

Answer 2

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

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

在页面中搜索“使用本地数据进行分页”以查找我所指的部分。该部分正下方是评论链接。点击它可以扩展评论并阅读这些评论。

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

Answer 3

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

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

Answer 4

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'
        }

    }
});

ExtJS 4.2网格分页

4 个答案: