List with Other Controls

I tried to add a control (SelectField) into list items so every time list load records, that would have select field.

Currently I am using following code on list Painted event.

Code:

---

this.theStore.each(function(record) {   
    var target = Ext.get("u-list-column-" + record.get('id'));
   
    Ext.create('Ext.field.Select', {
        cls : 'u-select',
        options : options,
        renderTo : target
    });
});

---

The above code works as expected but if the list has paging enabled the next loaded items don't get it because painted event is not fired and if it had fired, few list items would have more than one controls added whereas only one is needed. Is there a better way to do it in Sencha Touch 2 Beta version?

With B1 the Sencha Team released Dataview components.
You can find more info at the following link

http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.component.DataItem

Hope this helps.

Check out the Kiva example for a DataView (useComponents) in action

I tried this new feature, this is really good. Is that possible to put pinned headers at the top of each column in that DataView?

And as this example goes.

Code:

---

dataMap: {      // When the record is updated, get the text configuration, and
      // call setHtml with the 'text' field of the record.
      getText: {
        setHtml: 'text'
    },


    // When the record is updated, get the userName configuration, and
    // call setHtml with the 'from_user' field of the record.
    getUserName: {
        setHtml: 'from_user'
    },


    // When the record is updated, get the avatar configuration, and
    // call `setSrc` with the 'profile_image_url' field of the record.
    getAvatar: {
        setSrc: 'profile_image_url'
    }
 },

---

How can I concatenate data properties with custom string. Something like...

Code:

---

getPrice: {        setHtml: 'price' + ' USD'
    },

---