Results 1 to 6 of 6

Thread: Tree List icons

  1. #1
    Sencha User bkraut's Avatar
    Join Date
    Nov 2007
    Location
    Maribor, Slovenia
    Posts
    403
    Vote Rating
    1
      0  

    Default Tree List icons

    Hi,

    I'm struggling with a tree list icon. Is there any chance that the tree node keeps an icon class if node is a leaf? I'd like that the folder icon remains not the default leaf icon.

    I have a tree of folders. When I open a node which contains leafs (folder with no subfolders) an icon for opening a folder emerges, no matter if the node has any subnodes. I think it should not be displayed.

    Is there any fix for this?

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Vote Rating
    394
      0  

    Default

    If I've understood correctly, you're asking two questions here about tree node styling:

    1. Is there any way to give leaf nodes a folder icon?
    2. Is there any way to hide the [+] icon next to leaf nodes of an AsyncTreeNode?

    You can give tree nodes any icons you like. First give them an iconCls:

    Code:
    new Ext.tree.TreeNode({
        iconCls: 'custom',
        ...
    });
    Then you just need to use CSS to set the icon for the 3 states of a node: collapsed, expanded and leaf. In the example below I've set all 3 to use the open folder icon but it's entirely up to you:

    Code:
    .x-tree-node-collapsed .custom {
        background-image: url( "resources/images/default/tree/folder-open.gif" ) !important;
    }
    
    .x-tree-node-expanded .custom {
        background-image: url( "resources/images/default/tree/folder-open.gif" ) !important;
    }
    
    .x-tree-node-leaf .custom {
        background-image: url( "resources/images/default/tree/folder-open.gif" ) !important;
    }
    For your second question, you'll need to set the leaf config option to true on your node so that Ext knows there are no children to load from the server.

  3. #3
    Sencha User bkraut's Avatar
    Join Date
    Nov 2007
    Location
    Maribor, Slovenia
    Posts
    403
    Vote Rating
    1
      0  

    Default

    Thanks,

    I know that - I'm just asking if there is any option that also when the leaf is true a folder icon is displayed.

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Vote Rating
    394
      0  

    Default

    There is no such config option, you'll need to use iconCls and CSS like in my example.

  5. #5
    Sencha User bkraut's Avatar
    Join Date
    Nov 2007
    Location
    Maribor, Slovenia
    Posts
    403
    Vote Rating
    1
      0  

    Default

    I tried with another iconCls, not with 'folder' and it works. However, when I switch to folder a leaf icon is displayed. Funny.

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Vote Rating
    394
      0  

    Default

    If you're still having trouble with this you'll need to post the code that isn't working, including the CSS. There are many small mistakes that can be made that would result in you seeing the default icons.

Posting Permissions

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