如何在列表的每一行添加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!' }) } } } ] }); } });
答案 0 :(得分:6)
使用Ext.List
无法做到这一点,您必须使用ComponentView
。
它有一些关键概念:Ext.dataview.Component.DataItem
,自定义配置和Ext.factory()
转换,有关详细信息,请参阅:
http://docs.sencha.com/touch/2-0/#!/guide/dataview
希望它有所帮助。
答案 1 :(得分:5)
代替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);
}