6

ExtJS 4 には、アクション列を含むグリッドがあります。そのアクションがトリガーされるたびに、「私のアクション」を実行したいと思います。

MVC がない場合、これは次のようになります。

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

ここで、View-Controller の分離について紹介したいと思います。したがって、ハンドラーをビューからコントローラーに移動する必要があります。

しかし、コントローラーはそのメソッドをアクション列にどのように登録するのでしょうか? ExtJS 4.1 actioncolumn docsを見ると、リッスンできるイベントが見つかりません。後でアクション列のハンドラーを設定する方法も見つかりません。

では、actioncolumn を使用するときに、View-Controller をきれいに分離するにはどうすればよいでしょうか?

actioncolumns はまだ 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この投稿では、グリッドに1種類のアイテムしかない場合、受け入れられた回答よりもさらに簡単な方法について説明します。

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

基本的には、コントローラーでactioncolumnのclickイベントをリッスンするだけです。actioncolumnただし、複数のタイプを区別する必要がある場合、これは機能しません。

于 2012-10-21T23:32:22.757 に答える