Custom Tree Icons Possible?

[technorodent]

Where in the [Architect] documentation is the procedure for changing or assigning custom tree icons? I can find no entry point for the solution to this problem in the Architect documentation, and documentation for EXT JS doesn't seem to match the way the procedures are structured in Architect.

Any signpost or suggestion to a solution would be most appreciated.

[technorodent]

After grappling around for a few hours, I have solved it adequately enough for me.

1. Add a field named "iconCls" to the Model used in populating the tree. In the "Simple Tasks" example, that would be the "List" model.

2. Next, in the appropriate Store, edit the root to include something like the following:

iconCls: 'myFolder'

Again, if you are in the "Simple Tasks" example, that would be the "Lists" Store, and the code behind the "Lists" icon in the Project Inspector would be as follows:

Ext.define('SimpleTasks.store.Lists', {
extend: 'Ext.data.TreeStore',
alias: 'store.lists',


requires: [
'SimpleTasks.model.List'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
storeId: 'Lists',
model: 'SimpleTasks.model.List',
root: {
expanded: true,
id: -1,
name: 'Root Intersection',
iconCls: 'myFolder',
oType: 0
}
}, cfg)]);
}
});

3. In the CSS file under Resources>>Library in the Project Inspector, add something like the following:

.myFolder {
background-image: url('../images/<whateverIcon.png>') !important;
}
.x-grid-tree-node-expanded .myFolder {
background-image: url('../images/<whateverIcon.png>') !important;
}

That will take care of both expanded and collapsed modes.

Save and test the file and you will see whatever your icon is displayed in the root.

To assign icons as the user builds the tree, add the iconCls field to each node. For example, if you are again using the "Simple Tasks" tutorial, you would add the field to the 'newList' object in the code behind Controllers>>Lists>>addList of the Property Inspector.

Otherwise, setting the icon can be accessed through the node.set() function. For example--again with the "Simple Tasks" tutorial and in the code behind Controllers>>Lists>>addList:

Change:

parentList.appendChild(newList);

to:

debugger;
var myObj = parentList.appendChild(newList);
myObj.set('iconCls', '<my CSS icon reference>');

Hope this helps someone. . . .

[aconran]

The above is the correct way of doing it.

Thanks for posting!