ExtJS 5-网格的分页工具栏不能与内存代理一起使用

debugcn 发表于 Dev

大卫·福斯特（David Foster）

我正在使用内存代理在存储中加载内联数据并启用分页，但是问题是我的分页工具栏仅显示数据的第一页。“下一步”箭头按钮也不会更新网格。我在底部有指向图像的链接，以显示网格面板的外观。

这是我的商店：

Ext.define('PagingBug.store.MyGrid', {
    extend: 'Ext.data.Store',
    alias: 'store.mygrid',

    data: [
       [ 'Data1', 'Something1' ],
       [ 'Data2', 'Something2' ],
       [ 'Data3', 'Something3' ],
       [ 'Data4', 'Something4' ],
       [ 'Data5', 'Something5' ],
       [ 'Data6', 'Something6' ],
       [ 'Data7', 'Something7' ],
       [ 'Data8', 'Something8' ]
    ],

    fields: [
        {name: 'field1'},
        {name: 'field2'}
    ],

    pageSize: 5,

    proxy: {
        type: 'memory',
        enablePaging: true,
        reader: {
            type: 'array'
        }
    }
});

这是我的看法：

Ext.define('PagingBug.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'PagingBug.store.MyGrid'
    ],

    xtype: 'app-main',

    items: [{
        xtype: 'gridpanel',
        store: {
            type: 'mygrid'
        },
        columns: [
                {text: 'Field 1', dataIndex: 'field1'},
                {text: 'Field 2', dataIndex: 'field2'}
        ],
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: {
                type: 'mygrid'
            },
            dock: 'bottom',
            displayInfo: true
        }],
    }]
});

网格面板的图像：

http://i.stack.imgur.com/PCqSC.png

http://i.stack.imgur.com/S8CXU.png

有人可以指出我做错了什么吗？谢谢。

使者

对您而言，这实际上是一个非常微妙的错误。在你的Main类，你要定义的存储配置type: 'mygrid'你的gridpanel，你再定义存储配置第二次上pagingtoolbar-这是创建两个单独的存储实例，并随后混淆工具栏组件。

您仍然可以通过声明方式解决此问题，方法是在中定义您的商店，viewModel然后将引用绑定到两个组件上的同一商店，例如：

Ext.define('PagingBug.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'PagingBug.store.MyGrid'
    ],

    viewModel: {
        stores: {
            myGridStore: {
                type: 'mygrid'
            }
        }   
    },

    xtype: 'app-main',

    items: [{
        xtype: 'gridpanel',
        bind: '{myGridStore}',
        columns: [
            {text: 'Field 1', dataIndex: 'field1'},
            {text: 'Field 2', dataIndex: 'field2'}
        ],
        dockedItems: [{
            xtype: 'pagingtoolbar',
            bind: '{myGridStore}',
            dock: 'bottom',
            displayInfo: true
        }],
    }]
});