PDA

View Full Version : initial XTemplate to replace html tag in panel



Chap
20 Oct 2009, 9:33 PM
Hi, I want to create a html table format panel (just named myTablePanel). I want to new this tablePanel so as to get it. So I have to extend a panel for it.

Below is the code (The question is in red tag):



var testData = {
head: 'head',
tdlist: [
{
Heading: 'Heading1',
col: 'col1',
name: 'name1',
desc: 'desc1'
},{
Heading: 'Heading2',
col: 'col2',
name: 'name2',
desc: 'desc2'
}
]
}
TablePanel = Ext.extend(Ext.Panel, {
constructor: function(config){
var ttt = new Ext.XTemplate(
'<table border="1" cellpadding="0" cellspacing="0">' +
'<tr>' +
'<td>{head}</td>' +

'<tpl for="tdlist"' +

'<td rowspan="3">' +

'<table>' +
'<tr>' +
'<td>{Heading}</td>' +
'<td rowspan="3" align="center">{col}</td>' +
'</tr>' +
'<tr>' +
'<td>{name}</td>' +
'</tr>' +
'<tr>' +
'<td>{desc}</td>' +
'</tr>' +
'</table>' +

'</td>' +

'</tpl>' +

'</tr>' +
'</table>'
);
ttt.disableFormats = true;
ttt.compile();

??????????????
here, how should I add the testData value to define this XTemplate????
config.html = ttt.apply('', config.value) ??

I have no idea. For somebody's help
??????????????

TablePanel.superclass.constructor.apply(this, arguments);
}
});
Ext.reg('tabelpanel', TablePanel);

var myTablePanel = new TablePanel({
title: 'test',
value: testData,
cls: 'myClass'
});

var win = new Ext.Window({
title: 'myWindow',
closable:true,
width:600,
height:350,,
plain:true,
layout: 'fit',
maximizable: true,
items: [myTablePanel]
});

Chap
21 Oct 2009, 6:57 AM
If no answered, any other way could be recommand would be appreciated! Thanks to all

Chap
22 Oct 2009, 7:03 PM
:(

Animal
22 Oct 2009, 10:58 PM
implement onRender which applies the template to the Panel's body.