使用"actioncolumn"时如何执行视图 - 控制器分离(Ext.grid.column.Action)

Question

在ExtJS 4中,我有一个包含操作列的网格.每当触发该动作时,我想执行"我的动作".

没有MVC,这将是这样的:

        /* ... */
        {
            xtype: 'gridpanel',
            columns: [
                /* ... */
                {
                    xtype: 'actioncolumn',
                    items: [{
                        handler: function(grid, rowIndex, colIndex) {
                            // my action
                        }
                    }]
                }
            ]
        }

现在我想介绍View-Controller分离.所以我必须将处理程序从View移动到Controller.

但是控制器如何将其方法注册到操作列？看看ExtJS 4.1 actioncolumn文档,我找不到任何可以听的事件.我也找不到一个方法来设置动作列的处理程序.

那么在使用actioncolumn时如何实现干净的View-Controller分离？

动作列还没有为MVC做好准备吗？

Answer 1

问题不在于actioncolumn,而在于其不是ExtJs Widgets的项目.这个项目是简单的图像.这就是我们无法以这种方式控制处理程序的原因:

this.control({
    'mygrid actioncolumn button[type=edit]' : this.onEdit

然而,这种方式将是最好的方式.

不幸的是这种方式是不可能 但还有另一种方法,它几乎和首选方式一样干净:使用actioncolumn处理程序来触发网格的自定义事件(由您创建):

// view
{
    xtype: 'actioncolumn',
    items: [{
        icon: 'http://cdn.sencha.io/ext-4.1.0-gpl/examples/shared/icons/fam/cog_edit.png',
        tooltip: 'Edit',
        handler: function(grid, rowIndex, colIndex) {
            // fire custom event "itemeditbuttonclick"
            this.up('grid').fireEvent('itemeditbuttonclick', grid, rowIndex, colIndex);
        }},

// controller
init: function() {
    this.control({
        'viewport > testpanel': {
            itemeditbuttonclick: this.onEdit,
            itemdeletebuttonclick: this.onDelete
        }
    });
},

例

这是演示.