js如下:
Ext.define('app.view.message.Info', {
alternateClassName: 'messageInfo',
extend: 'Ext.Container',
xtype: 'messageInfo',
config: {
cls: 'info',
scrollable: {
direction: 'vertical',
directionLock: true,
indicators: false
},
tpl: new Ext.XTemplate(
'<div class="title tl">{Title}</div>',
'<div class="box sm"><div class="left">时间 {Time}</div><div>发布来源:{Auth}</div></div>',
'<div class="box"><div class="one"></div><div>',
'<div class="x-button btn"><span class="x-button-icon shareIco x-icon-mask" doit="11"></span></div>',
'<div class="x-button btn"><span class="x-button-icon favorites x-icon-mask"></span></div>',
'<div class="x-button btn"><span class="x-button-icon commentIco x-icon-mask"></span></div>',
'</div></div>',
'<div class="con">{Summary}</div>')
},
/*初始化*/
initialize: function () {
this.callParent();
//添加按钮监控
this.element.on({
tap: 'onBtnTab',//点击后激活方法
delegate: 'div.x-button', //这里是指div中class为x-button的对象
scope: this
});
},
onBtnTab: function (e, span) {
//获取所需参数
var name = span.getAttribute("doit");
console.log(name);
}
});
界面效果如图,其中的按钮是利用tpl来实现的
css布局略过