Ext JS 4：更新网格的PagingToolbar

Question

如果底层存储发生更改，我正在尝试更新pagingtoolbar的信息。假设我有以下代码。

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和store.loadPage函数上使用moveFirst函数，但这给了我一个Firebug错误“结果未定义”。我也尝试了this SO answer，但这似乎没有做任何事情......我尝试的最后一件事是在商店填充了数据之后添加了一个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代码中某处未定义数据，但是如果我在商店中硬编码了数据，它被定义（在相同的代码行）...猜它可能是一个错误？不管怎样，这个修复程序对我有用。