在面板上绘制 HTML 表格? [英] Drawing Html tables on a Panel?

问题描述

如何在 Sencha Touch 2 的面板上生成常规 html

?

每一行的数据可能来自商店.它不像列表那样非常移动"，但我想在我的平板电脑应用程序上有一些详细信息面板，其中包含以下几个部分:

<前>标题#1<表><tr><td>一个</td>td>两个</td></tr><tr><td>foo</td>td>bar</td></tr>标题#2<表><tr><td>abc</td>td>xyz</td></tr><tr><td>猫</td>td>狗</td></tr>

基本面板定义应如下所示:

Ext.define('Kitchensink.view.HtmlTable', {扩展:'Ext.tab.Panel'，配置:{活动项目:1，标签栏:{停靠:'顶部'，布局: {包:'中心'}},项目: [{标题:'标签1'，项目: [{html: '<h2 class="section">Section #1</h2>'}, {html: '<table class="style1">'}],}, {title: '标签 2',项目: [{html: '<h2 class="section">Section #3</h2>'}, {html: '<table class="style1">'}],}}]})

解决方案

最简单的方法是创建一个 Ext.Component 并给它 tpl 配置.然后就可以使用data配置来更新数据在那个组件中.

这是一个例子.

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

Ext.define('TableComponent', {扩展:'Ext.Container',配置:{tpl: Ext.create('Ext.XTemplate','<tpl for=".">','<div>{title}</div>','<表>','<tpl for="rows">','','<tpl for="列">','<td>{html}</td>','</tpl>','</tr>','</tpl>','</表>','</tpl>')}});

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

Ext.setup({准备就绪:函数(){var table = Ext.create('TableComponent', {数据: [{title: '标题 1',行:[{列: [{ html: '第 1 列' },{ html: '第 2 列' },{ html: '第 3 列' }]},{列: [{ html: '第 1 列' },{ html: '第 2 列' },{ html: '第 3 列' }]}]},{title: '标题 2',行:[{列: [{ html: '第 1 列' },{ html: '第 2 列' },{ html: '第 3 列' }]}]}]});Ext.Viewport.add(table);}});

How can I generate a regular html <table> on a Panel in Sencha Touch 2?

The data for each row could be from a store. It's not very "mobile" like a List, but I'd like to have a few detail Panels on my tablet app contain several sections like this:

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>

The basic Panel definition should look something like this:

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">'
                }],
            }
        }]
})

解决方案

The easiest way would be simply create a Ext.Component and give it the tpl configuration. Then you can use the data configuration to update the data in that component.

Here is an example.

Firstly, create your own component which extends container (because you will probably want it scrollable, and only containers are scrollable) and then give it a tpl. This tpl will use XTemplate to loop through the data you give to dynamically create the table for you.

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

Now, inside your application you can use that component and give it some fake data - like so:

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

这篇关于在面板上绘制 HTML 表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！