Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call an action of controller from grids action column

Tags:

extjs

extjs4

I have an action column in my grid which is needed to perform lots of non-trivial operations after click on it. I don't want to use the handler method only to avoid duplicity in my code. I want to handle the click event from the controller method which can be called from more sides.

Here is my definition of action column:

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

But now I don't know how to write the Component query definition to set up listener.

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

Second way I've tried is to call the method of controller directly from handler method. It looks like this:

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

But unfortunately it isn't supported way to call controller method (No method exception raised).

Could someone help me to construct working Component query, or show some example how to call controller method from outside?

like image 623
elCarda Avatar asked Jul 08 '11 14:07

elCarda


1 Answers

try actioncolumn#detailContactPerson

or you can listene to actioncolumn 's click event

see this: 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 prefer to use these to instead of AcionColumn

  • Ext.ux.grid.column.ActionButtonColumn
  • Ext.ux.grid.RowActions
like image 86
atian25 Avatar answered Nov 03 '22 17:11

atian25