0

我正在构建一个应该在手机/平板电脑/PC 上运行的应用程序。主要功能包含我从另一台服务器上托管的 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
    });

谢谢！:)

4

2 回答 2

0

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

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

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

希望能帮助到你-

编辑：

//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,
});
于 2013-09-02T13:18:42.943 回答
0

我自己找到了解决方案。我创建了两个存储，第一个从 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
    });
于 2013-09-04T12:59:03.570 回答