0

パネルでテンプレートを使用しようとしています。テンプレートトリガーは、別のグリッドアイテムの選択から取得されます。しかし、このコードは機能しません。

私のコードの何が問題になっていますか？コードをコピーして貼り付けるだけで実行できます...誰か、これを修正してくれませんか？

HTMLコード：

<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js">
</script>
<script type="text/javascript">
Ext.onReady(function () {

Ext.create('Ext.data.Store',{
    storeId: 'letterStore',
    fields: ['TitleLetter','LetterType'],
    data: {
    'items': [
        { 'TitleLetter' : 'Keterangan', 'LetterType' : 'Not My Type'},
        { 'TitleLetter' : 'Dua', 'LetterType' : 'Yes This is my Type' }
    ]
    },
    proxy: {
    type: 'memory',
    reader: {
        type: 'json',
        root: 'items'
    }
    }
});


var panel = Ext.create('Ext.panel.Panel',{
    title: 'Testing',
    renderTo: Ext.getBody(),
    items: [
    {
        xtype: 'gridpanel',
        title: 'Grid For TPL',
        bodyPadding: 5,
        listeners: {
        itemclick: function(selModel, record, index, options){

            var detailPanel = this.child('#detailPanel');
            detailPanel().update(record.data);
        }
        },
        store: Ext.data.StoreManager.lookup('letterStore'),
        width: 300,
        height: 300,
        columns: [
        {
            xtype: 'gridcolumn',
            dataIndex: 'TitleLetter',
            text: 'Judul Surat'
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'LetterType',
            text: 'Tipe Surat'
        },

        ]
    },
    {
        xtype: 'panel',
        itemId: 'detailPanel',
        title: 'Show TPL',
        tpl: ['I am trying to use TPL {TitleLetter}']
    },


    ]


});



});

</script>
</head>
<body>
</body>
</html>
4

1 に答える 1

2

itemclickあなたのイベントのためにこれを試してください：

itemclick: function(selModel, record, index, options) {
    // In this function, "this" refers to the grid,
    // so you need to go up to the parent panel then
    // back down to get the detailPanel

    var detailPanel = this.up().down("#detailPanel");
    detailPanel.update(record.data);
}

Ext.ComponentQuery編集:完全にバイパスするさらに高速な方法。

itemclick: function(selModel, record, index, options) {
    var detailPanel = this.ownerCt.getComponent("detailPanel");
    if (detailPanel) {
        detailPanel.update(record.data);
    }
}
于 2013-02-01T18:51:56.590 に答える