Extjs3 给表格的行和列设置颜色

最新推荐文章于 2023-06-01 16:03:49 发布

原创最新推荐文章于 2023-06-01 16:03:49 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Extjs3

ExtJS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用JavaScript为ExtJS表格中的行与单元格设置颜色，包括通过配置项设置整行的颜色以及如何单独设置特定单元格的颜色。

给表格的列设置颜色的代码:

                    viewConfig : {
                        forceFit : true,
                        enableRowBody : true,
                        getRowClass : function(record, rowIndex, p, ds) {
                            var cls = 'white-row';
                            switch (record.data.color) {
                                case '#FBF8BF' :
                                    cls = 'yellow-row';
                                    break;
                                case '#99CC99' :
                                    cls = 'green-row';
                                    break;
                                case '#F5C0C0' :
                                    cls = 'red-row';
                                    break;
                            }
                            return cls;
                        }
                    }

给表格的列设置颜色的代码:

                function renderMotif(data, cell, record, rowIndex, columnIndex, store) {
                    var value = record.get('color');
                    //cell.css = "UnStyleCss";
                    cell.attr = "style=background-color:" + value;
                    return data;
                }

                var cm = new Ext.grid.ColumnModel([{
                    header : 'name',
                    dataIndex : 'name'
                }, {
                    header : 'sex',
                    dataInex : 'sex'
                }, {
                    header : 'color',
                    dataIndex : 'color',
                    renderer : renderMotif
                }]);

只修改表格的某一行的样式,可以用下面的方式来实现:

grid.getView().addRowClass(r,css)

修改表格的某一个单元格的样式,可以用下面的方式来实现:

Ext.get(grid.getView().getCell(r,c)).addClass(css)
或者
grid.getView().getRow(r).style.backgroundColor = "red"