Render components inside list?

[mishoboss]

I want to populate a list from a JSON with a custom template and a button or a slider component inside every list item. My problem is I don't know how to render these components inside the list item. How could this be done? I'm banging my head whole day

[ideamonk]

I'm handling a similar situation. While with a list where I had to have a different representation for featured items, I got away by using templates -

Ext.define('App.ui.SubMenuList', {
	requires: ['App.store.SubMenuItems'],
	extend: 'Ext.List',
	xtype: 'subMenuList',
	defaultType: 'button',
	config: {
		itemTpl: 	'<tpl if="featured==true">' + 
						'<div class="submenu-item featured" style="background: url({image}) no-repeat;">' +
						'<div>{name}</div>' +
						'</div>' +
					'</tpl>' + 
					'<tpl if="featured==false">' + 
						'<div class="menu-item">' + 
						'<img src="{image}" />' +
						'<div class="name">{name}</div>' +
						'<div class="details">{details}</div>' +
						'</div>' +
					'</tpl>',
		flex:1,
		cls: 'transparent',
		baseCls: 'subMenu',
		store: Ext.create('App.store.SubMenuItems'),
	},


});

But I think when you wish to add-up components created from a json data, you'd have to read the json, build the container with these components, and when everything is done, add this container into the current view.

[mishoboss]

Thanks, but what you've done is different than what I need. I basically need to render a button or slider (depending on the JSON data) inside a Xtemplate for a list item.

[rdougan]

Checkout the docs for ComponentView: http://docs.sencha.com/touch/2-0/#!/....ComponentView

A good example of it working is in the Kiva example.

[mishoboss]

Thank you, I checked it, but can't figure out how it could help me. Basically this is what I want to create:
Capture.JPG

A list with icon, text and a button or a slider on the right. The icon and the text isn't problem with Xtemplate, but how to embed buttons and sliders inside the template? Or am I doing it wrong?

[rdougan]

With ComponentView, each item is a component. So each item in your case would be a container, with 3 items in a hbox layout. An Ext.Img (icon), Ext.Component (title) and an Ext.field.Toggle (slider).

Checkout examples/kiva/app/view/loanslist and loanslistitem for an example of this working.

[ideamonk]

@mishoboss Thanks for bringing this up. I need to do something similar tonight
@rdougan thx for pinpointing in the kiva example.

[Rajat Sharma]

Hi. It is very late to reply to this and ask a question based on this. The kiva example you pointed is precisely what I want to do. Can you guide me to its source. All I see is the demo. Implementation approach is what I want to figure out

[pepperseb]

Hi. It is very late to reply to this and ask a question based on this. The kiva example you pointed is precisely what I want to do. Can you guide me to its source. All I see is the demo. Implementation approach is what I want to figure out

You can find the kiva source code in your sencha touch directory, in
sencha-touch-2.1.0-b2 > examples > kiva > app > view > LoansListItem.js & LoansList.js

[Rajat Sharma]

thanks for the reply. any other place where I can find the example. For some reason, I do not have the complete SDK at the moment.