extjs - Extjs 自定义 TreeGrid 行 CSS

Question

有没有办法在树网格的子级别上应用替代行 css？

目前treePanel viewConfig 上的stripeRows 配置只是使所有内容变为灰色和白色，但很难区分子行和父行。

理想情况下，我想让父对象以一种方式交替颜色，而子行以另一种方式交替颜色。

我正在考虑使用“getRowClass”方法编写一个函数来手动更新行类。我想知道是否有更清洁的方法。

Answer 1

getRowClass 看起来很适合执行行属性更改。您可以使用 getDepth() 函数获取节点的深度：

var grid = Ext.create ('Ext.tree.Panel', {
    xtype: 'tree-grid',
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store) {
            return 'node-depth-' + record.getDepth()
        }
    }
...

并使用 css：

.node-dept-1 .x-grid-cell { 
    background-color: white; 
}
.node-depth-2 .x-grid-cell { 
    background-color: #dddddd;
}
...

在这里找到的解决方案

Answer 2

我在模型上使用 iconCls 属性通过图标区分行。这不仅具有分离父/子行而且还分离子行本身的额外好处。

我使用模型映射技巧为我提供了不同的行类型值，如下所示：

{name:'iconCls', mapping:'type.name'} 

然后还添加了一个 css 类来支持不同的类型名称：

.cables, .Cable {
    background-image: url(../images/silk/cables.jpg) !important;
}

希望这可以帮助。