Question

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

每行的数据可以来自商店。它不像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配置。然后，您可以使用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);
    }
});

在Panel上绘制Html表？

1 个答案: