ExtJS的自定义的TreeGrid行CSS(Extjs Custom TreeGrid Row C

有没有一棵树网格的子级应用替代行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财产通过图标来区分行。 这不仅具有seprating父/子行，但也子行自己一个额外的好处。

我用了一个模型映射把戏给我不同的行类型的值是这样的：

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

然后还增加了一个CSS类，以支持不同类型的名称：

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

希望这可以帮助。

文章来源: Extjs Custom TreeGrid Row CSS