PDA

View Full Version : Extending Grid giving error with initConfig()



netemp
17 Apr 2012, 7:25 AM
We need to extend the grid component and add new properties to it.

Below is simplified version of the code we are using for it:



Ext.define('Ext.pnc.Grid',{
extend: 'Ext.grid.Panel',
alias: 'widget.pncgrid',
config:{
showCountColumn:true//a new property added
},
constructor:function(config){
this.initConfig(config);//This line is throwing error -> me.additionalCls is undefined on ext-all-debug.js (line 17129)
this.callParent(arguments);
}
});



Here line this.initConfig(config); is producing the error - me.additionalCls is undefined ext-all-debug.js (line 17129).

We have extended other components too, like window, textfield etc.. and used the same approach but have never faced this error.

The error goes off as soon as the line this.initConfig(config) is commented. But if we comment this line then how will the new properties defined in config be initialized?

Could someone guide at this?

Thanks in advance.

mitchellsimoens
17 Apr 2012, 7:58 AM
What version are you using? I am doing this test case and everything is working for me in 4.1.0 RC3 and 4.0.7:


Ext.define('Ext.pnc.Grid',{
extend: 'Ext.grid.Panel',
alias: 'widget.pncgrid',
config:{
showCountColumn:true//a new property added
},
constructor:function(config){
this.initConfig(config);
this.callParent(arguments);
}
});

Ext.application({
name : 'Test',

launch : function() {

var grid = new Ext.pnc.Grid({
renderTo : document.body,
columns : [
{
header : 'test',
dataIndex : 'test'
}
],
store : new Ext.data.Store({
fields : ['test'],
data : [
{ test : 'Hello' }
]
})
});

console.log(grid.getShowCountColumn()); //true as expected

}
});

netemp
17 Apr 2012, 8:06 AM
This truly is a sweet surprise. I am using ExtJs 4.0.7 and when I run your example then things work all fine.

But here is a grid code which I have picked from the examples, when I use this, then I get the error mentioned above.

Could you guide that what could be the reason behind this?



Ext.onReady(function () {

var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];


// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}, {
name: 'change',
type: 'float'
}, {
name: 'pctChange',
type: 'float'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'n/j h:ia'
}],
data: myData
});


// create the Grid
var grid = Ext.create('Ext.pnc.Grid', {
store: store,
columnLines: true,
autoScroll:true,
height:600,
width:900,
renderTo:Ext.getBody(),
title: 'Locking Grid Column',
columns: [{
text: 'Company Name',
//locked: true,
width:250,
sortable: false,
dataIndex: 'company'
}, {
text: 'Price',
width: 150,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
}, {
text: 'Change',
width: 150,
sortable: true,
dataIndex: 'change'
}, {
text: '% Change',
width: 150,
sortable: true,
dataIndex: 'pctChange'
}, {
text: 'Last Updated',
width: 150,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}]
});
});

netemp
17 Apr 2012, 8:19 AM
I checked the things further, and found out that if we use - columnLines: true in the new instance then we get the error - me.additionalCls is undefined

and also, if we use title:'Locking Grid' then we get the error - me.dockedItems is undefined

I have added both these to your code below. Could you please run it and check if you are getting the same?



Ext.define('Ext.pnc.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.pncgrid',
config: {
showCountColumn: true //a new property added
},
constructor: function (config) {
this.initConfig(config);
this.callParent(arguments);
}
});




Ext.application({
name: 'Test',




launch: function () {




var grid = new Ext.pnc.Grid({
renderTo: document.body,
columnLines: true,
title: 'Locking Grid',
columns: [{
header: 'test',
dataIndex: 'test'
}],
store: new Ext.data.Store({
fields: ['test'],
data: [{
test: 'Hello'
}]
})
});


console.log(grid.getShowCountColumn()); //true as expected


}
});


Looks like this is a bug.

Any thoughts?

Thanks in advance.

mitchellsimoens
17 Apr 2012, 8:21 AM
The whole config object and initConfig was never fully flushed out and used by the framework. I think this is a case where there is a bug but since we don't have the config system full working it was never caught.

The columnLines config is what is tripping it up. Ext.grid.Panel has gone under a lot of changes in 4.1.0 so this looks to be fixed in 4.1.0 RC3 and I would recommend trying to update to 4.1.0 RC3 but here is an override that is working for me in 4.0.7:


Ext.define('Override.grid.Panel', {
override : 'Ext.grid.Panel',

setColumnLines: function(show) {
var me = this,
method = (show) ? 'addClsWithUI' : 'removeClsWithUI';

me[method]('with-col-lines', true);
}
});

netemp
17 Apr 2012, 8:27 AM
Thanks for the post Mitchell.

There seems to be an issue with the title property too, as its leading to the error of dockedItems as reported above.

As a workaround, if we remove the initConfig statment, could you please guide that other then accessor methods not defined for the newly created properties, would there be any other loss too?

mitchellsimoens
17 Apr 2012, 8:33 AM
All the config object does is create the get and set methods so you don't have to use it.


Ext.define('Ext.pnc.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.pncgrid',

showCountColumn: true, //a new property added

getShowCountColumn : function() {
return this.showCountColumn;
},

setShowCountColumn : function(value) {
var me = this,
oldValue = me.getShowCountColumn();

if (me.applyShowCountColumn) {
value = me.applyShowCountColumn(value, oldValue);
}

if (!Ext.isDefined(value)) {
return;
}

this.showCountColumn = value;

if (me.updateShowCountColumn) {
this.updateShowCountColumn(value, oldValue);
}
}
});

That would do the same thing just without calling initConfig and you get the get and set and the set method takes advantage of the apply and update methods just like initConfig does.

netemp
17 Apr 2012, 9:42 PM
That is great help Mitchell.

Thanks for all your time.