Wie füge ich eine Schaltfläche zu jeder Zeile einer Liste hinzu?

Question

Wie kann ich eine Sencha-Schaltfläche zu jeder Zeile einer Liste hinzufügen? Ich habe Text Platzhalter in das Bild hinzugefügt, um zu veranschaulichen, wohin die Schaltflächen gehen sollten.

 
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

Dies kann nicht mit Ext.List getan werden Sie stattdessen ComponentView verwenden.

Es hat einige Schlüsselbegriffe: Ext.dataview.Component.DataItem, kundenspezifische Konfiguration und Transformation durch Ext.factory(), um weitere Informationen bitte sehen:

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

Hoffe, es hilft.

Answer 2

Anstelle von Button können wir Bild in jeder Zeile der Liste verwenden und click-Ereignis in Listener erhalten (in meinem Fall habe ich in der Controller-Klasse). Ich hoffe folgenden wird Ihnen helfen:

eine Liste mit Ansichtsseite:

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 classs:

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