ExtJS网格:在控制器中处理操作列的点击事件 [英] ExtJS grid: handling action column's click event in the controller
问题描述
Ext.define('ExtApp.view.Employees',{
extends:'Ext .panel.Panel',
别名:'widget.employees',
。
。
。
。
。
});
此视图包含一个网格:
xtype:'grid',
列:[{
。
。
。
。
xtype:'actioncolumn',
text:'Delete',
width:100,
items:[{
icon:'images / deleteEmployee.jpg'
工具提示:'删除'
}]
}]
如何处理我的控制器中的actioncolumn的点击事件?
这是控制器的代码:
Ext.define('ExtApp.controller.Employees',{
extends:'Ext.app.Controller',
refs:[{
ref:'employees ',
selector:'employees'
}],
init:function(){
//这里需要网格的actioncolumn的引用
}
});
如果您想处理控制器的点击,将必须添加一个处理程序到你的actioncolumn像这样:
xtype:'actioncolumn',
width:
项目:[{
图标:'extjs / examples / shared / icons / fam / cog_edit.png',//在图标中使用一个URL
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' ));
}
你应该看到它正常工作,在这里提起: https://fiddle.sencha.com/#fiddle/grb
I have a view 'EmployeeList'. Inside it there is a grid. I need to handle the actioncolumn's click event from controller. Here is the view:
Ext.define('ExtApp.view.Employees', {
extend: 'Ext.panel.Panel',
alias: 'widget.employees',
.
.
.
.
.
});
This view contains a grid:
xtype: 'grid',
columns:[{
.
.
.
.
xtype: 'actioncolumn',
text: 'Delete',
width: 100,
items: [{
icon: 'images/deleteEmployee.jpg',
tooltip: 'Delete'
}]
}]
How do I handle the actioncolumn's click event in my controller?
Here is the controller's code:
Ext.define('ExtApp.controller.Employees', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'employees',
selector: 'employees'
}],
init: function () {
//reference for the grid's actioncolumn needed here
}
});
If you wanna handle the clicks with your controller, you will have to add a handler to your actioncolumn like this:
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');
}
}]
And then add event handler in your controller for the itemClick event
init: function() {
this.control({
'actioncolumn': {
itemClick: this.onActionColumnItemClick
}
});
},
onActionColumnItemClick : function(view, rowIndex, colIndex, item, e, record, row, action) {
alert(action + " user " + record.get('firstname'));
}
And you should see it working, fiddle here: https://fiddle.sencha.com/#fiddle/grb
这篇关于ExtJS网格:在控制器中处理操作列的点击事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!