ExtJs Hierarchical Grid Alignment Issue in child grid

If you are using ExtJS 3.X and rowexpander plugin you will see that in the child grid alignment of the columns will be messed up compared to header in the child grid.

THAT IS BUG IN EXTJS ON COMPUTING WIDTH OF CHILD GRID COLUMN HEADER!

The root cause for this issue is while calculating the width of columns (compared to header) Ext code is not computing it correctly. To avoid this mismatch between header columns and data columns follow below instruction.

Lets say below is rowexpander implementation for hierarchical grid -

new Ext.grid.RowExpander({

 exapndOnEnter: false,

 expandOnDblClick: false,

 tpl: '<div class='x-sample-rowexpander"></div>',

 listeners:{

         scope: this,

         expand: function(…){

                 ……..

         },

         collapse: function(…){

                ............

        }

})

based on grid config's width, put override as listed below for class specified in rowexpander div -

.x-sample-rowexpander .x-panel-bwrap .x-panel-body .x-grid3 .x-grid3-viewport .x-grid3-scroller .x-grid3-body .x-grid3-row table.x-grid3-row-table {

    width:1175px !important;

}

.x-sample-rowexpander .x-panel-bwrap .x-panel-body .x-grid3 .x-grid3-viewport .x-grid3-scroller .x-grid3-body .x-grid3-row{

    width:1175px !important;

}

Here 1175px is for my grid's implementation, you will need to calculate your grid's column width and try above override. Feel free to drop better suggestion :)