如何从网格操作列调用控制器的操作

Question

我的网格中有一个动作列,需要在点击它之后执行许多非平凡的操作.我不想仅使用处理程序方法来避免代码中的重复.我想从控制器方法处理click事件,可以从更多方面调用.

这是我对action列的定义:

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

但是现在我不知道如何编写Component查询定义来设置监听器.

 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帮我构建工作组件查询,或者显示一些如何从外部调用控制器方法的问题？

Answer 1

尝试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

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

Answer 2

我有一个更好的方法:在您的视图上添加新事件,其中显示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}
 ....