[英]Display a list from nested json: Sencha Touch 2
我有一个列表,显示一个餐厅列表,其中包含餐厅的标识等。
风景
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('')
}
});
当您点击餐厅时,我希望它根据点击的项目显示另一个列表。
第二种观点
Ext.define('Test.view.Menu', {
extend: 'Ext.List',
xtype: 'contact-menu',
config: {
title: 'Menu',
cls: 'x-contacts',
store: 'Contacts',
itemTpl: [
'<div>{item}</div>'
].join(''),
},
});
模特
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"
});
商店
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'
}
}
}
});
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"
}]
}]
}
我想显示所选餐厅的菜单项(项目,项目,项目......)列表。但是当我使用嵌套列表时,我必须使用与之前列表相同的模板,这不符合我的需要。 目前我得到了适量的物品但没有显示。 你能帮我解决我出错的地方吗,谢谢。
在我找到解决方案之前,这里有一些代码问题(需要在解决方案工作之前修复):
在Contacts
存储中的代理配置中,JSON的roog配置是rootProperty
,而不是root
。
proxy: { type: 'ajax', url: 'contacts.json', reader : { type : 'json', rootProperty : 'stores' } }
您也可以将此代码放入模型中,因为您已经在其中放置了代理配置。 这里都是合并的(应该在你的模型中,并从商店中删除代理):
proxy: { type: 'ajax', url: 'contacts.json', reader : { type : 'json', rootProperty : 'stores' } }
模型名称应始终为单数,因为它们代表一个对象。 所以使用Menu
,而不是Menus
。
您需要在您使用它们的类中使用您使用的任何类。 例如,您需要Sencha.model.Menu
类中的Sencha.model.Contact
类,因此将其添加到Contact.js
内的requires
属性中:
Ext.define('Sencha.model.Contact', { extend: 'Ext.data.Model', requires: ['Sencha.model.Menu'], ... });
您需要在hasMany关联中使用associationKey
,因为它通常会查找menus
(从模型名称生成),但在您的JSON中是menu
。
hasMany
和belongsTo
configs应该在你的模型中的config
块内。
Ext.define('Sencha.model.Contact', { extend: 'Ext.data.Model', requires: ['Sencha.model.Menu'], config: { ... hasMany: { model: "Sencha.model.Menu", associationKey: 'menu' } } });
至于解决方案 :) - 您可以修改列表中的itemTpl
以显示与所显示记录相关联的内容。 为此,您可以使用:
<tpl for="associatedModelName">
{field_of_associated_model}
</tpl>
所以在你的情况下,你可以做这样的事情:
itemTpl: [
'{name}',
'<div>',
'<h2><b>Menu</b></h2>',
'<tpl for="menus">',
'<div> - {item}</div>',
'</tpl>',
'</div>'
].join('')
这是一个项目的下载(使用SDK工具生成),其中包含一个演示,主要使用您的代码: http : //rwd.me/FS57
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.