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
    Tampa, FL
    Posts
    6,955
    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
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  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