javascript - Sencha 触摸 : how to get config from tpl?

Question

通过 Sencha Touch，我创建了一个组件来为我的移动应用程序显示表格。

这是我的组件代码:

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

这是我的 View 实现:

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

在我的组件中，当我使用 {[this.config.id]} 时，我想获取 View 实现的 id(即 myRedTable)，但它不起作用。

有什么解决方案可以实现这一点吗？

Answer 1

看来您正确地编写了内联任意代码的语法，但范围存在问题。 this 指的是 Ext.XTemplate 本身的实例，而不是 TableView 。

您应该尝试另一种方法来获取表实例的引用，例如，在表的定义文件中:

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