Grid autoSizeColumns: How To

[TheRebelGriz]

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]

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]

Is there any reason you are doing this with events rather than the Grid configuration autoExpandColumn or the GridView's viewConfig configuration forceFit: true?