如何在ext js4.2中突出显示网格面板的行和列？

Question

在选择网格面板时，如何突出显示当前的行和列？我能够突出显示这一行，但不能突出列。

我正在使用Extjs4.2

Answer 1

我已经做了一个完全符合您的需求的例子，.Check在下面.运行示例。

                        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; 
            }