Extjs 自定义 TreeGrid 行 CSS答案

【问题标题】：Extjs Custom TreeGrid Row CSSExtjs 自定义 TreeGrid 行 CSS
【发布时间】：2012-07-10 10:45:59
【问题描述】：

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

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

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

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

【问题讨论】：

相信我，这个问题的解决方案可能比您想要处理的要复杂得多。如果您的要求允许，在 DmitryB 的示例中使用图像是最佳选择。
如果您真的需要，我可以提供解决方案。
图标无法满足我当前的要求。如果你已经有一个可行的例子，我很乐意看到它！
我把它挖出来贴出来，可能有点。

标签： extjs extjs4 extjs4.1

【解决方案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;
}
...

找到解决方案here

【讨论】：

【解决方案2】：

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

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

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

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

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

希望这会有所帮助。

【讨论】：