Extjs Custom TreeGrid Row CSS

问题

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.

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/11411656/extjs-custom-treegrid-row-css