Ext JS 4：更新网格的分页工具栏

Question

如果其底层存储发生变化，我正在尝试更新分页工具栏的信息。 假设我有以下代码。

Ext.Loader.setConfig({
  enabled: true
});

Ext.Loader.setPath('Ext.ux', 'examples/ux');
Ext.require(['Ext.ux.data.PagingMemoryProxy']);

Ext.onReady(function() {
  var data = [
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'}   
  ];

  Ext.define('model', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'name', type: 'string'},
      {name: 'phone', type: 'string'}
    ]
  });

  var store = Ext.create('Ext.data.Store', {
    model: 'model',
    proxy: {
      type: 'pagingmemory'
    },
    extraParams: {
      start: 0,
      limit: 1
    },
    //data: data,  // uncomment this
    pageSize: 7,
    remoteSort: false
  });

  Ext.define('mygrid', {
    extend: 'Ext.grid.Panel',
    store: store,  // initially just an empty store
    id: 'grid',
    dockedItems: [{
      xtype: 'pagingtoolbar',
      dock: 'bottom',
      store: store,
      displayInfo: true
    }],
    columnLines: true,
    height: 700,
    columns: [{
      header: 'Name',
      dataIndex: 'name',
      flex: 1,
      align: 'center'
    }, {
      header: 'Phone',
      dataIndex: 'phone',
      flex: 1,
      align: 'center'
    }]
  });

  Ext.create('Ext.Viewport', {
    layout: 'border',
    title: 'My viewport!',
    items: [{
      region: 'center',
      items: [Ext.create('mygrid')]
    }]
  });

  store.loadRawData(data);  // comment this out
  /*grid.addDocked({
    xtype: 'pagingtoolbar',
    store: store,
    displayInfo: true,
    dock: 'bottom',
    pageSize: 7
  });*/  // doesn't work
  //Ext.getCmp('grid').getDockedItems()[0].moveFirst();  // doesn't work
  //store.loadPage(1);  // doesn't work
});

当您运行此代码时，网格包含所有数据（无分页）。 但是，如果您注释/取消注释我告诉您的行，则网格每页包含正确的数据量。

我想知道的是，如何更新 PagingToolbar 以正确分页我添加到商店的数据？ 我尝试过在 PagingToolbar 上使用 moveFirst 函数和 store.loadPage 函数，但这给了我一个 Firebug 错误“结果未定义”。 我也尝试过这个SO答案，但这似乎没有做任何事情...我尝试的最后一件事是在商店填充了数据后添加一个PagingToolbar，但显然不行。

Answer 1

这是我的工作解决方案（更改上面有注释）。

Ext.Loader.setConfig({
  enabled: true
});

Ext.Loader.setPath('Ext.ux', 'examples/ux');
Ext.require(['Ext.ux.data.PagingMemoryProxy']);

Ext.onReady(function() {
  var data = [
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'}   
  ];

  Ext.define('model', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'name', type: 'string'},
      {name: 'phone', type: 'string'}
    ]
  });

  // Excluding the proxy from the store
  var store = Ext.create('Ext.data.Store', {
    model: 'model',
    pageSize: 7,
    remoteSort: false
  });

  Ext.define('mygrid', {
    extend: 'Ext.grid.Panel',
    store: store,  // initially just an empty store
    id: 'grid',
    dockedItems: [{
      xtype: 'pagingtoolbar',
      dock: 'bottom',
      store: store,
      displayInfo: true
    }],
    columnLines: true,
    height: 700,
    columns: [{
      header: 'Name',
      dataIndex: 'name',
      flex: 1,
      align: 'center'
    }, {
      header: 'Phone',
      dataIndex: 'phone',
      flex: 1,
      align: 'center'
    }]
  });

  Ext.create('Ext.Viewport', {
    layout: 'border',
    title: 'My viewport!',
    items: [{
      region: 'center',
      items: [Ext.create('mygrid')]
    }]
  });

  // Manually setting the proxy and loading the store
  store.setProxy({
    type: 'pagingmemory',
    data: data
  });
  store.load();
});

我已经从存储的定义中排除了代理，当需要在存储中加载数据时，我调用 setProxy 函数，将其声明为 pagingmemory，并设置数据。 然后你必须加载商店。

不太确定为什么 loadData/loadRawData 不起作用...我试图在 Firebug 中跟踪它们，只看到数据没有在核心 Ext 代码中的某处定义，但如果我在存储中对数据进行了硬编码，它被定义（在同一行代码中）...猜猜这可能是一个错误？ 不管怎样，这个修复对我有用。