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

问题描述

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

In ExtJS 4, I have a grid that contains an action column. Whenever that action is triggered, I want to execute "my action".

没有MVC，它看起来像这样:

Without MVC, this would look like this:

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

现在，我想介绍一下View-Controller分离.因此，我必须将处理程序从视图"移动到控制器".

Now I want to introduce the View-Controller separation. So I have to move the handler from the View to the Controller.

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

But how does the controller register its method to the action column? Looking at the ExtJS 4.1 actioncolumn docs, I can't find any event I could listen to. I also can't find a method to set the action column's handler afterwards.

那么在使用动作列时如何实现干净的View-Controller分隔?

So how can I achieve a clean View-Controller separation when using an actioncolumn?

动作列是否尚未准备好用于MVC?

Are actioncolumns not yet ready for MVC?

推荐答案

问题不是在actioncolumn中，而是在不是ExtJs小部件的项目中.这些项目是简单的图像.这就是为什么我们不能在控件这样:

The problem is not in actioncolumn but in its items which are not ExtJs Widgets. This items are simple images. That's why we cannot assign handlers in control in such a way:

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

但是，这将是最好的方法.

This way, however, would be the best one.

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

Unfortunately this way is impossible. But There is another way, which is almost as clean as the preferred one: make actioncolumn handler to fire grid's custom event (created by you):

// 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
        }
    });
},

示例

这里是演示.

这篇关于当使用"actioncolumn"时如何执行视图-控制器分离. (Ext.grid.column.Action)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！