View Full Version : Grid autoSizeColumns: How To

4 May 2010, 1:09 PM
Using the generated files and utilizing the autoRef property,
I want to fire the autoSizeColumns() function after the store for a grid is loaded.

The following code snippet was generated from a Designer Project (File: AdminPanel.ui.js):

items: [
xtype: 'grid',
title: '',
store: 'dsMemberStore',
enableColumnHide: true,
enableColumnMove: true,
columnLines: true,
loadMask: true,
id: 'gMember',
ref: '../../MembersGrid',
columns: [
xtype: 'gridcolumn',
header: 'First Name',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'first_name'

In the generated File ( AdminPanel.js ), I inserted the following code in the initComponent function (in Bold):

initComponent: function() {

this.MembersGrid.store.on('load', function (){this.MembersGrid.autoSizeColumns(); });
//this.MembersGrid.store.on('load', function (){this.MembersGrid.getView().autoSizeColumns(); });


I do know the following works:

this.MembersGrid.store.on('load', function (){alert('store loaded...'); });

I've tried several variations but I keep getting JavaScript errors: this.MembersGrid is undefined ...
I think I am running into a scope issue...

Any assistance is greatly appreciated!


5 May 2010, 7:17 AM
Hi. If you add a third parameter to the 'on' call to specify the scope, then referencing 'this.MembersGrid' will work as expected. You can also use the autoExpand() method on the GridView.

this.MembersGrid.store.on('load', function(){
}, this);

5 May 2010, 7:46 AM
Is there any reason you are doing this with events rather than the Grid configuration autoExpandColumn or the GridView's viewConfig configuration forceFit: true?