Как добавить кнопку в каждую строку списка?

Question

Как я могу добавить кнопку Sencha в каждую строку списка? Я добавил текстовые заполнители на изображении, чтобы проиллюстрировать, куда должны идти кнопки.

Ext.application ({launch: function () {var view = Ext.Viewport.add ({xtype: 'navigationview', items: [{xtype: 'list', title: 'List', itemTpl: '{name} [ КНОПКА]',

                    store: {
                        fields: ['name'], данные: [
                            { name: 'one' },
                            { name: 'two' },
                            { name: 'three' }
                        ]
                    }, слушатели: {
                        itemtap: function(список, индекс, цель, запись) {
                            view.push({
                                xtype: 'panel',
                                title: record.get('name'),
                                html: 'Это мой задний вид!'
                            })
                        }
                    }
                }
            ]
        });
    }
});

Answer 1

Это не может быть сделано с Ext.List, вы должны использовать ComponentView вместо.

У него есть несколько ключевых понятий: Ext.dataview.Component.DataItem, настраиваемая конфигурация и преобразование через Ext.factory(), для более подробной информации, пожалуйста, смотрите это:

http://docs.sencha.com/touch/2-0/

Надеюсь, поможет.

Answer 2

Вместо Button мы можем использовать Image в каждой строке списка и получать событие click в слушателе (в моем случае я делал это в классе контроллера). Я надеюсь, что следующее поможет вам:

Список, содержащий страницу просмотра:

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