我们如何在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; 
      }