ExtJS网格：在控制器中处理操作列的点击事件 [英] ExtJS grid: handling action column's click event in the controller

问题描述

我有一个视图'EmployeeList'。里面有一个网格。我需要处理来自控制器的actioncolumn的点击事件。这是以下视图：

  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屋！