Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

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

  1. #11
    Sencha User
    Join Date
    Apr 2010
    Posts
    48
    Vote Rating
    0
      0  

    Default

    Thank you Asken. Exactly what I needed to solve my issue.

  2. #12
    Sencha User
    Join Date
    Dec 2011
    Posts
    20
    Vote Rating
    5
      2  

    Default clean way of customizing the tree icons

    On the tree panel specify the 'cls':

    PHP Code:
    {    xtype'treepanel',    cls'my-tree-panel',    store'MyStore',
        ...

    With that, the DIV that contains the tree panel will have the CSS class 'my-tree-panel' applied to it. Then in your css file define the selector as follows:

    PHP Code:
    .my-tree-panel .x-tree-icon-leaf {    background-imageurl("images/newicon.png") !important;} 
    The icon change will be applied only to that particular tree panel. Thus, you can have different tree panels in your applications and you'll be able to customize the icons for each.

  3. #13
    Sencha User
    Join Date
    Jan 2013
    Posts
    9
    Vote Rating
    0
      0  

    Default

    Haha I like this approach :-) Was looking for in my mind a complicated fix and then saw this. Reminds me of: never forget the power of simplicity! Thanks man :-)

  4. #14
    Sencha User
    Join Date
    Mar 2012
    Posts
    21
    Vote Rating
    5
      0  

    Default

    Quote Originally Posted by Asken View Post
    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')
    }
    i found adding .x-grid-tree-node-expanded and having an unexpanded version of your css works
    Code:
    // for expanded nodes
    .x-grid-tree-node-expanded .branch {
       background-image:  url('#{$image-path}/icon/company.png');
    }
    
    
    // for un expanded nodes
    .branch {
        background-image:  url('#{$image-path}/icon/company.png');
    }

Page 2 of 2 FirstFirst 12

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
  •