带有memoryproxy和分页的extjs4

时间:2013-12-14 02:15:24

标签: extjs extjs4 extjs4.1 extjs4.2

我有一个非常基本的例子,我使用memoryproxy和pagingmemory工具栏对数据进行分页(理想情况下)。

这是使用meteor的extjs,它直接发送数据而不需要res / ajax / jsonp代理,因此我必须使用内存,因为在extjs甚至设法呈现它的视图之前,数据已经在客户端中了。

我的问题是,我不能让分页显示商店中的内容。刷新不起作用,并且分页图标已经死亡,因为在加载后,分页看不到商店中的任何商品。

我在jsfiddle上有一个有效的代码示例:http://jsfiddle.net/rXsVG/5/

完整代码示例:

Ext.onReady(function(){
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id',    type: 'int'},
            {name: 'name',  type: 'string'}
        ]
    });

    var store = new Ext.data.Store({
        model: 'User',
        autoLoad: true,
        proxy: {
            type: 'pagingmemory',
            reader: {
                type: 'json'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        height: 500,
        width: '100%',
        renderTo: 'example-grid',
        store: store,
        columns: [{
            header: 'Name',
            dataIndex: 'name',
            flex: 1
        }],
        bbar: {
            xtype: 'pagingtoolbar',
            pageSize: 10,
            store: store,
            displayInfo: true
        },
        listeners: {
            afterrender: function(grid, evt) {
                console.log('Loading data');
                var data = [];
                for(var i = 1; i < 20; i++) {
                    data.push({
                        id: i,
                        name: 'Ed Spencer '+i
                    });
                }

                //    Simulate a really busy server call
                setTimeout(function(){
                    grid.getStore().loadData(data);
                }, 500);
            }
        }

    });
});

此外,如果您在分页工具栏上点击刷新,则所有数据都将消失。有什么想法吗?

0 个答案:

没有答案