how can we highlight the row and column of the gridpanel in ext js 4.2?

Question

How can we highlight the grid panel current row and column when we select it? I am able to highlight the row but not column.

I am using Extjs 4.2

Answer 1

I have done an example which exactly fits to your requirement .Check in below fiddle.Running Example

                        Ext.onReady(function(){

                        var store = Ext.create('Ext.data.ArrayStore', {
                        fields: [ 'price', 'change','location'],
                        data: [
                        [ 0, 0,'x'],
                        [ 2, 3,'y'],
                        [ 0, 1,'z'],
                        [ 2, 3,'p'],
                        [ 5, 6,'q'],
                        [ 0,0,'s']
                        ]
                        });

                        var grid = Ext.create('Ext.grid.Panel', {
                        title: 'Array Grid',
                        store: store,
                        cls:'custom-grid',
                        listeners:{
                            cellclick:function( thiss, td, cellIndex, record, tr, rowIndex, e, eOpts ){
                            //Removing previous selected column highlighted color
                             var gridCoulumnlength=grid.columns.length;
                                for(var i=0;i<gridCoulumnlength;i++){
                                    if(grid.columns[i].tdCls=="custom-column")
                                        grid.columns[i].tdCls="";
                                }
                               // adding color to columns
                                grid.columns[cellIndex].tdCls="custom-column";
                                grid.getView().refresh();
                            }

                        }, 
                        columns: [
                            {text: 'Price', width: 75, dataIndex: 'price'},
                        {text: 'Change', width: 75, dataIndex: 'change'},
                        {text: 'Location', width: 75, dataIndex: 'location'}
                        ],
                        height: 200,
                        width: 200,
                        renderTo: Ext.getBody()
                        });

                        });

CSS:

            .custom-grid .x-grid-row-selected .x-grid-cell { 
                background-color: #ff0 !important; 
                border-bottom-color: #999; 
                border-bottom-style: solid; 
                border-top-color: #999; 
                border-top-style: solid; 
            }

            .x-grid-row .custom-column { 
                background-color: #ecf; 
                color: #090; 
                font-weight: bold; 
            }