PDA

View Full Version : different icon for different nodes in tree



divyajain1
7 Nov 2011, 9:22 AM
HI ,

I am trying to build a tree where I want to show different icons for different nodes. Since I dont want to create a new css for each icon I am trying to use the "icon" property for the tree node but it is not working. It always shows me the default image.

css code:
.smallIcon:{height:16px !important; width:16px; important}

phpcode:
[{"text": "Albama" , "id":"1", "icon":"./images/alabama.jpg","iconCls:"smallIcon","leaf": false},{"text": "California" , "id":"2", "icon":"./images/california.jpg","iconCls":'smallicon","leaf": false}]';

If I add the image src as part of the css code and only use iconCls property it works fine but that forces me to create number of css elements and I want to avoid that. Any help will be appreciated.

Thanks.

tvanzoelen
7 Nov 2011, 9:26 AM
Ext.define('App.tree.Model', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text', type: 'string', defaultValue: null },
{ name: 'parentId', type: 'string', defaultValue: null },
{ name: 'index', type: 'int', defaultValue: null },
{ name: 'depth', type: 'int', defaultValue: 0 },
{ name: 'expanded', type: 'bool', defaultValue: false, persist: false },
{ name: 'expandable', type: 'bool', defaultValue: true, persist: false },
{ name: 'checked', type: 'auto', defaultValue: null },
{ name: 'leaf', type: 'bool', defaultValue: false, persist: false },
{ name: 'cls', type: 'string', defaultValue: null, persist: false },
{ name: 'icon', type: 'string', defaultValue: null, persist: false },
{ name: 'iconCls', type: 'string', defaultValue: null, persist: false },
{ name: 'iconQtip', type: 'string', defaultValue: null, persist: false },
{ name: 'root', type: 'boolean', defaultValue: false, persist: false },
{ name: 'isLast', type: 'boolean', defaultValue: false, persist: false },
{ name: 'isFirst', type: 'boolean', defaultValue: false, persist: false },
{ name: 'allowDrop', type: 'boolean', defaultValue: true, persist: false },
{ name: 'allowDrag', type: 'boolean', defaultValue: true, persist: false },
{ name: 'loaded', type: 'boolean', defaultValue: false, persist: false },
{ name: 'loading', type: 'boolean', defaultValue: false, persist: false },
{ name: 'href', type: 'string', defaultValue: null, persist: false },
{ name: 'hrefTarget', type: 'string', defaultValue: null, persist: false },
{ name: 'qtip', type: 'string', defaultValue: null, persist: false },
{ name: 'qtitle', type: 'string', defaultValue: null, persist: false }
]
});


use this treemodel on your tree and icons will work.

divyajain1
7 Nov 2011, 11:15 AM
Thanks. It worked. Once I specified this model it worked fine.

Regards.