Extjs set icon of treenode in TreeStore

Question

I want to change icon of treenode of Tree Panel. I am able to do so when I append childNode dynamically. But how to set icon to treenode when we apply treestore through proxy directly to Treepanel view in initComponent().

TreePanelView.js

     initComponent: function() {

            Ext.apply(this, {
              store: new Ext.data.TreeStore({
                 proxy: {
                    type: 'ajax',
                    url: 'json/treeview.json'
                 },
                 folderSort: true
              }),
              columns: [{
                xtype: 'treecolumn',
                text: 'Components',
                flex: 2,
                sortable: true,
                dataIndex: 'childName'
              }]
        });

        this.callParent();
    }

Answer 1

You should be able to use a renderer to parse the value of the column and then set an icon based on whatever rules you may have. This simple example adds a class to the column cell that equals it's value, but you could parse the column value and set a specific class or icon in the renderer function instead.

...
columns: [{
    xtype: 'treecolumn',
    text: 'Components',
    flex: 2,
    sortable: true,
    dataIndex: 'childName',
    renderer: function (value, metaData) {
       metaData.tdCls = value;
       return value;
    }
}]
...

More info: http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.grid.column.Column-cfg-renderer