ExtJS网格:处理操作列';s单击控制器中的事件
我有一个“员工列表”视图。里面有一个网格。我需要从控制器处理actioncolumn的click事件。以下是视图:ExtJS网格:处理操作列';s单击控制器中的事件,extjs,extjs4.2,Extjs,Extjs4.2,我有一个“员工列表”视图。里面有一个网格。我需要从控制器处理actioncolumn的click事件。以下是视图: Ext.define('ExtApp.view.Employees', { extend: 'Ext.panel.Panel', alias: 'widget.employees', . . . . . }); 此视图包含一个网格: xtype: 'grid', columns:[{ . . . . xtype: 'actioncolumn',
Ext.define('ExtApp.view.Employees', {
extend: 'Ext.panel.Panel',
alias: 'widget.employees',
.
.
.
.
.
});
此视图包含一个网格:
xtype: 'grid',
columns:[{
.
.
.
.
xtype: 'actioncolumn',
text: 'Delete',
width: 100,
items: [{
icon: 'images/deleteEmployee.jpg',
tooltip: 'Delete'
}]
}]
如何在控制器中处理actioncolumn的click事件
以下是控制器的代码:
Ext.define('ExtApp.controller.Employees', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'employees',
selector: 'employees'
}],
init: function () {
//reference for the grid's actioncolumn needed here
}
});
如果您想用控制器处理点击,您必须向actioncolumn添加一个处理程序,如下所示:
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(view, rowIndex, colIndex, item, e, record, row) {
this.fireEvent('itemClick', view, rowIndex, colIndex, item, e, record, row, 'edit');
}
}]
然后在控制器中为itemClick事件添加事件处理程序
init: function() {
this.control({
'actioncolumn': {
itemClick: this.onActionColumnItemClick
}
});
},
onActionColumnItemClick : function(view, rowIndex, colIndex, item, e, record, row, action) {
alert(action + " user " + record.get('firstname'));
}
你应该看到它在工作,在这里拉小提琴: