リストの各行にボタンを追加する方法は？

Question

リストの各行にSenchaボタンを追加するにはどうすればよいですか？私はボタンをどこに置くべきかを説明するために、テキストにプレースホルダを追加しました。

 
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.factory()てExt.dataview.Component.DataItem、カスタム設定と変換、これを参照してください：

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

はそれが役に立てば幸い

は、これは、いくつかの重要な概念を持っています。

Answer 2

Buttonの代わりに、リストの各行にImageを使用し、リスナーでclickイベントを取得することができます（私の場合はコントローラクラスで行いました）。私は、次はあなたを助けることを願っています：

ビューページ含むリスト：コントローラclasssで

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

を：

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