How to display images instead of text in extJS treepanel

Question

How to display images instead of text in extJS treepanel.

I am using drag and drop deature. There I am using treeviewdragdrop method.

Now instead of text I want to display some images.

Here is my code.

{
            xtype: 'treepanel',
            align: 'stretch',
            rootVisible : false,
            title:'My Tree',
            useArrows: true,
            hideHeaders: true,
            scrollable: true,
            autoScroll: true,
            loadMask: {
                msg: 'Loading'
            },
            copy: true,
            rootVisible: false,
            viewConfig: {
                plugins: {
                    ddGroup: 'grid-to-form',
                    ptype: 'treeviewdragdrop',
                    appendOnly: true,
                    sortOnDrop: true,
                    enableDrag: true,
                    containerScroll: true,
                    allowParentInsert: false,
                    allowContainerDrops: false
                }
            },
        
        store: Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                "text": ".",
                "children": [{
                    "item": "Box",
                    "iconCls": "tree-grid-task"
                },
                {
                    "item": "Date",
                    "iconCls": "tree-grid-task"
                },
                {
                    "item": "Number",
                    "iconCls": "tree-grid-task"
                },
                {
                    "item": "Text",
                    "iconCls": "tree-grid-task"
                },
                {
                    "item": "Field",
                    "editable":true
                }]
            }
        }),
        columns: [{
            xtype: 'treecolumn',
            text: '',
            dataIndex: 'item',

            flex: 2,
            sortable: true
        }]
    }

Answer 1

You could put a renderer into the treecolumn; i created a fiddle to show it as example.

{
  xtype: 'treecolumn',
  text: '',
  dataIndex: 'item',
  flex: 1,
  sortable: true,
  renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
    return '<img width=50 src="' + value + '"></img>';
  }
}