在面板上绘制Html表格？

Question

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

每行数据都可以来自存储，它不太像一个List那样适合移动端设备，但我想在我的平板应用程序中有几个详细面板包含这样的几个部分：

标题 #1
<table>
 <tr><td>one</td>td>two</td></tr>
 <tr><td>foo</td>td>bar</td></tr>
</table>
标题 #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">'
                }],
            }
        }]
})

- user568866

Answer 1

最简单的方法是创建一个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>',
                    '</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);
    }
});

- rdougan

---

这节省了我数小时的折腾！谢谢！ - davidcollom

@rdougan，感谢您的回答，这正是我需要的应用程序。如果我要在MVC结构中使用自定义TableComponent，我需要将文件放在哪里，如何加载类？ - Chris Schmitz