PDA

View Full Version : Render components inside list?



mishoboss
13 Dec 2011, 5:16 AM
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
13 Dec 2011, 6:31 AM
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
13 Dec 2011, 6:51 AM
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
13 Dec 2011, 9:41 AM
Checkout the docs for ComponentView: http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.ComponentView

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

mishoboss
13 Dec 2011, 10:12 AM
Thank you, I checked it, but can't figure out how it could help me. Basically this is what I want to create:
29975

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
13 Dec 2011, 10:14 AM
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
13 Dec 2011, 10:16 AM
@mishoboss (http://www.sencha.com/forum/member.php?54109-mishoboss) Thanks for bringing this up. I need to do something similar tonight :)
@rdougan thx for pinpointing in the kiva example.

Rajat Sharma
23 Aug 2012, 8:48 PM
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
24 Aug 2012, 12:54 AM
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
24 Aug 2012, 1:51 AM
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.

jerome76
24 Aug 2012, 8:56 AM
You can try downloading this. I didn't include the resources folder because it was too big to upload.

Rajat Sharma
26 Aug 2012, 1:33 AM
Thsnkd. That is a lot of help.