View Full Version : [NestedList] How to add icon on left of text??

29 Sep 2010, 3:49 PM
Hi Im using Sencha Touch 0.95. Using the TreeStore to get data from the server, nice it work great!!! A really nice improvment, now that I have that solved I want to be able ta add or specify icon class, or icon path /images/node-icon.png to each node on the list, so It is displayed at the left of the text, is there a way to do this?? Or do you know about a workaround to do it?


29 Sep 2010, 4:38 PM
Modify the template in getItemTextTpl to include the image.

23 Nov 2010, 1:30 PM
Can you show an example? I see how this template sets the text, but I cannot figure out how an icon is added to the template.

-- cavalleydude

23 Nov 2010, 1:35 PM
The template just takes html, so throw in an image tag.

23 Nov 2010, 1:43 PM
I want a different image depending on the list item. The code below works perfect, but I want different images... Sorry, I don't know where to set the unique image (based on the item text).

getItemTextTpl: function(node) {
return '<img src=images/icon.png title="thumb">'+
'{' + this.displayField + '}';

23 Nov 2010, 1:44 PM
It's just a function, you can write any code in there. A condition or whatever.

23 Nov 2010, 1:46 PM
Okay, thanks Evan... I'll try that.

5 Jan 2011, 6:20 AM
I've been trying to adapt this technique so that each list item has a clickable image which, if clicked, will be used to allow me to delete data associated with that item.

I understand how to add a click event handler to the image, but I'm finding that clicking an image will also cause the list item it's in to also be selected since (I assume) a tap event is bubbling up into the list item.

So my first question: is there a way to have the image click event just fire independently (ie without selecting the item itself) if it's clicked, but if you click anywhere else in the item then the itemtap event fires for the list item as normal?

Secondly, if the "delete" image in each List Item uses the same click handler, what's the recommended way to determine which list item "delete" button I clicked?

Many thanks for any advice


5 Jan 2011, 6:47 AM
I've figured out an answer to my second question.

However, here's another I'm wondering about: what would be the best technique in the getItemTextTpl function for putting an image to the far right of each list item?

5 Jan 2011, 7:29 AM
I keep managing to answer my own questions (apart from the first!)....but in case it's helpful for others, the simplest way I've found to position images to the right of a List/Nested List item template is to add style="float:right;" to the <img> tag

5 Jan 2011, 9:29 AM
Hi Rob, It sounds like you have answered all your own questions. In my case, I wanted an easy was to set/unset an image on the button. This is what I did...

In my CSS file

.alerticon {
background-image:url("../images/exclamation-octagon-frame.png") !important;

.no-icon {
display: inline;
In my panel code, I would set the iconCls initially as no-icon. Then when ever I need to change the icon image, I would call a function (see code below). Calling showBasicAlert( true ) would change the iconCls and would re-render immediately with the image. showBasicAlert( false ) removes the image.

id: 'basicbutton',
iconCls: 'no-icon',
text: 'Basic Information',
style: 'font-weight:bold;font-size:16px;color:2A3939; font-family: arial; ',
height: 30,
handler: this.displayBasicPanel,
scope: this


showBasicAlert: function( enableAlert ) {
var btn = Ext.getCmp('basicbutton');
var cls = enableAlert ? 'alerticon' : 'no-icon';


5 Jan 2011, 10:47 AM
Yes I managed to figure out all but one of my questions - I'm still interested in figuring out my event handling issue - here's what I would like:

So I have an image rendered in a List/NestedList Item. I'd like to be able to have two independently-acting event handlers:

- if I click the image I want its click event handler to fire, but I don't want the List Item's itemtap handler to fire (nor, ideally for the item to turn blue)

- If I click anywhere else in the List Item, then I want the itemtap handler to fire.

Not sure if this is possible though. I can set it up so the List item itself is inert and events only occur through clicking images within it, or I can set it up so that both fire.

The problem with the former approach is that people expect to be able to tap anywhere in a List Item, not just on icon "hotspots", so it can be confusing from a UI point of view.

The problem with the latter approach is that when you click an image, the image's click event *and* the List Item's itemtap event both fire but apparently in no particular fixed sequence, so I can't think of a way that I can reliably determine whether or not the image was clicked rather than the List Item outside the image.

Any ideas would be welcomed!


18 Nov 2013, 4:55 PM
Hi mate ,
Please have a look:


hope that helps!
Regards Ntenis Gkoulaxidis!