PDA

View Full Version : autoSize()-ing grid columns after a reconfigure()



Pacos
24 Jan 2014, 8:53 AM
Hi,

In my little app using ExtJS 4.2.1, I create a gridPanel, with an initial set of columns. Then I reconfigure the grid with a new set of columns. Then I want to autoSize() the columns, so that the width of each column fits its content.

So I monitor the "reconfigure" event of my grid, and executes this function when the event is fired :


onReconf: function(grid, store, columns) {
Ext.each(columns, function(column) {
column.autoSize();
});

}

Except I get the following error on "column.autoSize()" :

Uncaught TypeError: Cannot call method 'getWidth' of undefined

I put some breakpoints, console-logged the value of each column, and indeed they don't appear to have a getWidth() method, which would be called by the autoSize() method.

I'm a little lost here, and I would appreciate any help, pointers, advices. I will provide any needed information.

Thanks !

scottmartin
25 Jan 2014, 2:57 PM
See if the following works for you:



Ext.onReady(function(){

var store = Ext.create('Ext.data.Store', {
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : '[email protected]', 'change' : 100 },
{ 'name' : 'Bart', 'email' : '[email protected]', 'change' : -20 },
{ 'name' : 'Homer', 'email' : '[email protected]', 'change' : 23 },
{ 'name' : 'Marge', 'email' : '[email protected]', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var columns = [
{ header : 'Name', dataIndex : 'name' },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change' }
];

var columnsNew = [
{ header : 'Name', dataIndex : 'name' },
{ header : 'Email', dataIndex : 'email', autoSizeColumn: true }
];

var columnsHidden = [
{ header : 'Name', dataIndex : 'name', hidden: true },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change' }
];

var grid = Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : store,
columns : columns,
height : 200,
width : 400,
renderTo : Ext.getBody()
});

setTimeout(function(){
grid.reconfigure(store,columnsNew);
columns = grid.columnManager.getColumns();
grid.getView().autoSizeColumn(columns[1]); // expandToFit() for 4.1.x

}, 2000);

});

Pacos
29 Jan 2014, 11:29 PM
Thanks for your answer. Your example works perfectly. Sadly, I still don't know why it doesn't work in my case. Do you have any pointers ?

The error is thrown on this line of ext-all-debug.js, because this.el is undefined :


getWidth : function() {
return this.el.getWidth();
},

And here is the stack trace :

Uncaught TypeError: Cannot call method 'getWidth' of undefined ext-all-debug.js:31468
(http://localhost:8080/xActiviteTDB/js/ext/ext-all-debug.js)Ext.define.getWidth ext-all-debug.js:31468
(http://localhost:8080/xActiviteTDB/js/ext/ext-all-debug.js)Ext.define.getMaxContentWidth ext-all-debug.js:106038
(http://localhost:8080/xActiviteTDB/js/ext/ext-all-debug.js)Ext.define.autoSizeColumn ext-all-debug.js:106030 (http://localhost:8080/xActiviteTDB/js/ext/ext-all-debug.js)

Pacos
30 Jan 2014, 12:39 AM
Ok, I found the error. "this.el" was undefined because the grid was not rendered yet. I show the grid only after having reconfigured it, and obviously I was resizing the columns before showing the grid. So basically the error is as dumb as me :)

Many thanks for the help though, that really helped me refocus and point the mistake !