如何在列表的每一行添加一个按钮？

Question

如何向列表的每一行添加煎茶按钮？我添加了文字 图像中的占位符来说明按钮的位置。

分机应用程序（{ 启动：函数（）{ var view = Ext.Viewport.add({ xtype: '导航视图', 项目： [ { xtype：'列表'， 标题：'列表'， itemTpl: '{name} [BUTTON]', 店铺： { 字段：['名称']， 数据： [ {名称：'一个'}， {名称：'两个'}， {名称：'三个'} ] }, 听众：{ itemtap：函数（列表、索引、目标、记录）{ 视图.push({ xtype：'面板'， 标题：record.get('name'), html: '这是我推送的视图！' }) } } } ] }); } });

Answer 1

Ext.List 无法做到这一点，您必须改用ComponentView。

它有一些关键概念：Ext.dataview.Component.DataItem，通过Ext.factory()进行自定义配置和转换，更多详细信息请参见：

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

希望对你有帮助。

Answer 2

我们可以在列表的每一行中使用 Image 来代替 Button，并在侦听器中获取点击事件（在我的情况下，我在控制器类中做了）。希望以下内容对您有所帮助：

包含查看页面的列表：

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