如何從網格動作欄調用控制器的動作

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) {} 
    } 
});