Question

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

这是我的商店：

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，我的小提琴正在使用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课程中，您要在type: 'mygrid'上定义gridpanel的商店配置，然后在{{1}上定义商店配置第二次这是创建两个单独的商店实例，随后混淆了工具栏组件。

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

viewModel

» Fiddle

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

2 个答案: