< td> foo< / td> td> bar< / td>
< / table>
标题＃2
<
< tr> abc< / td> td> xyz< / td>
< tr>猫< / td gt; / td>< / tr>
< / table>
像这样：
Ext.define（'Kitchensink.view.HtmlTable'，{
extend：'Ext.tab .Panel'，
config：{
activeItem：1，
tabBar：{
docked：'top'，
layout：{
pack：'中心'
}
}，
物品：[{
title：'Tab 1'，
items：[{
html：'< h2 class =section> Section＃1< / h2>'
}，{
html：'& lt; table class =style1>'
$ b}，{
title：'Tab 2'，
items：[{
html：'< h2 class =section> Section＃ 3< / h2>'
}，{
html：'& lt; table class =style1>'
}]，
}
} ]
））
解决方案
最简单的方法是只需简单地创建一个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 =行>'，
'< tr>'，
'< tpl for =columns>'，
'< td> {html}< / td> ;'，
'< / tpl>'，
'< / table>'，
'< / tpl>'，
'< / table>' ，
'< / tpl>'
）
}
}）;
现在，在您的应用程序中，您可以使用该组件并为其提供一些假数据，如下所示： / p>
Ext.setup（{
onReady：function（）{
var table = Ext.create（' TableComponent'，{
data：[
{
title：'Header 1'，
rows：[
{
columns：[
{html：'column 1'}，
{html：'column 2'}，
{html：'column 3'}
]
}，
{
列：[
{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）;
}
}）;
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: '<table class="style1">'
}],
}, {
title: 'Tab 2',
items: [{
html: '<h2 class="section">Section #3</h2>'
}, {
html: '<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屋！
查看全文
