在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>head 如何生成常规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 >Section #1</h2>'                },{                    HTML: '&lt;table >'                }],},{                Title: 'Tab 2',items: [{                    HTML: '<h2 >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);    }});

总结

以上是内存溢出为你收集整理的在Panel上绘制Html表？全部内容，希望文章能够帮你解决在Panel上绘制Html表？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。