PDA

View Full Version : render an icon to NestedList item



pcr
25 Nov 2010, 1:34 PM
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
25 Nov 2010, 5:10 PM
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
26 Nov 2010, 12:28 AM
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.