ExtJS 5 - Grid 的分页工具栏不适用于内存代理

Question

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

这是我的商店：

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

我已经采用了您的代码并将其略微简化以创建一个 fiddle，我的 fiddle 正在运行并使用 ExtJs 5.0.1 显示正确的分页，但目前不适用于 ExtJs 5.1 .这可能是一个需要报告的错误，同时我已在 Sencha Bugs 论坛上发帖以供进一步调查。

如果 fiddle link 曾经中断，这里是使用的代码：

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 class 中，您在 gridpanel 上定义了 type: 'mygrid' 的商店配置，然后您再次 定义了商店配置 在 pagingtoolbar - 这是 创建两个单独的商店实例 并随后混淆了工具栏组件。

您仍然可以通过在 viewModel 中定义您的商店并在两个组件上绑定对 same 商店的引用来以声明方式解决此问题，例如：

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
        }],
    }]
});

» Fiddle

ExtJS 5 - Grid 的分页工具栏不适用于内存代理

ExtJS 5 - Paging toolbar for Grid not working with Memory Proxy

memory

paging

proxy

extjs

extjs5