文章/答案/技术大牛

发布

社区首页 >问答首页 >Extjs自定义TreeGrid行CSS

问Extjs自定义TreeGrid行CSS
EN

Stack Overflow用户

提问于 2012-07-10 18:46:00

回答 2查看 2K关注 0票数 2

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

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

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

我正在考虑使用"getRowClass“方法编写一个函数来手动更新row类。我想知道有没有更干净的方法。

extjs

extjs4

extjs4.1

回答 2

Stack Overflow用户

发布于 2014-05-15 04:33:32

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

票数 4

Stack Overflow用户

发布于 2012-07-11 09:15:01

我在模型上使用了iconCls属性来通过图标来区分行。这有一个额外的好处，不仅可以分离父/子行，还可以分离子行本身。

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

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

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

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

希望这能有所帮助。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11411656

复制

相似问题

问Extjs自定义TreeGrid行CSS
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Extjs自定义TreeGrid行CSSEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Extjs自定义TreeGrid行CSS
EN