ExtJS4:更新网格的PagingToolbar

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错误"result is undefined“。我也试过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代码中的某处没有定义数据，但如果我在存储中对数据进行了硬编码，那么它是定义的(在同一行代码中)……我猜这可能是个bug？无论哪种方式，这个修复方法对我都有效。