如何从网格动作栏调用控制器的动作

Question

我在网格中有一个动作列，点击它后需要执行很多非平凡的操作。我不想只使用处理程序方法来避免我的代码中出现重复。我想处理可以从多方调用的控制器方法的click事件。

这里是我的行动列的定义：

   { 
        header: translator.translate('actions'), 
        xtype: 'actioncolumn', 
        width: 50, 
        items:[{ 
         id  : 'detailContactPerson', 
         icon : '/resources/images/pencil.png', 
         tooltip: translator.translate('show_detail') 
        }] 
       }, 

但现在我不知道怎么写组件查询定义设置监听器。

init: function() { 
    this.control({ 
     'detailContactPerson': { 
      click: function(obj) { 
       var contactPerson = obj.up('container').contactPerson; 
       this.detail(contactPerson); 
      } 
     }, 

我试过的第二种方法是直接从处理程序方法调用控制器的方法。它看起来像这样：

    { 
        header: translator.translate('actions'), 
        xtype: 'actioncolumn', 
        width: 50, 
        items:[{ 
         id  : 'detailContactPerson', 
         icon : '/resources/images/pencil.png', 
         handler: function(contactPerson){ 
          Project.controller.contactPerson.detail(contactPerson); 
         }, 
         tooltip: translator.translate('show_detail') 
        } 

但不幸的是它不支持调用控制器方法（没有方法异常引发）的方式。

可能somone帮助我构建工作组件查询，或显示一些exapmle如何从外部调用控制器方法？

Answer 1

尝试actioncolumn＃detailContactPerson

，或者你可以listene到actioncolumn的单击事件

看到这一点：http://www.sencha.com/forum/showthread.php?131299-FIXED-EXTJSIV-1767-B3-ActionColumn-bug-and-issues

init: function() { 
     this.control({ 
      'contact button[action=add]':{ 
       click: this.addRecord 
      }, 
      'contact button[action=delete]':{ 
       click: function(){this.deleteRecord()} 
      }, 
      'contact actioncolumn':{ 
       click: this.onAction 
      } 
     }); 
    }, 
    onAction: function(view,cell,row,col,e){ 
     //console.log(this.getActioncolumn(),arguments, e.getTarget()) 
     var m = e.getTarget().className.match(/\bicon-(\w+)\b/) 
     if(m){ 
      //选择该列 
      this.getGrid().getView().getSelectionModel().select(row,false) 
      switch(m[1]){ 
       case 'edit': 
        this.getGrid().getPlugin('rowediting').startEdit({colIdx:col,rowIdx:row}) 
        break; 
       case 'delete': 
        var record = this.getGrid().store.getAt(row) 
        this.deleteRecord([record]) 
        break; 
      } 
     } 
    } 

BTW.I喜欢用这些来代替AcionColumn

• Ext.ux.grid.column.ActionButtonColumn
• Ext.ux.grid.RowActions

Answer 2

我也想处理的控制器为actioncolumn逻辑。我不确定这是否比单纯使用其他插件中的其中一个更好或更差，但是这就是我能够使其工作的原因。

注意事项：

• 的items阵列的actioncolumn 在id配置属性不会什么都没有，图标仍然会收到一个产生id
• 的items不是组件，它们是只需img元素
• 您可以将id添加到actioncolumn本身以针对动作列的特定实例
• 每个图标（或actioncolumn中的项目）都被赋予一个x-action-col-#的类别，其中＃是一个以0开头的索引。

例如，在我的网格的列的定义，我有：

header: 'ACTION', 
    xtype: 'actioncolumn', 
    id: 'myActionId', 
    width: 50, 
    items: [{ 
     icon: 'resources/icons/doThisIcon.png', 
     tooltip: 'Do THIS' 
     },{ 
     icon: 'resources/icons/doThatIcon.png', 
     tooltip: 'Do THAT' 
     } 
    ] 

，并在控制器：

init: function(){ 
    this.control({ 
     'actioncolumn#myActionId': { 
      click: function(grid,cell,row,col,e){ 
       var rec = grid.getStore().getAt(row); 
       var action = e.target.getAttribute('class'); 
       if (action.indexOf("x-action-col-0") != -1) { 
        console.log('You chose to do THIS to ' + rec.get('id')); //where id is the name of a dataIndex 
       } 
       else if (action.indexOf("x-action-col-1") != -1) { 
        console.log('You chose to do THAT to ' + rec.get('id')); 
       } 
      } 
     } 
    } 

使用这种方法，你可以把所有的逻辑对于任何给定控制器中的操作列。

Answer 3

你也可以按照这个例子http://onephuong.wordpress.com/2011/09/15/data-grid-action-column-in-extjs-4/。

Answer 4

我有更好的办法：在你看来这里是添加新的事件呈现actioncolumns：

{ 
       xtype:'actioncolumn', 
       align:'center', 
       items:[ 
        { 
         tooltip:'info', 
         handler:function (grid, rowIndex, colIndex) { 
          var rec = grid.getStore().getAt(rowIndex); 
          //this is the view now 
          this.fireEvent('edit', this, rec); 
         }, 
         scope:me 
        }, 
    .... 
    me.callParent(arguments); 
    me.addEvents('edit') 

那么你的控制器上：

..... 
this.control({ 
     'cmp_elenco':{ 
       'edit':function(view,record){//your operations here} 
.... 

Answer 5

这里是为了避免宣布处理方式（不需要使用addEvents，ExtJS 4.1.1）：

Ext.grid.column.Action覆盖：

Ext.grid.column.Action.override({ 
    constructor: function() { 
     this.callParent(arguments); 
     Ext.each(this.items, function() { 
      var handler; 
      if (this.action) { 
       handler = this.handler; // save configured handler 
       this.handler = function (view, rowIdx, colIdx, item, e, record) { 
        view.up('grid').fireEvent(item.action, record); 
        handler && handler.apply(this, arguments); 
       }; 
      } 
     }); 
    } 
}); 

操作列配置：

{ 
    xtype: 'actioncolumn', 
    items: [{ 
     icon: 'edit.png', 
     action: 'edit' 
    }] 
} 

控制器：

this.control({ 
    'grid': { 
     edit: function (record) {} 
    } 
});