Question

我想将数据从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>

Answer 1

我已经找到了一个合适的解决方案：

...
// 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);
},

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

1 个答案: