Question

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

注意：我在本地工作，当这是在线的时候噩梦，矫枉过正..

我的想法是从json获取所有数据，但在列表中显示有限数量的项目（比方说30）。但是，为了能够搜索和过滤所有这些，并且仍然只显示30项MAX。

以下代码正常运行，没有我想要的限制选项：

        //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上发送'limit'参数，请将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
    });

Sencha Touch限制列表中的项目数

2 个答案: