PDA

View Full Version : Extending Graph



bkraut
29 May 2011, 10:56 AM
Hi,

I tried to extend a graph to form a reusable component, but no success. I allways get an error - too much recursion.

Here is my class:



Ext.namespace("Ext.ux");

Ext.ux.IterationBurnDownChart = Ext.extend(Ext.Panel, {

// ***********************************************************************************
// ***********************************************************************************
// Init component
// ***********************************************************************************
// ***********************************************************************************

initComponent: function() {

var store = new Ext.data.JsonStore({
fields:['name', 'idealBurnDown', 'completedTasks', 'remainingTasks', 'remainingEffort'],
data: [
{name:'Jul 07', completedTasks: 245, idealBurnDown: 300, remainingTasks: 400, remainingEffort: 250},
{name:'Jul 08', completedTasks: 240, idealBurnDown: 350, remainingTasks: 450, remainingEffort: 290},
{name:'Jul 09', completedTasks: 355, idealBurnDown: 400, remainingTasks: 500, remainingEffort: 300},
{name:'Jul 10', completedTasks: 375, idealBurnDown: 420, remainingTasks: 540, remainingEffort: 430},
{name:'Jul 11', completedTasks: 490, idealBurnDown: 450, remainingTasks: 540, remainingEffort: 420},
{name:'Jul 12', completedTasks: 495, idealBurnDown: 580, remainingTasks: 600, remainingEffort: 540},
{name:'Jul 13', completedTasks: 520, idealBurnDown: 600, remainingTasks: 720, remainingEffort: 620},
{name:'Jul 14', completedTasks: 620, idealBurnDown: 750, remainingTasks: 800, remainingEffort: 720}
]
});

Ext.apply(this, {
iconCls:'chart',
title: 'Burndown Chart',
collapsible: true,
width: 460,
height: 320,
frame:true,
items: {
xtype: 'columnchart',
store: store,
url:'../lib/ext/resources/charts.swf',
xField: 'name',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series){
if(series.yField == 'visits'){
return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
}else{
return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
}
},
chartStyle: {
animationEnabled: true,
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
},
series: [{
type: 'column',
displayName: 'Completed tasks',
yField: 'completedTasks',
style: {
image:'bar.gif',
mode: 'stretch',
color:0xf9993c
}
},{
type:'line',
displayName: 'Remaining effort',
yField: 'remainingEffort',
style: {
color: 0x12217c
}
},{
type:'line',
displayName: 'Ideal burndown',
yField: 'idealBurnDown',
style: {
color: 0x1b8027
}
},{
type:'line',
displayName: 'Remaining tasks',
yField: 'remainingTasks',
style: {
color: 0x6a7fff
}
}]
}
});
Ext.ux.IterationBurnDownChart.superclass.constructor.call(this, arguments);
}

});

//***********************************************************************************
//***********************************************************************************
//Registering xtype
//***********************************************************************************
//***********************************************************************************

Ext.reg('IterationBurnDownChart', Ext.ux.IterationBurnDownChart);

skirtle
29 May 2011, 2:36 PM
You're calling the superclass's constructor from your initComponent, you should be calling the superclass's initComponent.

bkraut
30 May 2011, 11:57 PM
Of course. After hours of work ... :) Thanks.