在ExtJS中,如何将自定义CSS类添加到数据网格行?

ahy6op9u  于 2024-01-07  发布在  其他
关注(0)|答案(5)|浏览(206)

如何将自定义CSS类添加到数据网格(Ext.grid.Panel)中的行?
我用的是ExtJS 4.0。

sq1bmfud

sq1bmfud1#

方法是在网格上定义viewConfig

  1. Ext.create('Ext.grid.Panel', {
  2. ...
  3. viewConfig: {
  4. getRowClass: function(record, index, rowParams, store) {
  5. return record.get('someattr') === 'somevalue' ? 'someclass' : '';
  6. }
  7. },
  8. ...
  9. });

字符串

zte4gxcn

zte4gxcn2#

Ext.grid.PanelinitComponent()中,使用getRowClass(),如下所示:

  1. initComponent: function(){
  2. var me = this;
  3. me.callParent(arguments);
  4. me.getView().getRowClass = function(record, rowIndex, rowParams, store) {
  5. if (/* some check here based on the input */) {
  6. return 'myRowClass';
  7. }
  8. };
  9. }

字符串
这基本上覆盖了底层Ext.grid.ViewgetRowClass()函数,该函数在渲染时被调用以应用任何自定义类。然后您的自定义css文件将包含如下内容:

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

展开查看全部
lnvxswe2

lnvxswe23#

你可以这样做:

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

字符串
当然,您可以将getRow()调用替换为另一个单元格,或者您可以循环遍历所有行并适当地添加它。
然后,除了默认的CSS之外,您还可以通过执行以下操作来设置样式:

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


GridView还有一个私有方法addRowClass。你也可以使用它来添加一个类到你的行中,方法是:
grid.getView().addRowClass(rowId, 'myClass');

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

展开查看全部
mkshixfv

mkshixfv4#

用最简单的方法
在你的网格使用中-
cls:'myRowClass'
你的css -
.myRowClass .x-grid-cell {background:#FF0000!important; }

qoefvg9y

qoefvg9y5#

如果你想在数据加载后更改类,你可以这样做:

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

字符串
在这里,rowIndex是选中的行,你可以在一些事件函数(如“select”)中获得。通过使用它,你可以在点击它后更改行的CSS。

相关问题