Extjs4 extjs-将数据从JSON加载到面板中
我想将JSON文件中的数据加载到面板(不是网格,只是面板)中,并使用模板显示信息。我不知道如何将面板与模型/商店连接起来。我正在使用Sencha Architect,如果这很重要的话。我已将商店和模型设置好并连接好。我只是不知道如何将这些信息传递给面板本身 json文件如下所示:Extjs4 extjs-将数据从JSON加载到面板中,extjs4,Extjs4,我想将JSON文件中的数据加载到面板(不是网格,只是面板)中,并使用模板显示信息。我不知道如何将面板与模型/商店连接起来。我正在使用Sencha Architect,如果这很重要的话。我已将商店和模型设置好并连接好。我只是不知道如何将这些信息传递给面板本身 json文件如下所示: "overview": { "image": "my-picture.jpg", "name": "my name", "title": "my title", "address": {
"overview": {
"image": "my-picture.jpg",
"name": "my name",
"title": "my title",
"address": {
"line1": "123 Fake St",
"line2": "",
"city": "Nowhere",
"state": "NJ",
"zip" : "12345"
}
}
我想使用的模板如下所示:
<div>
<img src="images/{image}"><br/>
{name}, {title}
<br/>
{address.line1}<br/>
{address.line2}<br/>
{address.city}, {address.state}<br/>
{address.zip}
</div>
{name},{title}
{address.line1}
{address.line2}
{address.city},{address.state}
{address.zip}
我想出了一个合适的解决方案:
...
// panel declaration in the items array
{
xtype: 'panel',
flex: 1,
region: 'west',
tpl: [
'<div>',
'<img src="images/{image}"><br/>',
'{name}, {title}',
'<br/>',
'{address.line1}<br/>',
'{address.line2}<br/>',
'{address.city}, {address.state}<br/>',
'{address.zip}',
'</div>'
],
width: 150,
bodyCls: 'x-panel-body-white',
header: false,
title: 'Address',
listeners: {
afterrender: {
fn: me.onPanelAfterRender,
scope: me
}
}
},
...
// and later on in the code, a function that fires after render
onPanelAfterRender: function(abstractcomponent, options) {
var s = Ext.getStore('MyAddresses');
var r = s.getAt(0).raw;
abstractcomponent.tpl.overwrite(abstractcomponent.body, r);
},
。。。
//items数组中的面板声明
{
xtype:'面板',
弹性:1,
地区:'西部',
第三方物流:[
'',
“
”,
“{name},{title}”,
“
”,
“{address.line1}
”,
“{address.line2}
”,
“{address.city},{address.state}
”,
“{address.zip}”,
''
],
宽度:150,
bodyCls:“x-panel-body-white”,
标题:false,
标题:“地址”,
听众:{
后渲染:{
fn:me.onPanelAfterRender,
范围:我
}
}
},
...
//稍后在代码中,一个在渲染后激发的函数
onPanelAfterRender:函数(抽象组件、选项){
var s=Ext.getStore('MyAddresses');
var r=s.getAt(0).raw;
abstractcomponent.tpl.overwrite(abstractcomponent.body,r);
},
我通过添加代码访问了存储:var s=Ext.getStore('MyJsonFile');通过执行“var r=s.getAt(0);”来访问记录,但仍然不确定如何将其推送到面板。