PDA

View Full Version : how to custom render items in nestedlist



wdiechmann
27 Apr 2011, 3:29 AM
I'm a total newbie to Sencha Touch and fighting my way into this exciting framework, I'm puzzled as to how each item in nestedlist gets rendered.

I know I can use the



getItemTextTpl: function(recordnode) {
return '<tpl if="adminBranch === true"><div class="admin">{text}</div></tpl><tpl if="adminBranch !== true">{text}</tpl>';
},


but I would really like to style the 'div' surrounding the 'x-list-item-body' classed div - ie the 'x-list-item' classed div - but how do I get to add classes to that element dynamically - ie depending upon my adminBranch property on the node/listitem?

happysokki
27 Apr 2011, 5:15 AM
This isn't possible because the <div class="x-list-item ' + this.itemCls + '"> is defined in initComponent of Ext.List.

You could remove unwanted styles from your x-list-item and add the wanted styles to your <div class="admin">

wdiechmann
28 Apr 2011, 12:10 AM
@happysokki: well, that would not render the effects I'm looking for (painting x-list-item with a custom background colour or disabling it entirely - or am I missing something?

wdiechmann
28 Apr 2011, 2:30 AM
going through the sencha-touch.js src (1.0.3) looking for 'x-list-item' I find myself in the Ext.List - but the NestedList is an extension to Panel?!

anyways - in Ext.List there is a itemCls configuration property - and it works :)



items: [{
fullscreen: true,
xtype: 'list',
store: demos.CountryStore,
itemCls: 'any_class',
itemTpl: '<div class="contact"><strong>{name}</strong> {abbreviation}</div>'
}]



Rendering into:



<div class="x-list-item any_class x-item-selected">
<div class="x-list-item-body">
<div class="contact"><strong>Bangladesh</strong> BG</div>
</div>
</div>


This configuration option does, however, not work on the NestedList - and I do not know how to render a custom template on the items anyway - but that is beside the point (well actually not, but hey, one thing at a time)

wdiechmann
4 May 2011, 6:34 AM
didn't solve this - but reckon that I'll build specific Structure.js files for users pertaining to their credentials -

FYI see my other thread: http://www.sencha.com/forum/showthread.php?132338-KitchenSink-Demo-NestedList-and-MVC&p=598342

cheers,
Walther