sencha touch :: how to create list of hbox-items

Question

i want to generate a list of data out of a store. each data item holds a title and a boolean. now i want to have a list of the items, each holding the title and a togglefield (showing the boolean) on the right of the title.

how could I do that?

thnx!

Answer 1

From the Sencha Touch documentation, a List is "a mechanism for displaying data using a list layout template", ie html template. If you want a 'list' of components, you'll have to make your own extension of DataView (I think).

A workaround could be to put an html checkbox inside your itemTpl. Something like (warning - not tested):

itemTpl: '<p>{title}: <input type="checkbox" name="BoolCheckbox" class="boolcheckbox"'
    + "{[(values.bool? 'checked="checked"' : '')]}"
    + '></input></p>'

To run your own code in the XTemplate, you bracket it with {[]}. When in this scope, you have access to a variable 'values', which contains the data for the record.

To detect events, you'd add a listener to the list:

itemtap: function (dataView, index, item, e) {
    if (e.getTarget().getClass().toString() == "boolcheckbox") {
        // do something
    }
}

Some resources on templates:

http://dev.sencha.com/deploy/touch/docs/

http://www.sencha.com/learn/xtemplates-part-i/

http://www.sencha.com/learn/xtemplates-part-ii/