PDA

View Full Version : Problem using Ext.getCmp on child items



lucastp
27 Oct 2011, 5:13 AM
Hi,

I am quite new with extjs 4 so I would like to ask you help about the following code

var showInWindow = {
id:'commissionWindow',
xtype:'commissionearned',
url: '/app/getdata.json',
storeRoot: 'data',
width:800,
height: 600,
ytitle:'Lines Sold',
xtitle: 'Day',
xlabelsize: '12px Arial',
ylabelsize: '12px Arial',
style: 'background:#fff',
legend: {
position: 'right'
},
chartType: 'line',
animate:true

};
var window_c = Ext.create('Ext.window.Window', {
id:'myWin',
closeAction: 'hide',
modal:true,
hidden: false,
maximizable: true,
title: 'Column Chart',
layout: 'fit',
items: [showInWindow]

});

My problem is that if I try to execute Ext.getCmp('commissionWindow') I get undefined as returned value.

Does anyone know why the component showInWindow is not registered with the id 'commissionWindow'?

Thank you,

Luca.

Tim Toady
27 Oct 2011, 6:48 AM
Use code tags around your code [CODE]
What is your definition of 'commissionearned'?

lucastp
27 Oct 2011, 7:26 AM
Hi,

the code is the following

Ext.define('APP.charts.CommissionEarned', {
extend : 'Ext.chart.Chart',
alias: 'widget.commissionearned',
requires : ['APP.model.LinesSoldChart'],
config: {
width: 280,
height: 170,
url: '/app/linesSoldChart.json',
storeRoot: 'data',
theme: 'Red',
xtitle: null,
ytitle: null,
xlabelsize:'9px Arial',
ylabelsize:'9px Arial',
ratio:9,
style: null,
chartType: 'column',
animate:true
},
constructor: function(config) {
this.initConfig(config);
this.callParent([{theme: this.theme}]);
},
initComponent : function() {
this.store = this.buildStore();
this.axes = this.buildAxes();
this.series = this.buildSeries();
this.callParent();

},
buildStore: function() {

Ext.define('CommissionEarned', {
extend: 'Ext.data.Model',
fields: [{name:'commission', type:'int'}, {name:'year', type:'date', dateFormat: 'Y-m-d H:i:s'}]
});
return Ext.create('Ext.data.Store', {
model: 'CommissionEarned',
proxy: {
type: 'ajax',
url : this.url,
reader: {
type: 'json',
root: this.storeRoot
},
extraParams:{type:'commission'},
method: 'POST'
},
root: this.storeRoot,
fields: this.fields,
params: { type: 'commission'},
autoLoad: true
});

},
buildSeries: function(){

return [
{ showMarkers: false,
type: this.chartType,
xField: 'year',
yField: 'commission',
yAxis: {
labelRenderer: function(date) { return "£" + date; }
},

tips: {
trackMouse: true,
width: 150,
height: 35,
renderer: function(storeItem, item) {
this.setTitle(Ext.util.Format.date(storeItem.get('year'),' D d F Y') + "<br/> <font color=\"blue\">Commission Earned:</font>" +storeItem.get('commission') +"$");
// this.setTitle(storeItem.get('commission') + '$ Commission earned on ' + Ext.util.Format.date(storeItem.get('year'),' D Y-m-d'));
}
},
style: {

opacity: 0.93,
size: 10
},
listeners:{
itemmousedown : function(obj) {

}
}
}
]

},
buildAxes : function(){
var xlabel = this.xlabelsize;
var ylabel = this.ylabelsize;
return [

{
id: 'commission',
type: 'Numeric',
position: 'left',
title: this.ytitle != null ? this.ytitle: null,
animate: true,
fields: ['commission'],
minimum: 0,
grid: true,
titlePosition: 'top',
label: {
font: ylabel,
renderer: function(com) {return com + " $";}
}
},
{
id: 'year',
type: 'Time',
position: 'bottom',
title: this.xtitle != null ? this.xtitle: null,
grid: true,
dateFormat: 'd F', //'Y-m-d',
ratio: this.ratio,
filterInflection: function(index) {
//alert(this);
return ((index % this.ratio) == 0);
},
fields: ['year'],
label: {
font: xlabel,
renderer: function(date) { return Ext.util.Format.substr(date,0,6); }
}
}
];
},
changeChartScale: function(ratio,pos) {
this.axes.get(pos).filterInflection = function(index) {
return ((index % ratio) == 0);
}
},
loadStoreByParams : function(params) {
params = params || {};
this.store.load({
params : params
});
},
setType : function(chartType) {
this.chartType = chartType;
alert(this.series.get(0).type);
this.series.get(0).type = chartType;
}
});

thanks,

Luca.