View Full Version : Keeping Same Icons for Expanded / collapsed Nodes of Tree Gird.

6 Apr 2012, 4:57 AM
I am working with Tree, I set IconCls string value from server based on the node value and send json to browser, tree icons displays perfect but when node is clicked the icon turn into a UGLY open Folder icon for no reason, how can I over ride this so that it do not change to folder icon , I want to keep the same Icon class which I sent in IconCls to be visible not this folder Icon Class, this is my tree :

Ext.define('Application.MyGridTree', {
extend: 'Ext.tree.Panel',
// Settings
useArrows: true,
rootVisible: false,
store: clientTreeStore,
multiSelect: false,
singleExpand: true,
allowDeselect :true,
initComponent : function() {



This is the Model:

Ext.define('clientsTree', {
extend: 'Ext.data.Model',
fields : [ {name : 'userId'},
{name : 'userName'},

{name : 'iconCls'},

{name : 'expanded'},
{name : 'leaf'}, ],
idProperty: 'userId'

This is store:

var clientTreeStore = Ext.create('Ext.data.TreeStore', {
model: 'userTree',
proxy: {
type: 'ajax',
url : 'treeService'
folderSort: true

6 Apr 2012, 5:02 AM
I did find out that if I copy this to my css it overrides the defualt 'UGLY' folder icon but this bounds me to stick to the icon which is hard coded in this CSS:

.x-grid-tree-node-expanded .x-tree-icon-parent {
padding-top: 1px;

What I need is to stay with the icon passed from server ie. in "iconCls" attribute.

any help would be appricaited!!!