Search code examples
javascriptextjssencha-touchsencha-touch-2

How to add sencha button to sencha list

How can I add a Sencha Touch Button to a Sencha Touch List with a item template?

I know, I can do something like this:

itemTpl: '{quantity} {productName} <input type="button" value="Delete" />',

but this button looks so weird and ugly and I want to have the button the same ui as the Sencha Button.

Deciding whether, you clicked the row or the button is working with this code:

config: {
    control: {
        'list[itemId="listItemId"]': {
            itemtap: 'yourFunction'
        }
    }
},

yourFunction: function(list, index, target, record, evt) {
    var type = evt.event.target.type || '';

    if(type == 'button') {
        console.warn('delete');
    }
}
Solution

  • You should probably use an Ext.dataview.DataView with useComponent: true. Then you could set the defaultType config to your own custom dataitem.

    Take a look at the 'Component DataView' in the dataview guide.