auutoResize() after grid or window resize

[gioindo]

I set "autoSizeColumns: true" on a grid, but the columns only auto size when the grid first loads. If the window is resized or if the grid itself is resized, the columns do not automatically resize themselves accordingly. Is there an easy way to do this?

[jack.slocum]

autoSizeColumns only sizes on load (as you have said). Personally I would recommend using autoExpandColumn vs autoSizeColumns as it is much faster. There are few people who have posted threads on how they have used grid.view.fitColumns()/autoSizeColumns() successfully when window/layout resizes happen. Maybe one of them can chime in with their solution.

[gioindo]

this.layout = Ext.BorderLayout.create({
monitorWindowResize: true,
north: {
titlebar: false,
collapsible: false,
animate: true,
split:false,
initialSize:30
},
south: {
title: 'Details',
titlebar: true,
collapsible: true,
animate: true,
split:true,
initialSize:200,
tabPosition: 'bottom',
alwaysShowTabs: true,
closeOnTab: true,
hideWhenEmpty: true
},
east: {
title: 'Details',
titlebar: true,
collapsible: true,
animate: true,
split:true,
initialSize:400,
tabPosition: 'bottom',
alwaysShowTabs: true,
closeOnTab: true,
hideWhenEmpty: true
},
center: {
title: 'Center Title',
titlebar: false,
closeOnTab: true
}
});
this.layout.on('layout', alert('hi'));
this.layout.beginUpdate();
this.layout.add('north', panelToolbar);
this.layout.add('center', panelGrid);
this.layout.endUpdate()


When I resize the browser window, I get an error: l.fireFn has no properties

any ideas?

[jack.slocum]

That means your event listener is not a function. Looking at your code you have:

this.layout.on('layout', alert('hi'));

That is executing the alert immediately. To assign an event handler you have to pass a function, not the result of executing a function. Make sense?

You can either pass an existing function or create an anonymous one:


this.layout.on('layout', function(){
alert('hi');
});

[gioindo]

Thank You!