Cómo agregar un botón a cada fila de una lista?

Question

¿Cómo puedo agregar un botón Sencha a cada fila de una lista? Agregué marcadores de posición de texto en la imagen para ilustrar hacia dónde deberían ir los botones.

 
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

Esto no se puede hacer con Ext.List, usted tiene que utilizar ComponentView lugar.

Tiene algunos conceptos clave: Ext.dataview.Component.DataItem, configuración personalizada y la transformación a través de Ext.factory(), para más detalles, véase la siguiente:

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

espero que ayude.

Answer 2

En lugar del botón podemos usar la imagen en cada fila de la lista y obtener el evento de clic en el oyente (en mi caso lo hice en la clase de controlador). Espero siguiente le ayudará a:

una lista que contiene la página de visualización:

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' 
    } 
    ] 

En classs controlador:

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