Javascript 在 ExtJS 中，如何向数据网格行添加自定义 CSS 类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7637770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In ExtJS, how to add a custom CSS class to data grid rows?
提问by Erik Kaplun
How do I add custom CSS classes to rows in a data grid (Ext.grid.Panel)?
如何将自定义 CSS 类添加到数据网格 ( Ext.grid.Panel) 中的行？
I'm using ExtJS 4.0.
我正在使用 ExtJS 4.0。
回答by Erik Kaplun
The way to do it is to define viewConfigon the grid:
这样做的方法是viewConfig在网格上定义：
Ext.create('Ext.grid.Panel', {
...
viewConfig: {
getRowClass: function(record, index, rowParams, store) {
return record.get('someattr') === 'somevalue') ? 'someclass' : '';
}
},
...
});
回答by LittleTreeX
In your initComponent()of your Ext.grid.Paneluse getRowClass()as follows:
在您initComponent()的Ext.grid.Panel使用getRowClass()如下：
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';
}
};
}
This basically overrides the getRowClass()function of the underlying Ext.grid.Viewwhich is called at render time to apply any custom classes. Then your custom css file would contain something like:
这基本上覆盖了在渲染时调用getRowClass()的底层函数Ext.grid.View以应用任何自定义类。然后您的自定义 css 文件将包含以下内容：
.myRowClass .x-grid-cell {background:#FF0000; }
回答by dmackerman
You could do something like this:
你可以这样做：
Ext.fly(myGrid.getView().getRow(0)).addClass('myClass');
Of course you could substitute the getRow()call for another cell, or you could loop through all of your rows and add it appropriately.
当然，您可以将getRow()调用替换为另一个单元格，或者您可以遍历所有行并适当地添加它。
And then you could style that in addition to the default CSS, by doing:
然后，除了默认 CSS 之外，您还可以通过以下方式设置样式：
.x-grid3-row-selected .myClass {
background-color: blue !important;
}
There is also a private method of GridViewcalled addRowClass. You can use this to add a class to your rows as well by doing:
还有一个GridView叫做的私有方法addRowClass。您也可以通过执行以下操作来使用它向行添加类：
grid.getView().addRowClass(rowId, 'myClass');
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);
}
},
回答by Kanchan
Use simplest way
使用最简单的方法
In your grid use -
在您的网格中使用 -
cls: 'myRowClass'
cls: 'myRowClass'
Your css -
你的CSS -
.myRowClass .x-grid-cell {background:#FF0000 !important; }
.myRowClass .x-grid-cell {background:#FF0000 !important; }
回答by Reed Grey
If you want to change the class after the data has loaded, you can do it like this:
如果要在数据加载后更改类，可以这样做：
myGridPanel.getView().removeRowCls(rowIndex,"old class");
myGridPanel.getView().addRowCls(rowIndex,"new class");
Here, rowIndex is the selected row, which you can get in some event functions(like "select"). By using this, you can change CSS of the row after clicking it.
在这里，rowIndex 是被选中的行，你可以在一些事件函数（比如“select”）中得到它。通过使用它，您可以在单击后更改该行的 CSS。
