sencha touch dataview 中添加 button 等复杂布局并添加监听事件

config 中的属性默认都会自动生成 getter setter applier updater 四个方法。

applier 在调用 setter 时被调用， updater 在属性值被改变时调用

Ext.application({
launch: function () {

// DataItem 相当与 list 中的一行 (row)
// 对应 store 中的一条数据
// 相当于 适配器
Ext.define('MyListItem', {
extend: 'Ext.dataview.component.DataItem',
requires: ['Ext.Button'],
xtype: 'mylistitem',

config: {
// 水平布局
layout: 'hbox',

// 每行有一个 panel 和 两个 button
employeeName: true,
callButton: true,
smsButton: true,

defaults: {
// padding:10
margin: 5
},
// 当控件实例化时可调用一个方法初始化
// 在这里将 view 与 data 关联起来
dataMap: {
getEmployeeName: {
setHtml: 'name'
},
getCallButton: {
// setText: 'name'
},
getSmsButton: {
// setText: 'name'
}
}
},

// apply 时实例化该控件
applyEmployeeName: function (config) {
return Ext.factory({flex: 1}, Ext.Panel, this.getEmployeeName());
},
applyCallButton: function (config) {
return Ext.factory({text: '打电话'}, Ext.Button, this.getCallButton());
},
applySmsButton: function (config) {
return Ext.factory({text: '发短信'}, Ext.Button, this.getSmsButton());
},

updateEmployeeName: function (newEmployeeName, oldEmployeeName) {
if (oldEmployeeName) {
this.remove(oldEmployeeName);
}

if (newEmployeeName) {
this.add(newEmployeeName);
}
},

updateCallButton: function (newcallButton, oldcallButton) {
if (oldcallButton) {
this.remove(oldcallButton);
}

if (newcallButton) {
// update 时绑定一个  tap  事件
newcallButton.on('tap', this.oncallButtonTap, this);

this.add(newcallButton);
}
},

updateSmsButton: function (newsmsButton, oldsmsButton) {
if (oldsmsButton) {
this.remove(oldsmsButton);
}

if (newsmsButton) {
newsmsButton.on('tap', this.onsmsButtonTap, this);

this.add(newsmsButton);
}
},

oncallButtonTap: function (button, e) {
var record = this.getRecord();

Ext.Msg.alert(
'Hello',
record.get('name')
);
},

onsmsButtonTap: function (button, e) {
var record = this.getRecord();

Ext.Msg.alert(
'Hello',
record.get('name')
);
}
});

Ext.create('Ext.DataView', {
fullscreen: true,

store: {
fields: ['name'],
data: [
{name: 'Leslie'},
{name: 'Allan'},
{name: 'Caitlin'},
{name: 'Peter'}
]
},
// 必须设置
useComponents: true,
// 指定每一行的布局
defaultType: 'mylistitem'
});

}
});