Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: How to set custom icon for tree node in ExtJS 4?

  1. #1

    Question How to set custom icon for tree node in ExtJS 4?

    I cannot figure this out.
    Even demo examples with custom icons on screenshot are now actually all with standard icons.

    How to set custom icon for a tree node?

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2009
    Location
    San Mateo, CA
    Posts
    32

    Default

    I use good old fashion CSS overrides for Hub List. Here is my css file.

    PHP Code:
    /* Replaces default tree node yellow 
       folder icon with an OSX style one
    */
    #containerTreePanel .x-tree-icon-parent {
        
    background-imageurl("images/icon-fldr-default-closed.png");
    }

    /* This is the open state of the yellow
       folder icon.
    */
    #containerTreePanel .x-grid-tree-node-expanded .x-tree-icon-parent {
        
    background-imageurl("images/icon-fldr-default-closed.png");
        
    padding-top1px;
    }

    /* Replaces the default tree node leaf
       icon with Hub List list icon
    */
    #containerTreePanel .x-tree-icon-leaf {
        
    background-imageurl("images/icon-sdbar-list.png");
        
    width14px;

    Last edited by bergstyle; 26 Jun 2011 at 7:47 PM. Reason: fixed typos

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    2

    Default

    We got solution from Evan Trimboli.

    It's rather simple:

    node.set('iconCls', your-icon-class);

  4. #4
    Sencha User
    Join Date
    Jul 2010
    Posts
    1

    Default

    You can do this while defining the store:

    Code:
    { text: "Some text", expanded: true, iconCls: 'ico-test', children: [ ] }
    and your css class:

    Code:
    .ico-test { background-color:#352788; width:15px; height:15px; background-image:none !important; }

  5. #5
    Sencha User ordinary_guy's Avatar
    Join Date
    Apr 2011
    Location
    London
    Posts
    8

    Default

    Quote Originally Posted by budnik View Post
    We got solution from Evan Trimboli.

    It's rather simple:

    node.set('iconCls', your-icon-class);
    Hmmm, this only seems to work if the node is not-expanded. Once the node is expanded it reverts to the standard open folder icon and the iconCls added to the node/model is ignored.

  6. #6
    Ext JS Premium Member ligaard's Avatar
    Join Date
    Apr 2011
    Location
    Copenhagen, Denmark
    Posts
    66

    Default

    Quote Originally Posted by budnik View Post
    We got solution from Evan Trimboli.

    It's rather simple:

    node.set('iconCls', your-icon-class);
    How do I get a node object in the first place?

  7. #7

    Default

    I found that if you do like this

    "children": [{
    "text": "Go jogging",
    "leaf": true,
    "checked": true,
    "iconCls":"sys-car"
    },{

    You get the Resulttreepanel.png

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    1

    Default expanded/not expanded nodes

    Quote Originally Posted by ordinary_guy View Post
    Hmmm, this only seems to work if the node is not-expanded. Once the node is expanded it reverts to the standard open folder icon and the iconCls added to the node/model is ignored.
    To have expanded/not expanded nodes keep your icon you can add .x-tree-lines before your class selector in your css.
    If you set the node's iconCls property to node-icon, add the following to your css and it works wether or not the node is expanded :
    Code:
    .x-tree-lines img.node-icon{
        width:16px;
        background-image:url('/resources/images/admin-user.png')
    }

  9. #9
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199

    Default

    just put this model on your tree and the icon property on the node will work. In that case css classes are not needed.

    Code:
    Ext.define('TreeModel', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'text', type: 'string', defaultValue: null },
            { name: 'parentId', type: 'string', defaultValue: null },
            { name: 'index', type: 'int', defaultValue: null },
            { name: 'depth', type: 'int', defaultValue: 0 },
            { name: 'expanded', type: 'bool', defaultValue: false, persist: false },
            { name: 'expandable', type: 'bool', defaultValue: true, persist: false },
            { name: 'checked', type: 'auto', defaultValue: null },
            { name: 'leaf', type: 'bool', defaultValue: false, persist: false },
            { name: 'cls', type: 'string', defaultValue: null, persist: false },
            { name: 'icon', type: 'string', defaultValue: null, persist: false },
            { name: 'iconCls', type: 'string', defaultValue: null, persist: false },
            { name: 'iconQtip', type: 'string', defaultValue: null, persist: false },
            { name: 'root', type: 'boolean', defaultValue: false, persist: false },
            { name: 'isLast', type: 'boolean', defaultValue: false, persist: false },
            { name: 'isFirst', type: 'boolean', defaultValue: false, persist: false },
            { name: 'allowDrop', type: 'boolean', defaultValue: true, persist: false },
            { name: 'allowDrag', type: 'boolean', defaultValue: true, persist: false },
            { name: 'loaded', type: 'boolean', defaultValue: false, persist: false },
            { name: 'loading', type: 'boolean', defaultValue: false, persist: false },
            { name: 'href', type: 'string', defaultValue: null, persist: false },
            { name: 'hrefTarget', type: 'string', defaultValue: null, persist: false },
            { name: 'qtip', type: 'string', defaultValue: null, persist: false },
            { name: 'qtitle', type: 'string', defaultValue: null, persist: false }
        ]
    });

  10. #10
    Ext JS Premium Member Asken's Avatar
    Join Date
    Feb 2010
    Location
    sweden
    Posts
    122

    Default

    Quote Originally Posted by lexsidev View Post
    To have expanded/not expanded nodes keep your icon you can add .x-tree-lines before your class selector in your css.
    If you set the node's iconCls property to node-icon, add the following to your css and it works wether or not the node is expanded :
    Code:
    .x-tree-lines img.node-icon{
        width:16px;
        background-image:url('/resources/images/admin-user.png')
    }
    I couldn't get it to work with the above. I used this instead if someone is interested:
    Code:
    .x-grid-cell-inner img.node-icon {
        width:16px;
        background-image:url('/resources/images/admin-user.png')
    }
    Kristian Ask
    United Nations OPS

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

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