How to bind rating control for each list item in sencha touch 2

Question

The thing is that i have one list with itemTpl and binding that to one store its displaying some 10 records and working fine code is below

 xtype:'list',
  id:'userReviewList',
  title:'User Review',
  cls:'reviewStyle',
  store:'UserReviewStore',
  height:500,
  itemTpl:'<div class="comment">{Comment}</div>' + '<div >{Rating}</div>' + '<div style="display: none" >{ReviewId}</div>'

//with the above code am using another rating control in my app, from this below link . [http://podlipensky.com/post/2012/03/20/Sencha-Touch-2-ExtuxtouchRating.aspx][1]

//using above list and below panel inside another panel as items using layout 'hbox'

 xtype:'panel',
  id:'ratingPanel',
  lex:1,
  layout: {
  animation: {
  duration: 250,
  easing: 'ease-in-out'
             }
          },
  scroll : 'vertical',
   items:[
        {
   xtype: 'rating',
   label : 'Star',
   itemsCount : 5,
   itemCls : 'x-rating-star',
   itemHoverCls : 'x-rating-star-hover'
         }
    ]

//Below code is to bind local storage data to list

 var retrievedObject = localStorage.getItem('testObject');
   var jsonObj = Ext.decode(retrievedObject);
   if (jsonObj != null) {
   if (jsonObj.UserRatings.length != null)
     {
       this.getUserReviewList().getStore().setData(jsonObj.UserRatings);
     }
   }

//Now list coming left side with 10 records and right side panel with only one rating control.So now my main question is how i should bind this rating control inside the list which appears on all 10 records please help me out

handet87 handet87 · Accepted Answer · 2012-11-20T09:31:51

If you use List & ListItem structure, you can easily add components to your list item. With using itemTpl, you write html and style one row with html. If you use ListItem, you can shape your list row with components not html, then you can add rating component to each row.

Hope this helps.

How to bind rating control for each list item in sencha touch 2

1 Answers