CODEWITHSUNDEEP
model-view-controllerextjstree
Vasiliy Faronov
Vasiliy Faronov

Reputation: 12310

How to customize Ext JS tree nodes properly?

Ext JS 4. I have a tree.Panel where I want to display custom HTML in each node, generated from that node’s model data. I can do this by setting the node’s text when loading the store, but it is not the model’s job to do markup. So I created a custom Column that renders my HTML.

My problem is: unless I derive from Ext.tree.Column, it doesn’t show up properly (no outline, plus/minus icons etc.). If I do, everything is fine, but Ext.tree.Column is marked as private to Ext JS.

Is there some officially supported API to do what I want?

Upvotes: 2

Views: 5376

Answers (2)

Murrah
Murrah

Reputation: 1690

Thanks for your answer above. Here is another example showing a few more options for formatting:

columns: [{
    xtype: 'treecolumn',
    dataIndex: 'text',
    flex: 1,
    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
        // see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Column-cfg-renderer
        var tooltipString = "Hello";
        metaData.tdAttr = 'data-qtip="' + tooltipString + '"';
        return Ext.String.format('{0} <span style="color:red;">{1}</span>', value, record.data.personname);
    }
}]

You might also want to add 

hideHeaders : true,

to your tree panel config to remove the "grid" header that appears as a result of using a treecolumn.

Murray

Upvotes: 2

Chao
Chao

Reputation: 1058

I have written a blog post about how to customize ExtJS 4 tree panel, I hope it will help: http://hardtouse.com/blog/?p=24

The idea is to use renderer combined with A LOT OF css magic: 

columns : [{
    xtype : 'treecolumn',
    dataIndex : 'name',
    renderer : function(value, record){
        return Ext.String.format('<div class="tree-font">{0}</div>', value);
    }]

Upvotes: 5

Related Questions