Sencha Touch: how to get config from tpl?

Question

With Sencha Touch, I created a component to display a table for my mobile application.

Here's my component code:

Ext.define('MyApp.components.table.Table', {
    extend: 'Ext.Container',
    xtype: 'table',

    config: {
    cls: 'myTableCSS',
    scrollable: 'vertical',
    tpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '<table>',
                '<tr>',
                    '<tpl for="headers">',
                        '<th>{html}</th>',
                    '</tpl>',
                '</tr>',
                '<tpl for="rows">',
                    '<tr class="{[this.config.id]}" >',
                        '<tpl for="columns">',
                                '<td>{html}</td>',
                        '</tpl>',
                    '</tr>',
                '</tpl>',
            '</table>',
        '</tpl>'
    }
});

Here's my view implementation:

xtype: 'table',
id: 'myRedTable',
data: [
    {
        headers: [
            { html: 'firstname' },
            { html: 'lastname' },
            { html: 'age' }
        ],
        rows: [
            {
                columns: [
                    { html: 'John' },
                    { html: 'Smith' },
                    { html: '38' },
                ]
            }
        ]
    }
],

In my component, when I use {[this.config.id]} I would like to get the id of my view implementation (ie myRedTable ) but it doesn't work.

Is there any solution to achieve this?

Answer 1

It seems you wrote the syntax for inline arbitrary code correctly, but there's a problem with scope. this refers to the instance of Ext.XTemplate itself, not the table view.

You should try another way to get the reference of your table instance instead, for example, in your table's definition file:

initialize: function(){
    var me = this;
    me.setTpl('Ext.XTemplate',
        // blah blah ...
        // now you can use "me" to refer to your table instance
    )
}