显示来自嵌套 json 的列表:Sencha Touch 2 [英] Display a list from nested json: Sencha Touch 2
问题描述
我有一个列表，其中显示带有餐厅徽标等的餐厅列表.
视图
Ext.define('Test.view.Contacts', {扩展:'Ext.List',xtype: '联系人',配置:{title: '商店',cls: 'x 联系人',商店:联系人"，itemTpl: ['<div class="headshot" style="background-image:url(resources/images/logos/{logo});"></div>','{名称}'，'<span>{add1}</span>'].加入('')}});当您点击餐厅时，我希望它根据点击的项目显示另一个列表.
第二个视图
Ext.define('Test.view.Menu', {扩展:'Ext.List',xtype: '联系菜单',配置:{title: '菜单',cls: 'x 联系人',商店:联系人"，itemTpl: ['<div>{item}</div>'].加入('')，},});模型
Ext.define('Test.model.Contact', {扩展:'Ext.data.Model'，配置:{字段: ['名称'，'标识'，'desc','电话'，'城市'，'添加1'，'邮政'，'国家'，'纬度'，'经度'],代理人: {类型:'阿贾克斯'，网址:'contacts.json'}},有很多: {模型:Test.model.Menus"，名称:'菜单'}});Ext.define('Test.model.Menus', {扩展:'Ext.data.Model'，配置:{字段: ['物品']},属于:测试.模型.联系"});商店
Ext.define('Test.store.Contacts', {扩展:'Ext.data.Store',配置:{模型:'Test.model.Contact',自动加载:真，//排序器:'名称'，石斑鱼:{groupFn:功能(记录){返回 record.get('name')[0];}},代理人: {类型:'阿贾克斯'，网址:'contacts.json'，读者:{类型:'json'，根:'商店'}}}});JSON
<代码>{商店":[{"name": "科学馆","logo": "sciencegallery.jpg","desc": "吃点东西","电话": "016261234","city": "都柏林","add1": "皮尔斯街","post": "2","国家": "爱尔兰","纬度": "53.34422",经度":-6.25006"，菜单": [{"item": "SC 三明治"}, {"item": "SC 烤三明治"}, {"item": "SC 帕尼尼"}, {"item": "SC 夏巴塔"}, {"item": "SC Burrito"}]}, {"name": "晶石","logo": "spar.jpg","desc": "吃点东西","电话": "016261234","city": "都柏林","add1": "市长街","post": "2","国家": "爱尔兰","纬度": "53.34422",经度":-6.25006"，菜单": [{"item": "晶石三明治"}, {"item": "Spar 烤三明治"}, {"item": "斯帕帕尼尼"}, {"item": "Spar Ciabatta"}, {"item": "Spar Burrito"}]}]}我想显示所选餐厅的菜单项列表(项目、项目、项目...)但是当我使用嵌套列表时，我必须使用与上一个列表相同的模板，这不符合我的需要.目前我得到了适量的物品，但没有任何显示.你能帮我解决我出错的地方吗，谢谢.
在我找到解决方案之前，这里是您的代码的一些问题(在解决方案起作用之前需要修复这些问题):
在
Contacts存储中的代理配置中，JSON 的 roog 配置是rootProperty，而不是root.代理:{类型:'阿贾克斯'，网址:'contacts.json'，读者:{类型:'json'，根属性:'商店'}}您也可以将此代码放入模型中，因为您已经在其中放入了代理配置.这是合并的(应该在您的模型中，并从商店中删除代理):
代理:{类型:'阿贾克斯'，网址:'contacts.json'，读者:{类型:'json'，根属性:'商店'}}模型名称应始终为单数，因为它们代表一个对象.所以使用
Menu，而不是Menus.你需要在你使用它们的类中要求你使用的任何类.例如，您需要
Sencha.model.Contact类中的Sencha.model.Menu类，因此将其添加到requires属性内Contact.js:Ext.define('Sencha.model.Contact', {扩展:'Ext.data.Model'，要求:['Sencha.model.Menu']，...});您需要在您的 hasMany 关联中使用
associationKey，就像通常它会查找menus(从模型名称生成)一样，但在您的 JSON 中是这样菜单.hasMany和belongsTo配置应该在模型中的config块内.Ext.define('Sencha.model.Contact', {扩展:'Ext.data.Model'，要求:['Sencha.model.Menu']，配置:{...有很多: {模型:煎茶.模型.菜单"，关联键:'菜单'}}});
至于解决方案 :) - 您可以修改列表中的 itemTpl 以显示与所显示记录的关联.为此，您可以使用:
{field_of_related_model}</tpl> 所以在你的情况下，你可以这样做:
itemTpl: ['{名称}'，'','<h2><b>菜单</b></h2>','<tpl for="menus">','- {item}</div>','</tpl>','</div>'].加入('')这里是一个项目的下载(使用 SDK 工具生成)，其中包含一个演示，主要使用您的代码:http://rwd.me/FS57
I have a list that displays a list of restaurants with the logo of the restaurant etc.
The view
Ext.define('Test.view.Contacts', {
extend: 'Ext.List',
xtype: 'contacts',
config: {
title: 'Stores',
cls: 'x-contacts',
store: 'Contacts',
itemTpl: [
'<div class="headshot" style="background-image:url(resources/images/logos/{logo});"></div>',
'{name}',
'<span>{add1}</span>'
].join('')
}
});
When you tap the restaurant i want it to show another list based on the item tapped.
The second view
Ext.define('Test.view.Menu', {
extend: 'Ext.List',
xtype: 'contact-menu',
config: {
title: 'Menu',
cls: 'x-contacts',
store: 'Contacts',
itemTpl: [
'<div>{item}</div>'
].join(''),
},
});
The models
Ext.define('Test.model.Contact', {
extend: 'Ext.data.Model',
config: {
fields: [
'name',
'logo',
'desc',
'telephone',
'city',
'add1',
'post',
'country',
'latitude',
'longitude'
],
proxy: {
type: 'ajax',
url: 'contacts.json'
}
},
hasMany: {
model: "Test.model.Menus",
name: 'menus'
}
});
Ext.define('Test.model.Menus', {
extend: 'Ext.data.Model',
config: {
fields: [
'item'
]
},
belongsTo: "Test.model.Contact"
});
The store
Ext.define('Test.store.Contacts', {
extend: 'Ext.data.Store',
config: {
model: 'Test.model.Contact',
autoLoad: true,
//sorters: 'name',
grouper: {
groupFn: function(record) {
return record.get('name')[0];
}
},
proxy: {
type: 'ajax',
url: 'contacts.json',
reader: {
type: 'json',
root: 'stores'
}
}
}
});
The JSON
{
"stores": [{
"name": "Science Gallery",
"logo": "sciencegallery.jpg",
"desc": "Get some food",
"telephone": "016261234",
"city": "Dublin",
"add1": "Pearse Street",
"post": "2",
"country": "Ireland",
"latitude": "53.34422",
"longitude": "-6.25006",
"menu": [{
"item": "SC Sandwich"
}, {
"item": "SC Toasted Sandwich"
}, {
"item": "SC Panini"
}, {
"item": "SC Ciabatta"
}, {
"item": "SC Burrito"
}]
}, {
"name": "Spar",
"logo": "spar.jpg",
"desc": "Get some food",
"telephone": "016261234",
"city": "Dublin",
"add1": "Mayor Street",
"post": "2",
"country": "Ireland",
"latitude": "53.34422",
"longitude": "-6.25006",
"menu": [{
"item": "Spar Sandwich"
}, {
"item": "Spar Toasted Sandwich"
}, {
"item": "Spar Panini"
}, {
"item": "Spar Ciabatta"
}, {
"item": "Spar Burrito"
}]
}]
}
I want to show a list of menu items (item, item, item...) for the restaurant selectedbut when I use a nested list I have to use the same template as the previous list which doesnt suit my needs. At the moment I get the right amount of items but nothing shows. Can you please help me with where I'm going wrong, thanks.
解决方案 Before I get to the solution, here are a few problems with your code (which need to be fixed before the solution will work):
In your proxy config within the Contacts store, the config for the roog of your JSON is rootProperty, not root.
proxy: {
type: 'ajax',
url: 'contacts.json',
reader : {
type : 'json',
rootProperty : 'stores'
}
}
You could also just put this code inside your model, as you already put a proxy config in there. Here are both merged (should be inside your model, and remove proxy from the store):
proxy: {
type: 'ajax',
url: 'contacts.json',
reader : {
type : 'json',
rootProperty : 'stores'
}
}
Model names should always be singular as they represent one object. So use Menu, not Menus.
You need to require any classes you use inside the class you use them. For example, you need the Sencha.model.Menu class inside the Sencha.model.Contact class, so add it inside the requires property inside Contact.js:
Ext.define('Sencha.model.Contact', {
extend: 'Ext.data.Model',
requires: ['Sencha.model.Menu'],
...
});
You need to use associationKey in your hasMany association as normally it would look for menus (generated from the Model name), but in your JSON is it menu.
hasMany and belongsTo configs should be inside config block within your models.
Ext.define('Sencha.model.Contact', {
extend: 'Ext.data.Model',
requires: ['Sencha.model.Menu'],
config: {
...
hasMany: {
model: "Sencha.model.Menu",
associationKey: 'menu'
}
}
});
As for the solution :) - you can modify your itemTpl inside your list to display associated for the record being shown. To do this, you can use:
<tpl for="associatedModelName">
{field_of_associated_model}
</tpl>
So in your case, you can do something like this:
itemTpl: [
'{name}',
'<div>',
'<h2><b>Menu</b></h2>',
'<tpl for="menus">',
'<div> - {item}</div>',
'</tpl>',
'</div>'
].join('')
Here is a download of a project (generated using the SDK Tools) which includes a demo of this, using mostly your code: http://rwd.me/FS57
这篇关于显示来自嵌套 json 的列表:Sencha Touch 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
