在Panel上绘制Html表？

Question

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

每行的数据可以来自商店.它不像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>'
                }, {
                    html: '&lt;table class="style1">'
                }],
            }
        }]
})

Answer 1

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

这是一个例子.

首先,创建自己的扩展容器的组件(因为你可能希望它可以滚动,只有容器是可滚动的),然后给它一个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>',
                    '</tpl>',
                '</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 2' },
                                { html: 'column 3' }
                            ]
                        }
                    ]
                },
                {
                    title: 'Header 2',
                    rows: [
                        {
                            columns: [
                                { html: 'column 1' },
                                { html: 'column 2' },
                                { html: 'column 3' }
                            ]
                        }
                    ]
                }
            ]
        });

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