custom itemTpl for a "tapped" row in list

[bongo_bongo]

Hi

Is there a way to setItemTpl dynamically for only the tapped row of a list?

Currently i can do that but it applies to all rows...

Currently I have the following:

 {
            xtype      : 'list',
            id: 'airportGuideShopsList',
            itemId: 'airportGuideShopsList',
            scrollable : {
                direction     : 'vertical',
                directionLock : true
            },
            itemCls : 'airport-guide-shop',
            itemTpl    : '<div class="off-white-text" style="font-size: 14px;">{name}</div>',
            store      : 'ShopsStore',
            listeners: {
                itemtap : function(list, idx, el){


                    if(el.getHeight()<300){
                        el.setHeight(300);
                        list.setItemTpl('<div class="off-white-text" style="font-size: 14px;">{name}</div><div style="color: white;">{contents}</div>')
                    
                       
                    }else{
                        el.setHeight(50);
                        list.setItemTpl('<div class="off-white-text" style="font-size: 14px;">{name}</div>');
                    }
                    list.refresh();
                }
            }
        }

Thanks

[mitchellsimoens]

So it looks like all you want to do is add '<div style="color: white;">{contents}</div>' correct?

[bongo_bongo]

Yes I am trying to display {contents}
On the tap of the row item in list but only for the tapped row.

At the moment it shows up in all rows.

I am using your accordion layout and have a list inside an accordion container.
Thanks a lot for your support:

[mitchellsimoens]

If you want the div to show when that row is selected then you can use CSS and always have the 2nd div there but hidden unless the row is selected.

If you want to toggle based on tapping them you can set a field on the model and when itemtap fires you can then toggle that field then in your itemTpl you can do:

'<div class="off-white-text" style="font-size: 14px;">{name}</div><tpl if="someField"><div style="color: white;">{contents}</div></tpl>'

[bongo_bongo]

Works perfectly! Thanks very much.