सूची के प्रत्येक पंक्ति में एक बटन कैसे जोड़ें?

Question

मैं सूची की प्रत्येक पंक्ति में एक सेन्चा बटन कैसे जोड़ सकता हूं? मैंने चित्र में प्लेसहोल्डर्स को चित्रित किया है ताकि यह चित्रित किया जा सके कि बटन कहां जाना चाहिए।

 
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

यह Ext.List के साथ नहीं किया जा सकता है, आप के बजाय ComponentView उपयोग करना होगा। Ext.dataview.Component.DataItem, कस्टम विन्यास और परिवर्तन Ext.factory() के माध्यम से, अधिक जानकारी के लिए कृपया इस देखें::

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

आशा है कि यह मदद करता है

यह कुछ महत्वपूर्ण अवधारणाओं है।

Answer 2

बटन के स्थान पर हम सूची की प्रत्येक पंक्ति में छवि का उपयोग कर सकते हैं और श्रोता में क्लिक ईवेंट प्राप्त कर सकते हैं (मेरे मामले में मैंने नियंत्रक वर्ग में किया था)। मैं आपकी मदद करेगा निम्नलिखित उम्मीद:

एक सूची से युक्त दृश्य पेज:

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

नियंत्रक classs में: http:

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