Làm cách nào để thêm nút vào mỗi hàng trong danh sách?

Question

Làm cách nào để thêm nút Sencha vào mỗi hàng trong danh sách? Tôi đã thêm văn bản trình giữ chỗ vào hình ảnh để minh họa vị trí các nút nên đi.

 
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

này không thể được thực hiện với Ext.List, bạn phải sử dụng ComponentView để thay thế.

Nó có một số khái niệm then chốt: Ext.dataview.Component.DataItem, cấu hình tùy chỉnh và chuyển đổi qua Ext.factory(), để biết thêm chi tiết xin vui lòng xem này:

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

Hy vọng nó giúp.

Answer 2

Thay cho nút, chúng tôi có thể sử dụng hình ảnh trong mỗi hàng trong danh sách và nhận sự kiện nhấp trong trình nghe (trong trường hợp của tôi tôi đã làm trong lớp điều khiển). Tôi hy vọng sau đây sẽ giúp bạn:

Một danh sách có chứa trang xem:

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

Trong điều khiển 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); 
}