How to access Sencha touch List Row index, retrieve value, and apply changes?

Question

I am stuck in sencha touch list were i need to give alternate background color for the rows in a list. One more doubt how to customize a list in sencha touch , because i need to add text field, button, images in the list row's . I tried it with html and was able to do , is there any way directly adding sencha touch object items to the list.please help me out on this.

Davor Zubak Davor Zubak · Accepted Answer · 2011-10-14T08:51:02

You can use cls : 'customCls' An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be useful for adding customized styles to the component or any of its children using standard CSS rules. And maybe you want to check out this

EDIT:

Ext.regModel('Contact', {
    fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
    model  : 'Contact',
    sorters: 'lastName',
    getGroupString : function(record) {
    return record.get('lastName')[0];
    },
    data: [
        {firstName: 'Tommy',   lastName: 'Maintz'},
        {firstName: 'Rob',     lastName: 'Dougan'},
        {firstName: 'Ed',      lastName: 'Spencer'},
        {firstName: 'Jamie',   lastName: 'Avins'},
        {firstName: 'Aaron',   lastName: 'Conran'},
        {firstName: 'Dave',    lastName: 'Kaneda'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Jay',     lastName: 'Robinson'}
    ]
});

Ext.onReady(function() {
    var list = new Ext.List({
        fullscreen: true,
        itemTpl : '{firstName} {lastName}',
        grouped : true,
        indexBar: true,
        store: store,
        listeners: {  // here you can add itemtap event and retrieve index number!
            itemtap:function(item,index, e){

                console.log(index);
                //so, now that you have index , you can access specific item
                console.log(this.store.data.items[index]);      
        }   
    },
    });

    list.show();

    console.log(list.getStore().data.items[0]); 
    // here you are accessing list store and then store data and then store item with index 0
});

How to access Sencha touch List Row index, retrieve value, and apply changes?

1 Answers