Gridview Ext JS 4：更新网格'；s分页工具栏

如果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上使用moveFirst函数和store.loadPage函数，但这会给我一个Firebug错误“结果未定义”。我也尝试过，但似乎没有任何效果。。。我尝试的最后一件事是在存储区填充数据后添加PagingToolbar，但显然不行。

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

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

---

不太清楚为什么loadData/loadRawData不工作。。。我试图在Firebug中跟踪它们，只看到数据没有在核心Ext代码中的某个地方定义，但是如果我在存储中硬编码了数据，它就被定义了（在同一行代码中）。。。我猜可能是虫子吧？无论哪种方式，此修复对我都有效。

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

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

不太清楚为什么loadData/loadRawData不工作。。。我试图在Firebug中跟踪它们，只看到数据没有在核心Ext代码中的某个地方定义，但是如果我在存储中硬编码了数据，它就被定义了（在同一行代码中）。。。我猜可能是虫子吧？不管怎样，这个方法对我很有效

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();
});