我们如何在ext js 4.2中突出显示gridpanel的行和列？

Question

当我们选择它时，我们如何突出显示网格面板当前行和列？ 我能够突出显示行而不是列。

我正在使用Extjs 4.2

Answer 1

我做了一个完全符合你要求的例子。请查看以下小提琴。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; 
            }