Jak wywołać akcję kontrolera z siatki akcji kolumny

Question

Mam kolumnę akcji w mojej sieci, która jest potrzebna do wykonania wielu niebanalnych operacji po kliknięciu na nią. Nie chcę używać metody obsługi tylko w celu uniknięcia obłudy w moim kodzie. Chcę obsłużyć zdarzenie click z metody kontrolera, które można wywołać z większej ilości stron.

Oto moja definicja kolumnie Działanie:

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

Ale teraz nie wiem jak napisać Component definicji zapytania utworzenia słuchacza.

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

Drugi sposób, jaki próbowałem to wywołanie metody kontrolera bezpośrednio z metody obsługi. Wygląda to tak:

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

Niestety nie jest obsługiwany sposób wywoływania metody kontrolera (nie zgłoszono wyjątku dla metody).

Ktoś może mi pomóc w konstruowaniu działającego zapytania Component, lub pokazać niektóre przykład sposobu wywoływania metody kontrolera z zewnątrz?

Answer 1

try actioncolumn # detailContactPerson

lub można listene do actioncolumn „s zdarzenie click

zobaczyć: 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 wolą z nich korzystać, aby zamiast AcionColumn

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

Answer 2

ja też chciał obsłużyć logiki dla actioncolumn w kontrolerze. Nie jestem pewien, czy to jest lepsze, czy gorsze niż po prostu użycie jednej z wymienionych wtyczek, ale w ten sposób udało mi się go uruchomić.

warte Uwaga:

• własnością id config w tablicy z actioncolumn items ma nic w ogóle, ikony będą nadal otrzymywać generowane id
• items NIE są komponenty, są po prostu img elementy
• możesz dodać id sam do actioncolumn, aby celować w konkretne wystąpienie kolumny akcji
• każda ikona (lub element w actioncolumn) otrzymuje klasę x-action-col-#, gdzie # jest indeksem rozpoczynającym się od 0.

Na przykład, w definicji kolumny mojej sieci mam:

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' 
     } 
    ] 

iw sterowniku:

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

Stosując tę ​​metodę, można umieścić wszystkie logiki dla danego kolumna akcji w kontrolerze.

Answer 3

Możesz także wykonać ten przykład: http://onephuong.wordpress.com/2011/09/15/data-grid-action-column-in-extjs-4/.

Answer 4

Mam lepszy sposób: dodać nowe zdarzenia na widoku, w którym znajdują się prezentuje 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') 

następnie na kontrolerze:

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

Answer 5

Oto sposób, aby uniknąć deklarowania obsługi (bez potrzeby korzystania addEvents, ExtJS 4.1.1):

Ext.grid.column.Action przesłanianie:

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

Akcja kolumna config:

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

Kontroler:

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