在ExtJS中，如何將自定義CSS類添加到數據網格行？

如何將自定義CSS類添加到數據網格中的行（Ext.grid.Panel）？在ExtJS中，如何將自定義CSS類添加到數據網格行？

我正在使用ExtJS 4.0。通過所有的行

Ext.fly(myGrid.getView().getRow(0)).addClass('myClass');

你當然可以替代getRow()呼叫另一小區，或者你可以循環，並適當添加：

來源

2011-10-03 Erik Allik

你也可以看看這個問題： http://stackoverflow.com/questions/7471223/extjs-4-cell-renderer-problem/7476057#7476057 –

這樣做是對電網定義viewConfig方式：

Ext.create('Ext.grid.Panel', { 
    ... 

    viewConfig: { 
     getRowClass: function(record, index, rowParams, store) { 
      return record.get('someattr') === 'somevalue') ? 'someclass' : ''; 
     } 
    }, 

    ... 
});

來源

2011-10-04 16:55:34

請參閱以下文檔：http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.view。Table-method-getRowClass –

你可以做這樣的事情。

然後你可以風格，除了默認的CSS，這樣做：

.x-grid3-row-selected .myClass { 
    background-color: blue !important; 
}

還有一個名爲addRowClass的GridView的私有方法。您可以通過執行使用這個類添加到您的行，以及：

grid.getView().addRowClass(rowId, 'myClass');

// private - use getRowClass to apply custom row classes 
addRowClass : function(rowId, cls) { 
    var row = this.getRow(rowId); 
    if (row) { 
     this.fly(row).addClass(cls); 
    } 
},

來源

2011-10-03 17:10:00 dmackerman

在你的Ext.grid.Panel使用getRowClass()的initComponent()如下：

initComponent: function(){ 
     var me = this; 
     me.callParent(arguments); 
     me.getView().getRowClass = function(record, rowIndex, rowParams, store) { 
      if (/* some check here based on the input */) { 
       return 'myRowClass'; 
      } 
     }; 
    }

這基本上覆蓋getRowClass()底層Ext.grid.View的函數在渲染時被調用以應用任何自定義類。然後，您的自定義CSS文件將包含類似：

.myRowClass .x-grid-cell {background:#FF0000; }

來源

2011-10-03 17:29:05 LittleTreeX

這當然是推薦的方式來做事情和根據示例，允許根據記錄的值有條件地應用類，這是getRowClass覆蓋的常用用法。 – dougajmcdonald

另外，我發現在網格的viewConfig配置中定義'getRowClass'並不需要使用'initComponent'的命令方法:) –

這不是推薦的方法，請使用viewConfig，請參閱第一個答案。 –

用最簡單的方式

在網格使用 -

cls：'myRowClass'

您的css -

.myRowClass .x-grid-cell {background：＃FF0000！important; }

來源

2013-05-20 08:32:08 Kanchan

這絕對不是被問到的。 –

如果你想更改類的數據加載之後，你可以做這樣的：

myGridPanel.getView().removeRowCls(rowIndex,"old class"); 
myGridPanel.getView().addRowCls(rowIndex,"new class");

這裏和rowIndex是選定行，你可以在某些事件的功能得到（如「選擇」）。通過使用它，您可以在點擊它之後更改該行的CSS。

來源

2014-11-11 17:23:23

在ExtJS中，如何將自定義CSS類添加到數據網格行？

回答

相關問題