CODEWITHSUNDEEP
sencha-touchsencha-touch-2
occasl
occasl

Reputation: 5454

Sencha Touch 2.0 Multiple List Item Buttons

Does anyone know if it is possible to have multiple icon buttons on a Sencha Touch list item that listen to different events? If so, how can I accomplish this?

For instance, say I have a list of people and there's an icon for email, phone and a map to their location for each person. I want to show 3 small icons and be able to map each icon to do 3 separate actions.

Upvotes: 0

Views: 2259

Answers (2)

hs3180
hs3180

Reputation: 198

Component DataView may help you. You can see this [guide]: http://docs.sencha.com/touch/2-0/#!/guide/dataview-section-4

I have wrote a [demo]: https://github.com/hs3180/Sencha-Touch-Component-DataView , in app/view/,

  • Main.js, a dataview component with useComponets true, and set defaultType to 'demo.view.Item'.
  • Item.js, a DataItem, the visible content of each item is a panel ( in Card.js ). I use datamap to link name in record ( within store ) to userName ( in demo.view.Card ).
  • Card.js, a Panel for each person. A user name title and 3 buttons.

Upvotes: 0

rdougan
rdougan

Reputation: 7225

This depends on how you are creating your buttons.

If the buttons are simple HTML using itemTpl, you can just listen to the itemtap event on List and use the event argument to detect which button you pressed. You could do this via a custom attribute or even a className:

myListItemTapListener: function(list, index, target, e) {
    var el = Ext.get(e.getTarget());
    if (el.hasClass('map')) {
        this.navigate(index);
    } else if(el.hasClass('email')) {
        this.email(index);
    } else if(el.hasClass('phone')) {
        this.phone(index);
    }
}

If your buttons are actual Ext.Button's inside a component List, you can simply add a listener onto each button when you create the component. There is an example of how to do this in the DataView Guide in the Sencha Docs.

Upvotes: 2

Related Questions