关于javascript：EXTJS 5树状网格自定义行CSS

 2021-04-09 

EXTJS 5 Tree grid custom row css

我有一个树状网格，我想更改父行和子行的css(以我的情况为背景色)。
我做了一些css类并使用了viewConfig.getRowClass方法，但不适用于悬停和选择。

这是我问题的小提琴：https://fiddle.sencha.com/#fiddle/jl1

这是我的树形网格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var tree = Ext.create('Ext.tree.Panel', {
    renderTo: Ext.getBody(),
    title: 'TreeGrid',
    rootVisible: false,
    width: 300,
    height: 250,
    store: store,

    viewConfig: {
        getRowClass: function(record, index) {
            if (record.get('name').indexOf('Group') != -1) {
                return 'row-parent';
            }
            return 'row-child';
        }
    },

    columns: [{
        xtype: 'treecolumn',
        text: 'Name',
        dataIndex: 'name',
        width: 150
    }, {
        text: 'Description',
        dataIndex: 'description',        
        width: 150
    }]
});

这是我的CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.row-parent .x-grid-cell {    
    background-color: #c1ddf1 !important;
}
.row-parent .x-grid-row-over .x-grid-cell {
    background-color: #3da5f5 !important;
}
.row-parent .x-grid-row-selected .x-grid-cell {
    background-color: #ff0 !important;
}

.row-child .x-grid-cell {
    background-color: #e2eff8 !important;
}
.row-child .x-grid-row-over .x-grid-cell {
    background-color: #85c4f5 !important;
}
.row-child .x-grid-row-selected .x-grid-cell {
    background-color: #ff0 !important;
}

您知道为什么选择和悬浮css无法正常工作吗？

预先感谢=)！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.row-parent .x-grid-cell {
    background-color: #c1ddf1 !important;
}
.x-grid-item-over .row-parent  .x-grid-cell {
    background-color: #3da5f5 !important;
}
.x-grid-item-selected .row-parent .x-grid-cell {
    background-color: #ff0 !important;
}

.row-child .x-grid-cell {
    background-color: #e2eff8 !important;
}
.x-grid-item-over .row-child .x-grid-cell {
    background-color: #85c4f5 !important;
}
.x-grid-item-selected .row-child .x-grid-cell {
    background-color: #ff0 !important;
}