1. #1
    Ext JS Premium Member neongrau's Avatar
    Join Date
    Mar 2007
    Posts
    249
    Vote Rating
    0
    neongrau is on a distinguished road

      0  

    Default tree icon needs classname for proper styling in IE

    tree icon needs classname for proper styling in IE


    instead of just
    "x-tree-node-icon" it needs a class that reflects the collapsed/expanded state

    currently when using the cls attribute on a treenode to style the node icon it's impossible to nest folders with different expanded/collapsed icons and style them properly for IE.

    this problem only occurs in IE6+7 when having folders nested and and different expanded/collapsed icons applied. and only on the expanded state!

    a possible fix would be to apply the replaceClass() in Ext.tree.TreeNodeUI.prototype.updateExpandIcon not only to this.elNode but to this.iconNode as well.


    see this thread for more details

    http://extjs.com/forum/showthread.php?t=3726
    Last edited by neongrau; 2 Apr 2007 at 7:14 AM. Reason: new forum link

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    There is a new option that should fix this in the trunk.

    I have added a new attribute "iconCls" which is applied directly to the node's icon. Using it in combo with cls could give even more flexibility.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  3. #3
    Ext JS Premium Member neongrau's Avatar
    Join Date
    Mar 2007
    Posts
    249
    Vote Rating
    0
    neongrau is on a distinguished road

      0  

    Default


    thanks jack, thats great

    now you can use such class combos
    .x-tree-node-expanded img.folder_220 {...
    .x-tree-node-collapsed img.folder_220 {...

    without having to rely on IE's crappy multiclass behavior

  4. #4
    Sencha User dias's Avatar
    Join Date
    Feb 2008
    Location
    Portugal
    Posts
    96
    Vote Rating
    0
    dias is on a distinguished road

      0  

    Default


    Can someone post a example how to do this?

  5. #5
    Ext User
    Join Date
    Jun 2007
    Location
    Des Moines, IA
    Posts
    8
    Vote Rating
    0
    broox is on a distinguished road

      0  

    Default


    yeah, it's fairly simple.

    in the json you use to load your tree view simply add "iconCls" like so:
    Code:
    [{ 
    "text":"Users", "id":"users", "cls":"folder", "expanded": true, "children":
    [{
    "text":"Add User", "id":"add_user", "leaf":true, "cls":"file", "iconCls":"tree-new-icon"
    }]
    }]
    then, in your css you'd simply define your rule to change the icon, similar to this...

    .x-tree-node-leaf img.tree-new-icon { background-image:url(/resources/images/default/tree/drop-add.gif); }
    Last edited by mystix; 2 Sep 2008 at 5:43 PM. Reason: post code in [code][/code] tags. see http://extjs.com/forum/misc.php?do=bbcode#code

  6. #6
    Banned
    Join Date
    Dec 2008
    Posts
    7
    Vote Rating
    0
    cuocthiseo01 is on a distinguished road

      0  

    Default


    detail guides, I've just fixed it

  7. #7
    Sencha User
    Join Date
    Dec 2008
    Posts
    33
    Vote Rating
    0
    iceblast_01 is on a distinguished road

      0  

    Default


    this only works if the node is leaf:true? how bout the ones with leaf:false? does this also work? can i have some examples? thanks!

  8. #8
    Ext User
    Join Date
    Dec 2009
    Posts
    1
    Vote Rating
    0
    manzaposse is on a distinguished road

      0  

    Default


    for me this fix is ok, tnx a lot!

Similar Threads

  1. change treeNodes Icon after tree render??
    By omid in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 15 Dec 2009, 8:32 AM
  2. Replies: 4
    Last Post: 17 Apr 2007, 1:06 PM
  3. DateField Styling
    By heidtmare in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 7 Mar 2007, 5:46 AM
  4. Toolbarbutton className
    By alex1er in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 16 Nov 2006, 6:27 AM

Thread Participants: 6