PDA

View Full Version : Grid autoSizeColumns: How To



TheRebelGriz
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() {
AdminPanel.superclass.initComponent.call(this);

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!

Thanks

jarrednicholls
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.MembersGrid.getView().autoExpand();
}, this);

aconran
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?