Sencha Touch限制列表中的项目数量 [英] Sencha Touch limit number of items in list
问题描述
注意：我在本地工作，当这是在线时，这将是
a噩梦，过度... ..
我的想法是从json获取所有数据，但在列表中显示的数量有限（假设为30）。但是，为了能够搜索和过滤所有这些，并且仍然只显示30个项目MAX。
以下代码正在运行，没有限制选项： / p>
// model
Ext.define（'User'，{
extends：'Ext.data。模型'，
config：{
fields：[
{name：'Name'，type：'string'}，
{name：'Address'，type：'string '}，
{name：'ID'，键入：'int'}，
{name：'WebUrl'，键入：'string'}，
{name：'InfoUrl'键入：'string'}，
]
}
}）;
// store
store = Ext.create（'Ext.data.Store'，{
model：'User'，
sorters：'Name'，
石斑鱼：{
groupFn：function（record）{
return record.get（'Name'）[0];
}
}，
proxy：{
类型：'ajax'，
url：'http：// localhost：8088 / Services / RestaurantList.ashx'，
reader：{
type：'json'，
rootProperty：'users'
}
}，
autoLoad：true
}）;
//列表
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）;
}
}，
分组：true，
/ * maxVisibleRecords ：30，
limit：30，
params：{limit：30}，
ExtraParams：{limit：30} * / // none working
}）;
谢谢！ ：）
我自己找到了一个解决方案。我创建了两个商店，第一个从json获取所有数据，我只是将其切片，并将切片的数据设置到我的第二个商店。搜索功能完美，我可以搜索大商店中的所有项目，并显示在第二个，也切片（不超过30个项目）
这里是代码：
// model
Ext.define（'User'，{
extends ：'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'，
分拣机：'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
}）;
//列表
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（）;
}
}
] ，
分组：true
}）;
I'm building an app that should run on mobile/tablet/pc. And the main feature contains an enormous list of items that I'm getting from json file hosted on another server. Currently I'm working on a PC and the list takes about a minute to populate (over 800 objects, the number grows everyday), I'm guessing that's because it takes time to generate the markup for 800 divs...
Note: I'm working locally, when this is online it would be a nightmare, overkill..
My thoughts were to get all the data from json, but display limited amount of items in the list (let's say 30). But, to be able to search and filter all of them, and still display only 30 items MAX.
The below code is working, without the limit option I want:
//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
});
Thanks! :)
I found a solution myself. I created two stores, the first one gets all the data from json, and I simply sliced that, and I set the sliced data to my second store. The search works perfect too, I can search through all the items in the "big" store, and display them in the second, also sliced (no more than 30 items)
here's the code:
//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限制列表中的项目数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
