How to add a button to each line of the list?

Question

How to add a Sencha button to each line of the list? I added text placeholders in the image to illustrate where the buttons should go.

  Ext.application ({
     launch: function () {
         var view = Ext.Viewport.add ({
             xtype: 'navigationview',

             items: [
                 {
                     xtype: 'list',
                     title: 'List',
                     itemTpl: '{name} [BUTTON]',

                     store: {
                         fields: ['name'],
                         data: [
                             {name: 'one'},
                             {name: 'two'},
                             {name: 'three'}
                         ]
                     },

                     listeners: {
                         itemtap: function (list, index, target, record) {
                             view.push ({
                                 xtype: 'panel',
                                 title: record.get ('name'),
                                 html: 'This is my pushed view!'
                             })
                         }
                     }
                 }
             ]
         });
     }
 });

Answer 1

This cannot be done with Ext.List , you should use a ComponentView instead.

It has several key concepts: Ext.dataview.Component.DataItem , custom configuration and conversion through Ext.factory() , for more information see this:

http://docs.sencha.com/touch/2-0/#!/guide/dataview

Hope this helps.

Answer 2

Instead of Button, we can use Image in each line of the list and get the click event in the listener (in my case, I did this in the controller class). I hope the following helps you:

List containing the browse page:

 items: [ { xtype: 'list', ui: 'normal', itemTpl: [ '<div class="x-list-item speaker">', '<div class="avatar" style="background-image: url(resources/images/contactImages/{item6});"></div>', '<div class="rightarrow" style="background-image: url(resources/images/homeScreenIphone/list_arrow.png);"></div>', '<div class="image_popup_email" style="background-image: url(resources/images/commonImages/mail.png);"></div>', '<div class="image_popup_workphone_icon" style="background-image: url(resources/images/commonImages/workphone_icon.png);"></div>', '<div class="image_popup_phone" style="background-image: url(resources/images/commonImages/phone.png);"></div>', '<h3>{item1}</h3>', '<h4>{item2}</h4>', '</div>' ], store: 'ContactItemListStore' } ] 

In controller classes:

 onContactSelect: function(list, index, element, record, evt){ // if click on any icon(Cell/Work Phone/Email) in any row of list if(evt.getTarget('.image_popup_phone')) { var contactNoCell = record.getData().item4; window.location.href = "tel:"+contactNoCell; }else if(evt.getTarget('.image_popup_workphone_icon')) { var contactNoOffice = record.getData().item7; window.location.href = "tel:"+contactNoOffice; }else if(evt.getTarget('.image_popup_email')) { var emailId = record.getData().item5; window.location.href = "mailto:"+emailId; }else{ // if click on list row only(not any icon) if (!this.showContactDetail) { this.showContactDetail = Ext.create('MyApp.view.phone.MyContactDetail'); } // Bind the record onto the show contact view this.showContactDetail.setRecord(record); // Push the show contact view into the navigation view this.getMain().push(this.showContactDetail); } //disable selection while select row in list list.setDisableSelection(true); }