Question

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?

Answer 1

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