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

Question

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

这是我的商店：

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

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

Answer 1

我已经使用了您的代码并对其进行了一些简化，以创建一个小提琴 ，我的小提琴正在工作，并且使用ExtJs 5.0.1显示了正确的分页，但是当前不适用于ExtJs 5.1。 这可能是需要报告的错误，同时我已在Sencha Bugs论坛上发布了该错误，以供进一步调查。

万一小提琴链接中断了，请使用以下代码：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var pagingStore = Ext.create('Ext.data.Store', {

            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('MainView', {
            extend: 'Ext.container.Container',

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

        Ext.create("MainView", {
            renderTo: Ext.getBody()
        });
    }
});

一旦收到Sencha论坛的回复，我将更新答案。 同时，您可能需要查看解决方法或使用工作版本。

Answer 2

对您而言，这实际上是一个非常微妙的错误。 在Main类中，您要在gridpanel上定义type: 'mygrid'的商店配置，然后在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
        }],
    }]
});

»小提琴