EXTJS creating custom tree panel - extjs

Question

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

Answer 1

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

Answer 2

I Have solved the problem. You can embed html into the text field in the store.
Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.TreeStore',
alias: 'store.navigation',
rootData: {
text: 'Navigation Bar',
expanded: true,
children: [
{
text: 'Parts',
children: [
{ leaf:true, itemId:'addPart', text: 'Add new part' },
{ leaf:true, itemId:'manageParts', text: 'Manage Parts <b>here</b>' },
]
},
{
leaf:true, itemId:'announcements', text: 'Announcements'
}
]
},
constructor: function (config) {
// Since records claim the data object given to them, clone the data
// for each instance.
config = Ext.apply({
root: Ext.clone(this.rootData)
}, config);
this.callParent([config]);
}
});
Probably a poor solution but gets the job done.