render an icon to NestedList item

[pcr]

Hi I tried to put icons in front of NestedList items. I use a getItemTextTpl like I read on this forum (http://www.sencha.com/forum/showthread.php?111160-NestedList-How-to-add-icon-on-left-of-text&highlight=Nestedlist). The result is a string of icons across the item. See include picture. On top the Nestedlist.

Here is the code I use:



this.navigationPanel = new Ext.NestedList({
store: fmisondemand.StructureStore,
useToolbar: Ext.is.Phone ? false : true,
updateTitleText: false,
dock: 'left',
getItemTextTpl: function() {
return '<div class="{iconCls}"><div>{text}</div></div><tpl if="leaf !== true"></tpl>';
},
hidden: !Ext.is.Phone && Ext.Viewport.orientation == 'portrait',
toolbar: Ext.is.Phone ? this.navigationBar : null,
listeners: {
itemtap: this.onNavPanelItemTap,
scope: this
}
});
It would be perfect if somebody knows what is wrong. I want to understand where or what happens here.

23540

[jay@moduscreate.com]

Hi I tried to put icons in front of NestedList items. I use a getItemTextTpl like I read on this forum (http://www.sencha.com/forum/showthread.php?111160-NestedList-How-to-add-icon-on-left-of-text&highlight=Nestedlist). The result is a string of icons across the item. See include picture. On top the Nestedlist.

Here is the code I use:



this.navigationPanel = new Ext.NestedList({
store: fmisondemand.StructureStore,
useToolbar: Ext.is.Phone ? false : true,
updateTitleText: false,
dock: 'left',
getItemTextTpl: function() {
return '<div class="{iconCls}"><div>{text}</div></div><tpl if="leaf !== true"></tpl>';
},
hidden: !Ext.is.Phone && Ext.Viewport.orientation == 'portrait',
toolbar: Ext.is.Phone ? this.navigationBar : null,
listeners: {
itemtap: this.onNavPanelItemTap,
scope: this
}
});
It would be perfect if somebody knows what is wrong. I want to understand where or what happens here.

23540

Look at your div! It's the CONTAINER for your text. That said, you should set your iconCls background to no-repeat.

[pcr]

Hi thanks for the Quick reponse.
I understand about the div. I foundation a solution by myself. I replaced class with an image tag. Of course I had to changed the vaule of iconCls. The reason why I use iconCls is because I try to re-use the backendcode that create the parameters for Ext.Menu in my ExtJS app.

Thanks for helping.