Why this tpl doesn't work?

Question

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>

Yup... Thank you very much for your answer. I was new to stackoverflow. The people all around the world have different language. I am learning english. I don't mean sarcasm. — kenzominang, Jun 21 '13 at 04:01

Eric · Accepted Answer · 2013-02-06T14:58:16.650

2

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

edited Feb 06 '13 at 14:58

answered Feb 01 '13 at 18:51

Eric

6,965
26
32

Wow... great... Your explanation make me clear. Thank you very much @Eric :) – kenzominang Feb 01 '13 at 22:15
2

? If this isn't sarcasm, can you please mark this as the correct answer. – Reimius Feb 02 '13 at 04:50
1

@Reimius The ExtJS tags are infested with guys that didn't know what that is ;) From me you get a +1 Eric ;) And not to forget if this is sarcasm; do it yourself – sra Feb 05 '13 at 07:48
@Reimius It's actually not a DOM lookup. It's purely a component lookup, and it's decently fast. The `up` method returns `this.ownerCt` if no arguments are given, and the `down` method essentially just loops over a container's items and matches on `itemId`. However, I found an even better solution. Edit above. – Eric Feb 06 '13 at 14:54

Why this tpl doesn't work?

1 Answers1