Как вызвать действие контроллера из столбца действий сетки - PullRequest
Новая
       4

Как вызвать действие контроллера из столбца действий сетки

9 голосов
/ 08 июля 2011

В моей сетке есть столбец действий, который необходим для выполнения множества нетривиальных операций после нажатия на него. Я не хочу использовать метод обработчика только для того, чтобы избежать дублирования в моем коде. Я хочу обработать событие 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')
                    }

Но, к сожалению, не поддерживается способ вызова метода контроллера (исключение метода не возникло).

Может ли кто-то помочь мне сконструировать рабочий запрос Компонента или показать пример того, как вызывать метод контроллера извне?

Ответы [ 5 ]

10 голосов
/ 09 июля 2011

попробуйте actioncolumn # detailContactPerson

или вы можете прослушать событие щелчка 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;
            }
        }
    }

Кстати. Я предпочитаю использоватьвместо AcionColumn

8 голосов
/ 12 декабря 2011

У меня есть лучший способ: добавить новые события на ваш вид, где представлены столбцы действий: 

    {
                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}
 ....
4 голосов
/ 06 августа 2011

Я тоже хотел обработать логику для actioncolumn в контроллере. Я не уверен, лучше это или хуже, чем просто использовать один из других упомянутых плагинов, однако именно так я смог заставить его работать.

На что обратить внимание:

  • свойство id config в массиве items actioncolumn вообще ничего не делает, значки все равно будут получать сгенерированный id
  • items НЕ являются компонентами, они просто элементы img
  • Вы можете добавить id к самому actioncolumn, чтобы указать конкретный экземпляр 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'));
               }
           }
        }
    }

Используя этот метод, вы можете поместить всю логику для любого заданного столбца действия в контроллере.

1 голос
/ 18 июля 2013

Вот способ избежать объявления обработчика (не нужно использовать 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) {}
    }
});
0 голосов
/ 26 октября 2011

Вы также можете следовать этому примеру http://onephuong.wordpress.com/2011/09/15/data-grid-action-column-in-extjs-4/.

...