Как выполнить разделение View-Controller при использовании столбца действий (Ext.grid.column.Action)

В ExtJS 4 у меня есть сетка, содержащая столбец действий. Всякий раз, когда это действие запускается, я хочу выполнить «моё действие».

Без MVC это выглядело бы так:

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

Теперь я хочу представить разделение View-Controller. Поэтому мне нужно переместить обработчик из представления в контроллер.

Но как контроллер регистрирует свой метод в столбце действий? Глядя на ExtJS 4.1 actioncolumn документы, я не могу найти ни одного события, которое я мог бы прослушать. Я также не могу найти способ впоследствии установить обработчик столбца действия.

Итак, как я могу добиться четкого разделения View-Controller при использовании столбца действий?

Колонки действий еще не готовы для MVC?


extjs4 extjs-mvc
person vog    schedule 03.10.2012    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Проблема не в столбце действий, а в его элементах, которые не являются виджетами ExtJs. Эти предметы являются простыми изображениями. Вот почему мы не можем назначать обработчики в control таким образом:

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

Пример

Вот демонстрация.

person Molecular Man    schedule 04.10.2012

arrow_upward
3
arrow_downward

Этот пост объясняет еще более простой метод, чем принятый ответ, если у вас есть только один тип элемента actioncolumn в вашей сетке:

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

В основном: просто слушайте событие actioncolumn click в вашем контроллере. Однако это не работает, если вам нужно различать несколько типов actioncolumn.

person cjauvin    schedule 21.10.2012
comment
Теперь (11.12.2014) сообщение Митча находится здесь: mitchellsimoens.com/actioncolumn-and-mvc - person ChrisLo; 11.12.2014