在Panel上绘制Html表？

如何生成常规html< table>在Sencha Touch 2的面板上？

每行的数据可以来自商店.它不像List一样非常“移动”,但我想在我的平板电脑应用程序上有一些细节面板包含以下几个部分：

header #1
<table>
 <tr><td>one</td>td>two</td></tr>
 <tr><td>foo</td>td>bar</td></tr>
</table>

header #2
<table>
 <tr><td>abc</td>td>xyz</td></tr>
 <tr><td>cat</td>td>dog</td></tr>
</table>

基本的Panel定义应如下所示：

Ext.define('Kitchensink.view.HtmlTable',{
    extend: 'Ext.tab.Panel',config: {
        activeItem: 1,tabBar: {
            docked: 'top',layout: {
                pack: 'center'
            }
        },items: [{
                title: 'Tab 1',items: [{
                    html: '<h2 class="section">Section #1</h2>'
                },{
                    html: '&lt;table class="style1">'
                }],},{
                title: 'Tab 2',items: [{
                    html: '<h2 class="section">Section #3</h2>'
                },}
        }]
})

解决方法

最简单的方法是创建一个Ext.Component并为其提供 tpl配置.然后,您可以使用 data配置更新该组件中的数据.

这是一个例子.

首先,创建自己的扩展容器的组件(因为你可能希望它可以滚动,只有容器是可滚动的),然后给它一个tpl.这个tpl将使用XTemplate遍历您提供的数据,以便为您动态创建表.

Ext.define('TableComponent',{
    extend: 'Ext.Container',config: {
        tpl: Ext.create('Ext.XTemplate','<tpl for=".">','<div>{title}</div>','<table>','<tpl for="rows">','<tr>','<tpl for="columns">','<td>{html}</td>','</tpl>','</tr>','</table>','</tpl>'
        )
    }
});

现在,在您的应用程序中,您可以使用该组件并为其提供一些虚假数据 – 如下所示：

Ext.setup({
    onReady: function() {
        var table = Ext.create('TableComponent',{
            data: [
                {
                    title: 'Header 1',rows: [
                        {
                            columns: [
                                { html: 'column 1' },{ html: 'column 2' },{ html: 'column 3' }
                            ]
                        },{
                            columns: [
                                { html: 'column 1' },{ html: 'column 3' }
                            ]
                        }
                    ]
                },{
                    title: 'Header 2',{ html: 'column 3' }
                            ]
                        }
                    ]
                }
            ]
        });

        Ext.Viewport.add(table);
    }
});