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

这是我的视图实现：

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

在我的组件中，当我使用{[this.config.id]}时，我希望获得我的视图实现的ID（即myRedTable），但它不起作用。

有没有解决办法来实现这个目标？

Answer 1

您似乎正确编写了内联任意代码的语法，但是范围存在问题。 this指的是Ext.XTemplate本身的实例，而不是表格视图。

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

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

Sencha Touch：如何从tpl获取配置？

1 个答案: