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