Sencha Touch 限制列表中的项目数

Question

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

注意：我在本地工作，在线时会是 一场噩梦，矫枉过正..

我的想法是从 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 的 url 上发送“限制”参数，请将 limitParam 配置设置为代理。

您可能喜欢使用listpaging 列表插件，它添加了加载更多内置函数。

希望对你有帮助-

编辑：

//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
    });