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

ahy6op9u  于 6个月前  发布在  其他
关注(0)|答案(5)|浏览(93)

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

sq1bmfud

sq1bmfud1#

方法是在网格上定义viewConfig

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

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

    ...
});

字符串

zte4gxcn

zte4gxcn2#

Ext.grid.PanelinitComponent()中,使用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';
            }
        };
    }

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

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

lnvxswe2

lnvxswe23#

你可以这样做:

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

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

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


GridView还有一个私有方法addRowClass。你也可以使用它来添加一个类到你的行中,方法是:
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);
    }
},

mkshixfv

mkshixfv4#

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

qoefvg9y

qoefvg9y5#

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

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

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

相关问题