PDA

View Full Version : panel/chart in tpl



sveatlo
26 Feb 2013, 8:47 AM
Hi,
I've got a MVC application, which uses a dataview with XTemplate.
In the tpl, there is a html table with auto-filled data. I want a chart on the right side of the table.
I've tried something like this, but it doesn't work:


Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: ['temperature', 'date']
});
var store = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [
{ temperature: 58, date: new Date(2011, 1, 1, 8) },
{ temperature: 63, date: new Date(2011, 1, 1, 9) },
{ temperature: 73, date: new Date(2011, 1, 1, 10) },
{ temperature: 78, date: new Date(2011, 1, 1, 11) },
{ temperature: 81, date: new Date(2011, 1, 1, 12) }
]
});

...


{
xtype: 'dataview',
store: Ext.data.StoreManager.lookup('HomeTables'),
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<table id="tfhover" id="home_table" class="tftable" style="margin-bottom: 10px;">',
'<caption class="x-panel-header-default">{corporation}</caption>',
'<tr><td colspan="2">'+translation[lang].home.table.expenses+':<br>{nakladyCelk}</td><td colspan="2">'+translation[lang].home.table.profit+':<br>{ziskCelk}({marzaCelk})</td><td colspan="2">'+translation[lang].home.table.revenues+':<br>{prijmyCelk}</td></tr>',
'<tr><td colspan="2">'+translation[lang].home.table.expensesnot+':<br>{neuhrPrijCelk}</td><td colspan="2">'+translation[lang].home.table.vat+': <br>{dph}</td><td colspan="2">'+translation[lang].home.table.revenuesnot+':<br>{neuhrVydCelk}</td></tr>',
'</table>',
Ext.create('Ext.chart.Chart', {
width: 400,
height: 300,
store: store
}),
'</tpl>'
),
multiSelect: true,
trackOver: true,
deferEmptyText: false,
itemSelector: 'table#home_table',
emptyText: 'No data',
listeners: {
'itemclick': function(view, record, item, idx, event, opts) {
//location.hash = '!' + record.raw.dbName;
//location.reload();
console.log('click')
}
}

}

...

Is it possible to create a chart from the tpl, so every record has its own chart?

I really appreciate any help you can provide

crysfel
26 Feb 2013, 9:37 AM
What I usually do in these situations is to create the panel/chart or any other component that I need in the onRender method of the class, this way I can render the component anywhere I want using the renderTo property. Something like this:





Ext.define('MyApp.view.CustomView',{
extend : 'Ext.view.View',

initComponent : function(){

this.store = {xtype:'mystore'},
this.itemTpl = new Ext.XTemplate(
....
'<div id="item-{class-id}-{id}"></div>'
....
);

this.callParent();
},

onRender : function(){
this.callParent(arguments);

Ext.create('Ext.panel.Panel',{
renderTo : this.el.down('item-'+this.id+'-'+record.getId())
});

}
});


I have to do it in this way because the template is not a container, is just plain HTML nodes, so what I do is define a dynamic ID in the template so I can get the node easily.

Regards