Extjs自定义TreeGrid行CSS

问题描述：

有没有办法在树网格的子级别上应用替代行CSS？Extjs自定义TreeGrid行CSS

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

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

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

相信我，解决这个可能是方式更复杂你想要处理。如果你的要求允许，在DmitryB的例子中使用图像是最好的选择。 – Reimius 2012-07-12 21:48:20

我可以提供解决方案来做到这一点，虽然如果你真的需要它。 – Reimius 2012-07-13 14:55:59

图标不符合我目前的要求。如果你已经有一个工作的例子，我很乐意看到它！ – Babyangel 2012-07-13 16:07:58

答

我在模型上使用了iconCls属性来通过图标区分行。这不仅有助于分离父/子行，而且还有子行本身。

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

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

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

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

希望这有助于。

答

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

Extjs自定义TreeGrid行CSS

相关推荐