Sencha touch 如果嵌套数据低于一级,如何为其指定rootProperty?
我正在获取嵌套数据以显示为嵌套列表,但每当我点击顶级项时,它会再次显示相同的顶级列表,而不是显示子列表,并触发ajax请求以再次获取json数据。这是商店:Sencha touch 如果嵌套数据低于一级,如何为其指定rootProperty?,sencha-touch,sencha-touch-2,sencha-touch-2.1,Sencha Touch,Sencha Touch 2,Sencha Touch 2.1,我正在获取嵌套数据以显示为嵌套列表,但每当我点击顶级项时,它会再次显示相同的顶级列表,而不是显示子列表,并触发ajax请求以再次获取json数据。这是商店: Ext.define('MyTabApp.store.CategoriesStore',{ extend:'Ext.data.TreeStore', config:{ model : 'MyTabApp.model.Category', autoLoad: false, s
Ext.define('MyTabApp.store.CategoriesStore',{
extend:'Ext.data.TreeStore',
config:{
model : 'MyTabApp.model.Category',
autoLoad: false,
storeId : 'categoriesStore',
proxy: {
type: 'ajax',
url: 'resources/data/catTree.json',
reader: {
type: 'json',
rootProperty: 'data.categories'
}
},
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("categories tree loaded");
console.log(records);
}
}
}
});
下面是我用来模拟服务的文件中的数据:
{
"data":{
"categories": [
{
"name": "Men",
"categories": [
{
"name": "Footwear",
"categories": [
{ "name": "Casual Shoes", "leaf": true },
{ "name": "Sports Shoes", "leaf": true }
]
},
{
"name": "Clothing",
"categories": [
{ "name": "Casual Shirts", "leaf": true },
{ "name": "Ethnic", "leaf": true }
]
},
{ "name": "Accessories", "leaf": true }
]
},
{
"name": "Women",
"categories": [
{ "name": "Footwear", "leaf": true },
{ "name": "Clothing", "leaf": true },
{ "name": "Accessories", "leaf": true }
]
},
{
"name": "Kids",
"categories": [
{
"name": "Footwear",
"categories": [
{ "name": "Casual Shoes", "leaf": true },
{ "name": "Sports Shoes", "leaf": true }
]
},
{ "name": "Clothing", "leaf": true }
]
}
]
}
}
名单如下:
Ext.define('MyTabApp.view.CategoriesList', {
extend: 'Ext.dataview.NestedList',
alias : 'widget.categorieslist',
config: {
height : '100%',
title : 'Categories',
displayField : 'name',
useTitleAsBackText : true,
style : 'background-color:#999 !important; font-size:75%',
styleHtmlContent : true,
listConfig: {
itemHeight: 47,
itemTpl : '<div class="nestedlist-item"><div>{name}</div></div>',
height : "100%"
}
},
initialize : function() {
this.callParent();
var me = this;
var catStore = Ext.create('MyTabApp.store.CategoriesStore');
catStore.load();
me.setStore(catStore);
}
});
Ext.define('MyTabApp.view.CategoriesList'{
扩展:“Ext.dataview.NestedList”,
别名:“widget.categorieslist”,
配置:{
高度:“100%”,
标题:“类别”,
displayField:'名称',
UseTilesBackText:true,
样式:“背景色:#999!重要;字体大小:75%”,
styleHtmlContent:对,
列表配置:{
身高:47,
itemTpl:“{name}”,
身高:“100%”
}
},
初始化:函数(){
这是callParent();
var me=这个;
var catStore=Ext.create('MyTabApp.store.CategoriesStore');
load();
me.setStore(catStore);
}
});
如果我删除data
wrapper-over-topcategories
array并将rootProperty
更改为categories
而不是data.categories
,则列表开始正常工作,每次点击都没有任何ajax请求。由于服务器在数据对象中实际返回类别
,我无法删除它,因此在这种情况下如何修复存储?另外,为什么需要额外的ajax请求来获取文件
[编辑]
试图创建一个类似但不相同的小提琴,因为它使用的是2.0.1,并且数据不是从外部文件或服务器加载的。上次我遇到这种情况时,是因为我的顶级类别之一是叶,但我没有将叶设置为true。这样做会让嵌套列表的顶层重新出现,就像它是一个孩子一样。从您的小提琴中可以看出,如果您的数据采用以下格式,那么它就可以正常工作:
{
"categories" : [{
"name" : "Foo",
"categories" : [{
...
}]
}]
}
也就是说,只需删除“data”属性并使defaultRootProperty:“categories”
&rootProperty:“categories”
。选中此项:
它也适用于外部数据文件。我在我的案例中检查了情况并非如此。这就是我在问题中所写的“如果我删除top categories数组上的数据包装器并将rootProperty更改为categories而不是data.categories,则列表在每次点击时都可以正常工作,而无需任何ajax请求。”但问题是,如果服务的响应不在我的控制范围内,我如何才能让它工作?为什么sencha对数据格式如此挑剔,以至于一个级别的深度会把一切都搞砸?