CODEWITHSUNDEEP
javascriptextjssencha-touchsencha-touch-2
Niklas
Niklas

Reputation: 25391

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');
    }
}

Upvotes: 2

Views: 1627

Answers (2)

Akshay
Akshay

Reputation: 373

Just an alternative on facing the same issue as above,i have went ahead and grab the classes of Button Component from DOM, and applied to my button.

   <input type="button" value="Add" class="x-button-action x-button"
    style="display: inline;margin: 1.5em;border: #a6a6a6;"/>

In here, i have taken UI classes from sencha touch like x-button-action and x-button as well as added custom style inline(not a good idea though).

Hope it helps !!

Upvotes: 0

Nico Grunfeld
Nico Grunfeld

Reputation: 1133

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.

Upvotes: 2

Related Questions