Sencha Touch限制列表中的项目数

Question

我正在构建应在手机/平板电脑/电脑上运行的应用程序。 而且主要功能包含大量项目列表，这些项目是我从另一台服务器上托管的json文件获取的。 目前，我正在PC上工作，并且列表需要大约一分钟的时间来填充（超过800个对象，这个数字每天都在增加），我猜这是因为生成800格的标记需要时间...

注意：我在本地工作，当它在线上时，将是一场噩梦，过度杀伤力。

我的想法是从json获取所有数据，但列表中显示的项目数量有限（假设为30）。 但是，为了能够搜索和过滤所有内容，并且最多仍显示30个项目。

下面的代码正常工作，没有我想要的限制选项：

        //model
    Ext.define('User', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {name: 'Name', type: 'string'},
                {name: 'Address', type: 'string'},
                {name: 'ID', type: 'int'},
                {name: 'WebUrl', type: 'string'},
                {name: 'InfoUrl', type: 'string'},
                ]
        }
    });
    //store
    store = Ext.create('Ext.data.Store', {
        model: 'User',
        sorters: 'Name',
        grouper: {
            groupFn: function(record) {
                return record.get('Name')[0];
            }
        },
        proxy: {
            type: 'ajax',
            url: 'http://localhost:8088/Services/RestaurantList.ashx',
            reader: {
                type: 'json',
                rootProperty: 'users'
            }
        },
        autoLoad: true
    });

    //the list
    list = Ext.create('Ext.List', {
        flex: 2,
        itemTpl: ['<div class="contact">{Name}</div>'],
        store: store,
        listeners: {
                        itemtap: function(list, index, target, record) {
                            mainContainer.setActiveItem(1);
                            detailsPanel.setRecord(record);

                        }
                    },
        grouped: true,
/* maxVisibleRecords: 30,
limit: 30,
params: { limit: 30 },
ExtraParams: { limit: 30} */ //none worked
    });

谢谢！ :)

Answer 1

只需将pageSize配置添加到商店。

要在读取json的网址上发送“限制”参数，请将limitParam配置设置为代理。

您可能想使用listpaging列表插件，该插件添加了Load More内置函数。

希望能帮助到你-

编辑：

//store
store = Ext.create('Ext.data.Store', {
    model: 'User',
    sorters: 'Name',
    grouper: {
        groupFn: function(record) {
            return record.get('Name')[0];
        }
    },
    proxy: {
        type: 'ajax',
        url: 'http://localhost:8088/Services/RestaurantList.ashx',
        reader: {
            type: 'json',
            rootProperty: 'users'
        }
    },
    autoLoad: true,
    pageSize: 30,
});

//the list
list = Ext.create('Ext.List', {
    flex: 2,
    itemTpl: ['<div class="contact">{Name}</div>'],
    plugins: [{type: 'listpaging'}],
    store: store,
    listeners: {
        itemtap: function(list, index, target, record) {
            mainContainer.setActiveItem(1);
            detailsPanel.setRecord(record);
        }
    },
    grouped: true,
});

Answer 2

我自己找到了解决方案。 我创建了两个存储，第一个存储从json获取所有数据，我只是对其进行了切片，然后将切片的数据设置为第二个存储。 搜索效果也很完美，我可以搜索“大型”商店中的所有商品，并在第二个商品中也将它们切片（不超过30个商品）

这是代码：

        //model
    Ext.define('User', {
        extend: 'Ext.data.Model',
        config: {
            idProperty: 'Name',
            fields: [
                {name: 'Name', type: 'string'},
                {name: 'Address', type: 'string'},
                {name: 'ID', type: 'int'},
                {name: 'WebUrl', type: 'string'},
                {name: 'InfoUrl', type: 'string'},
                {name: 'Answered', type: 'boolean'},
                ]
        }
    });


    //store

    aStore = Ext.create('Ext.data.Store', {
        model: 'User',
        sorters: 'Name',
        grouper: {
            groupFn: function(record) {
                return record.get('Name')[0];
            }
        }
    });

    //full store

    store = Ext.create('Ext.data.Store', {
        model: 'User',
        sorters: 'Name',
        grouper: {
            groupFn: function(record) {
                return record.get('Name')[0];
            }
        },
        proxy: {
            type: 'ajax',
            url: '/Services/RestaurantList.ashx',
            reader: {
                type: 'json',
                rootProperty: 'users'
            }
        },
        listeners:{
            load: function(){
                var all = store.data.all;
                aStore.setData(all.slice(0,30));
            }
        },
        autoLoad: true
    });


    //the list
    list = Ext.create('Ext.List', {
        flex: 8,
        itemTpl: ['<div class="contact">{Name}</div>'],
        store: aStore,
        listeners: {
            itemtap: function(list, index, target, record) {
                mainContainer.setActiveItem(1);
                detailsPanel.setRecord(record);

            }
        },
        plugins: [
            {
                xclass: 'Ext.plugin.PullRefreshFn',
                refreshFn: function(){
                    store.clearData();
                    aStore.clearData();
                    store.clearFilter();
                    aStore.clearFilter();
                    store.load();
                    list.refresh();
                }
            }
        ],
        grouped: true
    });