@Nuri,在你的代码中你正在设置
html
使用
Ext.XTemplate
的内部
panel
,这不是正确的使用方法
html
配置。
如果要使用
html
在中配置
面板
然后您需要像下面的示例一样设置tpl
html:'<table class="x-date-table"><tbody><tr><th>SNo.</th><th>Date</th><th>Event</th><th>Venue Details</th></tr><tr><td>1</td><td>12 February</td><td>Waltz with Strauss</td><td>Main Hall</td></tr><tr><td>2</td><td>24 March</td><td>The Obelisks</td><td>West Wing</td></tr><tr><td>3</td><td>15 February</td><td>Kolidoscop</td><td>Reception Hall</td></tr><tr><td>4</td><td>24 March</td><td>The data center</td><td>UDM</td></tr></tbody></table>'
如果要使用
tpl/Ext.XTemplate
在中配置
面板
然后您需要像下面的示例一样设置tpl
tpl: new Ext.XTemplate(
//start table
'<table class="x-date-table">',
//Header of my table
'<tr>',
'<th>SNo.</th>',
'<th>Date</th>',
'<th>Event</th>',
'<th>Venue Details</th>',
'</tr>',
//Looping insdie tpl for creating multiple row depend on data
'<tpl for=".">', //Start loop tpl
'<tr>',
'<td>{#}</td>',
'<td>{date}</td>',
'<td>{event}</td>',
'<td>{venue}</td>',
'</tr>',
'</tpl>', //End loop tpl
'</table>' //Close table
)
在这个
FIDDLE
,我已经用上面提到的方法创建了一个演示。我希望这将帮助您或指导您实现您的要求。
代码段
Ext.application({
name: 'Fiddle',
launch: function () {
var data = [{
date: '12 February',
event: 'Waltz with Strauss',
venue: 'Main Hall'
}, {
date: '24 March',
event: 'The Obelisks',
venue: 'West Wing'
}, {
date: '15 February',
event: 'Kolidoscop',
venue: 'Reception Hall'
}, {
date: '24 March',
event: 'The data center',
venue: 'UDM'
}];
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
fullscreen: true,
title: 'Example of XTemplate in Panel',
tpl: new Ext.XTemplate(
'<table class="x-date-table">',
'<tr>',
'<th>SNo.</th>',
'<th>Date</th>',
'<th>Event</th>',
'<th>Venue Details</th>',
'</tr>',
'<tpl for=".">',
'<tr>',
'<td>{#}</td>',
'<td>{date}</td>',
'<td>{event}</td>',
'<td>{venue}</td>',
'</tr>',
'</tpl>',
'</table>'
),
data: data
});
function doGetHtml(arr) {
let html = `<table class="x-date-table"><tr><th>SNo.</th><th>Date</th><th>Event</th><th>Venue Details</th></tr>`;
arr.forEach((item, index) => {
html += `<tr><td>${index+1}</td><td>${item.date}</td><td>${item.event}</td><td>${item.venue}</td></tr>`;
});
return `${html}</table>`
}
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
margin: '20 0 0 0',
fullscreen: true,
title: 'Example of HMTL in Panel',
html: doGetHtml(data)
});
}
});