Question

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

以下是我对行动栏的定义：

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

但不幸的是，不支持调用控制器方法的方法（没有引发方法异常）。

可以帮助我构建工作组件查询，或者显示一些如何从外部调用控制器方法的问题吗？

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

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}
 ....

Answer 3

我也想在控制器中处理actioncolumn的逻辑。我不确定这是否比简单地使用其中一个提到的插件更好或更差，但这是我能够让它工作的方式。

注意事项：

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

使用此方法，您可以将任何给定操作列的所有逻辑放在控制器中。

Answer 4

这是一种避免声明处理程序的方法（不需要使用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) {}
    }
});

Answer 5

您也可以按照此示例http://onephuong.wordpress.com/2011/09/15/data-grid-action-column-in-extjs-4/。

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

5 个答案: