Results 1 to 3 of 3

Thread: Custom Tree Icons Possible?

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Vote Rating

    Default Custom Tree Icons Possible?

    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.

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Vote Rating

    Default One Solution for Tree Icons

    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('', {
    extend: '',
    alias: 'store.lists',

    requires: [

    constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    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:




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

    Hope this helps someone. . . .

  3. #3
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Vote Rating


    The above is the correct way of doing it.

    Thanks for posting!
    Aaron Conran

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts