Extjs Custom TreeGrid Row CSS

2
votes

Is there a way to apply Alternative row css on the child level of a tree grid?

Currently the stripeRows config on the treePanel viewConfig just makes everything grey and white, but it is difficult to distinguish the child rows from the parent rows.

Ideally I'd like to make the parent objects alternate colors one way and the child rows alternate colors another way.

I was thinking of writing a function using the "getRowClass" method to manually update the row class. I was wondering if there was a cleaner way.

2
extjsextjs4extjs4.1
Believe me, the solution to this is probably way more complicated that you want to deal with. Using images in DmitryB's example is the best choice if your requirements allow. – Reimius
I can provide a solution to do this though if you really need it. – Reimius
Icons wont work with my current requirements. If you've already got a working example i'd love to see it! – Babyangel
I'll dig it out and post it, might be a bit. – Reimius

2 Answers

4
votes

The getRowClass looks good to perform row attributes change. You can get a node's depth with the getDepth() function:

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

And use the css:

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

Solution found here

0
votes

I used iconCls property on the model to distinguish rows through an icon. This has an added benefit of not only seprating parent/child rows but also child rows themselves.

I used a model mapping trick to give me distinct row type values like this:

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

and then also added a css class to support different type names:

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

hope this helps.