1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    36
    Vote Rating
    0
    TheRebelGriz is on a distinguished road

      0  

    Default Grid autoSizeColumns: How To

    Grid autoSizeColumns: How To


    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):
    Code:
    ...
                            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):
    Code:
        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:

    Code:
            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

  2. #2
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    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.

    Code:
    this.MembersGrid.store.on('load', function(){
        this.MembersGrid.getView().autoExpand();
    }, this);

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,306
    Vote Rating
    125
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Is there any reason you are doing this with events rather than the Grid configuration autoExpandColumn or the GridView's viewConfig configuration forceFit: true?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 2