1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    20
    Vote Rating
    0
    technorodent is on a distinguished road

      0  

    Default Custom Tree Icons Possible?

    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
    Posts
    20
    Vote Rating
    0
    technorodent is on a distinguished road

      0  

    Default One Solution for Tree Icons

    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('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. . . .

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,308
    Vote Rating
    125
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    The above is the correct way of doing it.

    Thanks for posting!
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 1