PDA

View Full Version : How to initialize a customized component?



thiner
31 Jul 2013, 7:13 PM
Hi Guys,

I'm new to Ext 4. I have a problem when I was trying to initialize a customized component. It keeps throwing "Uncaught TypeError: Cannot read property 'added' of undefined". I looked into the ext-all code, seems the "added" is an event when a new component is added to a container. But I don't why this is happening. I spent lot of time try to solve it, but I just can't get it right...
Could someone please help me?


Ext.define('view.ChartGenerator', {
alias: ['widget.chartgenerator'],
extend: 'Ext.chart.Chart',


config: {
layout: 'vbox',
height: 300,
width: 200,
chartType: 'bar'
},

initComponent: function() {
this.callParent();

// if store is not defined, interupt chart creation.
if(!this.chartType){
throw 'Chart type is required.';
} else if(!this.store) {
throw 'Data store is required.';
}

},

createChart: function(){
// create bar chart
this.axes = [{
type: 'Numberic',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
this.series = [{
type: chartType,
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 100,
height: 30,
renderer: function(storeItem, item){
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333'
},
xField: 'name',
yField: 'data'
}]
},

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

,constructor: function(config) {
this.initConfig(config);

return this;
}

});


var w = Ext.create('Ext.window.Window', {
width: 600,
height: 400
});

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});
var c = Ext.create('view.ChartGenerator', {
chartType: 'bar',
store: store
});

w.add(c);
w.show();

julio.batista
1 Aug 2013, 2:54 AM
I think your constructor should be


constructor: function()
{
this.callParent(arguments);
}

If this is the only code you need in your constructor, you even don't need the constructor.

thiner
1 Aug 2013, 3:15 AM
I removed the constructor as you recommended, but it doesn't work.

julio.batista
1 Aug 2013, 5:53 AM
The erros were happening because you forgot some this. I changed it in the code below.
It still has an error, but it's because your logic is wrong. When you call the render method, it expects to have series and axes properties created.


Ext.define('view.ChartGenerator', {
alias: ['widget.chartgenerator'],
extend: 'Ext.chart.Chart',


config: {
layout: 'vbox',
height: 300,
width: 200,
chartType: 'bar'
},

initComponent: function() {
this.callParent();

// if store is not defined, interupt chart creation.
if(!this.chartType){
throw 'Chart type is required.';
} else if(!this.store) {
throw 'Data store is required.';
}

},

createChart: function(){
// create bar chart
this.axes = [{
type: 'Numberic',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
this.series = [{
type: this.chartType, // you forgot the this
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 100,
height: 30,
renderer: function(storeItem, item){
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333'
},
xField: 'name',
yField: 'data'
}]
},

onRender: function() {
this.callParent(arguments);
this.createChart(); // you forgot the this
}
});