View Full Version : Tree Panel Node Icon

10 Feb 2015, 11:53 PM
I am trying to specify new icon for each node in a tree panel, I have tried using icon and iconCls property. My icons are bigger in size and it does't shrink the icon into the size I am specifying in iconCls class, rather it crops my bigger icon up to the size I specify in css class and display only that cropped portion as node icon.
When i don't specify iconCls and just use icon property icon stretched out like this;
Issue is icon property does not use icon's URL as "src" path rather uses URL in inline style. i.e.

<img class=" x-tree-icon x-tree-icon-leaf icon-adjustsize" role="presentation" style='background-image: url("../icons/guitar_48x48.png");' src="http://ts50/images/default/s.gif"></img>
Css class is;
.icon-adjustsize { height: 16px; width: 16px; vertical-align: middle; background-repeat:no-repeat; background-position:center !important;}

When i change this html manually and specify the src path as background image url it works fine and shrink the icon to proper size. I have hudge number of icons which are being used in my application i cannot remake them to size 16 * 16.

Any help in this regard will be highly appreciated.

11 Feb 2015, 1:20 AM
You are probably looking for background-size (http://www.w3schools.com/cssref/css3_pr_background-size.asp) CSS3 property.

See also ExtJS Tree Icon Plugin (http://extjs.eu/software/ext-tree-icon-plugin/).

11 Feb 2015, 2:48 AM
Thanks jsakalos, that was my thing :)