initialConfig in Grid issues

Question

In my Grids I am setting the initialConfig.columns value to the Grids columns property.This is so that I can reset the tables column order, width etc. when I click on a 'Reset' button I have in all my toolbars.

I also have a kind of utility method called gridUtils.createClsValues which adds cls values onto my columns (the rest of my initComponent method I have ommitted).

initComponent: function () {

    //create class values on column values for test-automation
    gridUtils.createClsValues(this.columns, this.iLeanPrefix + '.' + this.tableId);

    this.initialConfig.columns = this.columns;

    //the rest ommitted
}

The code behind the 'Reset' button looks like this :

                ,fn: function (response) {
                    if (response == 'yes') {

                         // clear the state management for the grid
                        Ext.state.Manager.clear(grid.stateId);

                        //get default cols
                        var cols = grid.initialConfig.columns;

                        Util.logInfo('class value : ' + cols[0].cls + ' tableId : ' + grid.tableId + ' grid.columns ' + grid.columns[0].cls);

                        //cols = "portlet.packageList.packageListTable.PackageForOutletTable.id"


                        // repaint the grid using the hardcoded defaults
                        grid.reconfigure(grid.getStore(), cols);

                        //reset the filtering on the data
                        grid.store.clearFilter();

                        //reset the visual elements in the header
                        grid.filters.clearFilters();

                        grid.view.refresh();
                    }
                }

The code is effectevily getting the columns from the initialConfig, and resetting the columns by calling grid.reconfigure(..) which resets things nicely.

Things have been going wonderfully with this feature :) ...BUT a problem exists that our test-automation team picked up on. After clicking on the reset button, all the cls values are the same as the last created grid instance, which leads me to believe that somehow the initialConfig is more of a global object.

I have trapped the bug in this JSFiddle :

http://jsfiddle.net/GQULg/4/

You can see that if you click on the 'Reset' button in the second tab, everything matches : The column and the initialConfig.column have the same value. But if you click in the first tab, the cls value of the columns in the initialConfig are different to the cls values of the grids column objects.

Question is what to do about this. Is the initialConfig object, and object that is common to all instances of a grid type? And how do I solve my problem?

Answer 1

The problem is not that your initialConfig object is common, but that the columns array is common. You define your columns as part of the base object. Each myGrid that is created uses the same array during its initComponent.

In your fiddle, look at the result of this after creating your two myGrid components:

v1.initialConfig.columns === v2.initialConfig.columns

Here are two solutions to your problem:

1. define your columns inside the initComponent function. This will ensure that a separate columns array is created for each component (http://jsfiddle.net/GQULg/5/).

   initComponent: function () {
       this.columns = [{
           dataIndex: 'id',
           text: 'ID'
       }, {
           dataIndex: 'name',
           text: 'Name',
           filter: {
               type: 'string'
           }
       }];
   
       //...the rest
   }
   

2. define your columns when you create the myGrid components. To reduce code duplication, you could write a function that returns an identical (but not equal) instance of the columns array (http://jsfiddle.net/GQULg/6/)

   /**
    * Define Columns
    */
   function getColumnCfg() {
       return [{
           dataIndex: 'id',
           text: 'ID'
       }, {
           dataIndex: 'name',
           text: 'Name',
           filter: {
               type: 'string'
           }
       }];
   }
   
   var v1 = Ext.create('myGrid', {
           myGridId: 'myGrid1',
           columns: getColumnCfg() 
       }
   );
   
   var v2 = Ext.create('myGrid', {
           myGridId: 'myGrid2',
           columns: getColumnCfg() 
       }
   );