1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    2
    Vote Rating
    0
    Natalia R is on a distinguished road

      0  

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

    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
    Vote Rating
    4
    bergstyle is on a distinguished road

      0  

    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
    Vote Rating
    1
    budnik is on a distinguished road

      0  

    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
    Vote Rating
    2
    Skiff_ is on a distinguished road

      2  

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

      0  

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

      0  

    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
    Sencha User
    Join Date
    Feb 2010
    Posts
    6
    Vote Rating
    0
    Pascal KEMAJOU is on a distinguished road

      0  

    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
    Vote Rating
    1
    lexsidev is on a distinguished road

      1  

    Default expanded/not expanded nodes

    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,114
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    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
    117
    Vote Rating
    0
    Asken is an unknown quantity at this point

      0  

    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi