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 に答える