6

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

如果没有 MVC，这将如下所示：

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

现在我要介绍View-Controller分离。所以我必须将处理程序从视图移动到控制器。

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

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

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

4

2 回答 2

10

问题不在于 actioncolumn，而在于其不是 ExtJs 小部件的项目。这些项目是简单的图像。这就是为什么我们不能以这种方式分配控制的处理程序：

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

例子

这是演示。

于 2012-10-04T07:06:24.593 回答
3

actioncolumn如果您的网格中只有一种类型的项目，这篇文章解释了一种比接受的答案更简单的方法：

http://mitchellsimoens.com/actioncolumn-and-mvc/

基本上：只需在控制器中监听actioncolumn'click事件。actioncolumn但是，如果您需要区分多种类型，这将不起作用。

于 2012-10-21T23:32:22.757 回答