我有一个列表,显示带有餐厅徽标等的餐厅列表。
风景
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
添加类,因此请将其添加到内部的requires
属性中Contact.js
:
Ext.define('Sencha.model.Contact', {
extend: 'Ext.data.Model',
requires: ['Sencha.model.Menu'],
...
});
您需要associationKey
像通常那样在hasMany关联中使用menus
(从Model名称生成),但在JSON中使用它menu
。
hasMany
和belongsTo
配置应该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
问题内容: 使用AJAX发出POST请求后,我得到以下JSON响应: 我正在使用数据表来显示数据..但是使用此嵌套的JSON,我无法直接获取数据。我正在使用此https://datatables.net/examples/server_side/post.html https://datatables.net/reference/option/ajax.dataSrc作为参考。 问题答案: 您必须
问题内容: 我想将jqgrid与嵌套子网格一起使用。但是,我发现的唯一示例是使用一个url负载数据调用和单独的调用来填充主网格,以填充子网格。 我的子网格数据以嵌套文档的形式存在于一个JSON结构中,如下面的代码片段所示(我希望各章显示为本书的子网格,而文件则应作为各章中的子网格)。 我可以使用jqgrid从嵌套的JSON文档创建子网格吗? 问题答案: 我进行了演示,演示了如何执行此操作: 该演示
我正在编写一个使用嵌套ViewPager的应用程序。每个父ViewPager包含7个子ViewPager。 对于第一个父视图,它可以正常工作,但当它到达下一页时,它在子视图页面的位置显示为空白。 如果使用嵌套视图寻呼机是可行的,这里有什么建议吗?如果是的话,我怎么能避免这个案子呢? 父ViewPager布局与子片段相同: 这是我在父ViewPager片段中实现的子ViewPager适配器:
我将spring boot与thymeleaf结合使用,在页面中尝试显示表单及其嵌套对象。 我的对象工厂有 id 当我显示时 我的工厂有很多机器,但没有一台展出 任何想法?
弹性搜索无法将我的对象列表识别为嵌套类型。我希望这种情况能够自动发生,而不需要为每个这样的字段更新映射。我需要_mappingsAPI的响应有某种标识符来区分列表类型的属性。 例如:当我在新的测试索引('mapping_index')上索引这样的文档时 和hit mappings api localhost:9200/mapping_index/_mapping 我明白了 我想要像这样的 对于该响
嵌套哈希参数有一些问题。这个产品有许多特点。假设产品1具有功能foo和baz。 我想通过产品和所有功能来查询link_to中的字符串参数,这样它最终看起来像这样: "/小狗/新?特征[baz]=qux 我目前正在尝试这个,它会出现语法错误,原因可能对不是我的人来说很明显。 知道我在干什么蠢事吗? 更新:我已将代码更新为: <代码> 这更接近,因为我的输出URL现在是: /puppies/new?特