PDA

View Full Version : How tu use config with Ext.extend and intcomponent



ibrapartage
31 Dec 2010, 7:19 PM
Hi All,

I am new to ExtJs. I have gone through some of the many great and usufull ExtJs tutorial. I have almost completed the 'Application Design' section. I have a problem with the tutorial 'Extending using initComponent'. I have also watched many of the Jay Garcia (tdg-i.com) great screencasts.

I used the 'Writing a Big Application in Ext' suggestions and the proposed 'JavaScript Extension File Patern' to build an extention of StackedBarChart panel. I want to be able to used the new panel in a viewport center region. When I tried to set the region on a config objet I am getting the following error message:

Error: uncaught exception: No center region defined in BorderLayout ext-comp-1018

The only way I found to avoid the error is to hard code the region in the initcomponent of the newly extended panel. I think it should be possible to pass the region value to the panel contructor in a config object.

I may be wrong.

I need you help.

Many thanks
Ibra Partage.

ibrapartage
31 Dec 2010, 7:30 PM
My code:
// create namespace
Ext.namespace('myNameSpace');

myNameSpace.StackedBarChartPanel = Ext.extend
(
myNameSpace.AbstractStackedBarChartPanel,
{

// {{{
/**
* Builds chart item
* @param {Object} config The config object is passed here
* from buildConfig by reference. Do not create or return
* a new config object, add to the passed one instead.
*
* You can override this function if you need to customize it.
*/
buildChart:function(config)
{

config.items.xtype = 'stackedbarchart';
config.items.xAxis = new Ext.chart.NumericAxis
(
{
stackingEnabled: true,
labelRenderer: Ext.util.Format.usMoney
}
);
config.items.yField = 'year';
config.region = 'center';
config.title = 'Stacked Bar Chart - Movie Takings by Genre';
/*
config.items =
{
xtype: 'stackedbarchart',
yField: 'year',
xAxis: new Ext.chart.NumericAxis
(
{
stackingEnabled: true,
labelRenderer: Ext.util.Format.usMoney
}
)
}
*/
} // eo function buildChart
// }}}
// {{{
/**
* Builds series
* @param {Object} config The config object is passed here
* from buildConfig by reference. Do not create or return
* a new config object, add to the passed one instead.
*
* You can override this function if you need to customize it.
*/
,buildSeries:function(config)
{
config.items.series =
[
{
xField: 'comedy',
displayName: 'Comedy'
},
{
xField: 'action',
displayName: 'Action'
},
{
xField: 'drama',
displayName: 'Drama'
},
{
xField: 'thriller',
displayName: 'Thriller'
}
];
} // eo function buildSeries
// }}}
// {{{
/**
* Builds store
* @param {Object} config The config object is passed here
* from buildConfig by reference. Do not create or return
* a new config object, add to the passed one instead.
*
* You can override this function if you need to customize it.
*/
,buildStore:function(config)
{

var storeStackedBar = new Ext.data.JsonStore
(
{
fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
data:
[
{year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
{year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
{year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
{year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000},
{year: 2009, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000},
{year: 2010, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000},
{year: 2011, comedy: 0, action: 0, drama: 0, thriller: 0}
]
}
);
config.items =
{
store : storeStackedBar
};
} // eo function buildStore
// }}}

}
); // eo extend

Ext.reg('myStackedBarChartPanel', myNameSpace.StackedBarChartPanel );
// eof

chriss
7 Jan 2011, 1:41 PM
Just like in any oo programming language, if you override a method and still want to keep the original behaviour, you have to call the original one, in your case add myNameSpace.StackedBarChartPanel.superclass.initComponent.call(this) at the bottom of your overriden initComponent method.

Usually, i prefer to override directly the constructor, because it gives me full access to the config object



var View = Ext.extend(Ext.Container,{
constructor: function(config){
config = Ext.applyIf(config || {},{
layout:"border",
items:[{
region:"center"
},{
region:"north"
}]
});

View.superclass.constructor.call(this, config)
}
})

ibrapartage
8 Jan 2011, 9:24 PM
Many thanks Chriss, I will try it.
Ibra :)