Extjs4 extjs-将数据从JSON加载到面板中

Extjs4 extjs-将数据从JSON加载到面板中,extjs4,Extjs4,我想将JSON文件中的数据加载到面板(不是网格,只是面板)中,并使用模板显示信息。我不知道如何将面板与模型/商店连接起来。我正在使用Sencha Architect,如果这很重要的话。我已将商店和模型设置好并连接好。我只是不知道如何将这些信息传递给面板本身 json文件如下所示: "overview": { "image": "my-picture.jpg", "name": "my name", "title": "my title", "address": {

我想将JSON文件中的数据加载到面板(不是网格,只是面板)中,并使用模板显示信息。我不知道如何将面板与模型/商店连接起来。我正在使用Sencha Architect,如果这很重要的话。我已将商店和模型设置好并连接好。我只是不知道如何将这些信息传递给面板本身

json文件如下所示:

"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);”来访问记录,但仍然不确定如何将其推送到面板。