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内。问题是当我运行程序时。我存储的数据没有出现在网格上。它只显示了在dockedItems上没有结果和0显示的内容..我正在使用它来熟悉extjs的工作方式，我需要在将来使用这个extjs来编写我的编程项目。

您的回答和解释非常感谢：）

谢谢

Answer 1

您的代码显而易见：

您使用内联data加ajax代理。这两者是互斥的 - 你要么想要一些内联数据，要么你想通过ajax从服务器中提取数据。
代理网址指向一个文件（至少我猜它来自名称pagingstore.js。这不起作用，因为服务器端必须遵守start和limit参数，它必须只返回匹配的recors，并且必须返回total个记录才能使分页工作。
加载商店时，您必须自己动手start和limit。商店已经知道该怎么做并自动发送这些参数。

Answer 2

对于内联分页，只需要对此进行编码

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

哦，男孩......我在这个问题上让自己很难:)但感谢您的参考

如何制作简单的分页extjs4

2 个答案: