如何制作简单的分页extjs4

Question

大家好，我是 Extjs 4 的新用户。现在，我在创建简单的分页时遇到了问题（测试运行只是为了熟悉这个）。请看下面的例子。

  //creating a store data first
  var itemsPerPage = 2;
  var productivity = Ext.create('Ext.data.Store',{ 
  fields : ['name','aht','numberOfCalls'],
  pageSize: itemsPerPage,
  autoLoad: true,
  data:{'items':[
    {name: 'Magelyn Cunanan', aht:'6:00', numberOfCalls:'50'},
    {name:'Martin Dejaresco', aht:'7:30', numberOfCalls:'40'},
    {name:'Emerson Dela Pena', aht:'8:00', numberOfCalls:'45'}
  ]},
   proxy: {
    type: 'ajax',
    url: 'pagingstore.js',
    reader: {
        type: 'json',
        root: 'items',
        totalProperty:'total'
    }
}

});

productivity.load({
  params:{
    start:0,
    limit: itemsPerPage
  }
});

然后在我的分页上，

//... some code here. by the way this is a viewport container
    region: 'center',
    xtype: 'tabpanel',
    autoScroll: true,
    activeTab: 2,
    items: [{
        title: 'Agent\'s Productivity',  
        xtype: 'gridpanel',
        store: productivity,
        //for flex, indicates the amount of space this component will take up in its parent container. eg. if 1 this will take 100% of the container
        columns: [
          {text: 'Agent name',dataIndex: 'name', flex: 1}, 
          {text: 'Handling Time',dataIndex:'aht',flex:1},
          {text: 'Number of calls' ,dataIndex: 'numberOfCalls',flex:1}
        ],

        dockedItems:[{
          xtype: 'pagingtoolbar',
          store: productivity,
          dock: 'bottom',
          displayInfo: true
         }],

我之前提到的所有这些代码都在 app.js 中。问题是当我运行程序。我存储的数据没有出现在网格上。它只显示没有结果加上停靠项目上的 0 显示。我使用它只是为了熟悉 extjs 的工作原理，我需要在未来的编程项目中使用这个 extjs。

非常感谢您的回答和对您的回答的解释:)

谢谢

Answer 1

从您的代码中可以看出：

您使用内联 data 加 ajax 代理。这两者是互斥的——您要么想要一些内联数据，要么想要通过 ajax.
proxy url 指向一个文件（至少我是从名称 pagingstore.js 猜到的）。这是行不通的，因为服务器端必须遵守 start 和 limit 参数，它必须 return 只匹配记录并且它必须 return total 记录数才能进行分页工作。
在加载商店时，您绝不能 fiddle 与 start 和 limit 自己。商店已经知道要做什么并自动发送这些参数。

Answer 2

对于内联分页只需要这样编码

pageSize: itemsPerPage
proxy: {
type: 'memory',
enablePaging: true
}

天啊..我在这件事上让自己很为难 :) 但感谢您的参考

如何制作简单的分页extjs4

how to make simple paging extjs4

extjs4.2