0

我想将 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>
4

1 回答 1

0

我想出了一个适当的解决方案：

...
// 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);
},
于 2012-10-24T19:14:12.503 回答