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

ExtJs Tooltip

Tooltip in ExtJs - There are various ways to get tooltip in ExtJs, we will explore different options in below list.

1. Tooltip in Grid header -

new Ext.grid.GridPanel({

        store: store,

        columns: [

                       {

                           id       :'company',

                           header   : 'Company',

                           tooltip  : 'Company Name', 

                        width    : 160, 

                        sortable : true, 

                        dataIndex: 'company'

                    },….

            ]

            })

2. Get Tooltip on all the grid options – You need to use metadata attribute to set the tooltip on the grid items. Consider below example where pctChange is renderer on grid column.

    function pctChange(val, metadata) {

            metadata.attr = String.format('{0}title="{1}"', metadata.attr, val);

    }

3.  Tooltip on other form items –

 {

    xtype           :   'textfield',

    fieldLabel   :    “<span ex:qtip=’Please Contact admin for more info.’>Comments</span>”,

    ref               :    'comtext'

 }

if you want html behavior on the tooltip, you can provide tags in span –

{

   xtype           :   'textfield',

   fieldLabel   :    “<span ex:qtip=’<b>Please Contact admin for more info.</b><br>admin@test.com’>Comments</span>”,

   ref               :    'comtext'

}

4. Other common and most asked place for tooltip is on drop down/combo, which is tough to achieve as there is no default way to get it, you have to use various tricks to get it...coming soon…

Feel free to drop comments, questions!