PDA

View Full Version : How to render chart inside Xtemplate



naveen.kumar
16 Jan 2013, 3:57 AM
How to render Chart inside Xtemplate. The code is given below.Please provide me sample code as well.

Ext.define('Analysis.view.Transmissions.TransmissionsSummary', {
extend:'Ext.container.Container',
alias:'widget.transmissionssummary',
layout:'hbox',
initComponent:function () {
this.items = [
{
xtype:'component',
id:'summary'
},
{
xtype:'container',
layout:'vbox',
items:[
{
xtype:"container",
layout:'hbox',
margin:'0 10 0 0',
items:[
/* {
xtype:'chart',
width:50,
height:50,
insetPadding:7,
animate:true,
theme:'Base:gradients',
store:'Transmissions.SummaryStore',
series:[
{
type:'pie',
field:'Value'
}
]
},*/
{
xtype:'dataview',
store:'Transmissions.SummaryStore',
tpl:this.createTemplate(),
listeners:{
'activate':function () {


}
}
}
]
}
]
}
]
this.callParent(arguments);
},
createTemplate:function () {
var tpl = new Ext.XTemplate(
'<div class="summaryContainer">',
'<tpl for=".">',
'<tpl if="this.calculate(Value)">',
'<div class="block">',
'<span class="heading">{[values.Key.toUpperCase()]}</span>',
'<span class="headingtext">{Value}</span>',
'</div>',
'<tpl elseif="this.compare(Key)">',
'<div class="block">',
'<span class="heading">{[values.Key.toUpperCase()]}</span>',
'<div id="xx"></div>',
'<tpl for="Value">',
'<div class="SubHeadingblock">',
'<span class="subheadingValue">{Value}</span>',
'<span class="subheadingText">{Key}</span>',
'</div>',
'</tpl>',
'</div>',
'<tpl else>',
'<tpl for="Value">',
'<div class="block">',
'<span class="heading">{[values.Key.toUpperCase()]}</span>',
'<span class="headingtext {[this.checkClass(values.Key)]}">{Value}</span>',
'</div>',
'</tpl>',
'</tpl>',
'<tpl if="xindex &lt; xcount">',
'<div class="separator"><!-- --></div>',
'</tpl>',
'</tpl>',
'</div>',
{
compiled: true,
calculate:function (Value) {
if (typeof Value != 'object')
return true;
else
return false;
},
compare:function (Key) {
if (Key == "By Transaction Types")
return true;
else
return false;
},
checkClass:function (key) {
if (key.toUpperCase() == "INBOUND") {
return "inbound";
}
else if (key.toUpperCase() == "OUTBOUND") {
return "outbound";
}
else if (key.toUpperCase() == "ACCEPTED") {
return "accepted";
}
else if (key.toUpperCase() == "PARTIAL") {
return "partial";
}
else if (key.toUpperCase() == "REJECTED") {
return "rejected";
}
},
create:function()
{

}
}
);
return tpl;
}
});

mitchellsimoens
18 Jan 2013, 4:41 AM
I would use CTemplate: http://skirtlesden.com/ux/ctemplate

naveen.kumar
21 Jan 2013, 9:43 AM
Is there any other way to do this. Can you me sample code also?