1. #1
    Sencha Premium Member
    Join Date
    Nov 2008
    Posts
    57
    Vote Rating
    0
    mishoboss is on a distinguished road

      0  

    Default Render components inside list?

    Render components inside list?


    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

  2. #2
    Sencha User
    Join Date
    Jun 2010
    Location
    India
    Posts
    17
    Vote Rating
    0
    ideamonk is on a distinguished road

      0  

    Default


    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 -

    Code:
    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.

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2008
    Posts
    57
    Vote Rating
    0
    mishoboss is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


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

    A good example of it working is in the Kiva example.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2008
    Posts
    57
    Vote Rating
    0
    mishoboss is on a distinguished road

      0  

    Default


    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?

  6. #6
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    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.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  7. #7
    Sencha User
    Join Date
    Jun 2010
    Location
    India
    Posts
    17
    Vote Rating
    0
    ideamonk is on a distinguished road

      0  

    Default


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

  8. #8
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    83
    Vote Rating
    0
    Rajat Sharma is on a distinguished road

      0  

    Default


    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

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Posts
    103
    Vote Rating
    10
    pepperseb is on a distinguished road

      1  

    Default


    Quote Originally Posted by Rajat Sharma View Post
    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

  10. #10
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    83
    Vote Rating
    0
    Rajat Sharma is on a distinguished road

      0  

    Default


    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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar