EXTJS creating custom tree panel

I am using EXTJS and I want to create my TreePanel with one more icon to the right that will be set to indicate something has changed. I am struggling to do this as I am unsure where I can modify these properties. It would be easy with HTML alone but obviously this framework is useful and I need to integrate these changes into it.

Thanks, Dan

Yes, there is way to handle it in ExtJS framework with renderer method on column.

Here is how I would achieve it using ExtJS 6.0.x:

Ext.create('Ext.container.Viewport', {
    layout: 'fit',

    items: [{
        xtype: 'container',
        scrollable: 'y',
        flex: 1,

        layout: {
            type: 'hbox',
            alignt: 'stretchmax'
        },

        items: [{
            xtype: 'treepanel',
            rootVisible: false,
            flex: 1,

            store: {
                type: 'tree',
                parentIdProperty: 'parentId',

                root: {
                    text: 'Navigation Bar',
                    expanded: true,
                    children: [{
                        text: 'Parts',
                        children: [{
                            leaf: true,
                            itemId: 'addPart',
                            text: 'Add new part',
                            changed: true
                        }, {
                            leaf: true,
                            itemId: 'manageParts',
                            text: 'Manage Parts',
                            changed: false
                        }, ]
                    }, {
                        leaf: true,
                        itemId: 'announcements',
                        text: 'Announcements',
                        changed: true
                    }]
                }
            },

            columns: [{
                text: 'Code',
                dataIndex: 'codigo',
                align: 'left'
            }, {
                xtype: 'treecolumn',
                text: 'Description',
                dataIndex: 'text',
                flex: 1
            }, {
                text: 'Edited',
                iconCls: 'x-fa fa-edit',
                align: 'center',
                flex: 1,
                renderer: function (f, grid, record) {
                    if(record.get('changed') === true) {
                        return "Changed Icon here"
                    }
                    else {
                        return "Not changed icon here";
                    }
                }
            }]
        }]
    }]
});

With this you can easily manage the data with store and can easily update the data in store. ExtJS will take care of rendering the given configuration for columns.

You can also use actioncolumn to show icons/buttons and handle events with listeners.

Example Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/28qm