Home/ Questions/Q 9229745
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:38:52+00:00

I am trying to use template in a panel. The template trigger is come

  • 0

I am trying to use template in a panel. The template trigger is come from another grid item selection. But this code doesn’t work….

What is wrong with my code?
Just simple copy/paste my code to run…
Anyone, would you please fix this for me?

HTML Code:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this for your itemclick event:

    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);
}

    EDIT: An even faster method that bypasses Ext.ComponentQuery entirely.

    itemclick: function(selModel, record, index, options) {
    var detailPanel = this.ownerCt.getComponent("detailPanel");
    if (detailPanel) {
        detailPanel.update(record.data);
    }
}
    • 0