web-dev-qa-db-ja.com

extjsグリッドのコンテキストメニューを作成する方法

ツリーのコンテキストメニューを作成し、 'contextmenu'イベントにアタッチできます。コード：

contextMenu = new Ext.menu.Menu({
  items: [{
    text: 'Edit',
    iconCls: 'edit',
    handler: edit
  },...]
})

Ext.getCmp('tree-panel').on('contextmenu', function(node) {
  contextMenu.show(node.ui.getAnchor());
})

しかし、グリッド要素のコンテキストメニューを作成するにはどうすればよいですか？

extjsgridcontextmenu
20
edtsech

最初にコンテキストメニューを定義します

mnuContext = new Ext.menu.Menu({
    items: [{
        id: 'do-something',
        text: 'Do something'
    }],
    listeners: {
        itemclick: function(item) {
            switch (item.id) {
                case 'do-something':
                    break;
            }
        }
    }
});

次に、目的のイベントのリスナーを作成します。イベントのデフォルトの動作を停止して、独自のイベントに置き換えることができるようにすることを忘れないでください。呼び出しを行わない場合は、 event.stopEvent（）メソッドを使用してイベントのバブリングを停止すると、ユーザーの操作に関係なく、ブラウザのデフォルトのコンテキストメニューが表示されます。

rowcontextmenu: function(grid, index, event){
     event.stopEvent();
     mnuContext.showAt(event.xy);
}
26
Alan McCune

まあ、何をしたいかに応じて、次のGridPanelイベントを例と同じ方法で処理できます： contextmen 、 cellcontextmen 、 containercontextmen 、 groupcontextmen 、 headercontextmen 、 rowbodycontextmen または rowcontextmen 。

7
Brian Moeskau

Extjs4の場合、これをグリッドに追加します。

listeners: {
  itemclick: function(view, record, item, index, e, options){
    menuContext.showAt(e.xy);
  }
}

上記のAlanと同じメニューコンテキスト。

4
jaycode

たとえば、このプロパティをグリッドに追加する必要があります。

viewConfig: {
            stripeRows: true,
            listeners: {
                itemcontextmenu: function(view, rec, node, index, e) {
                    e.stopEvent();
                    contextMenu.showAt(e.getXY());
                    return false;
                }
            }
        },
3
Rubén Fanjul Estrada
  1. コントローラファイルを作成する

  2. ビューファイルを作成する

        init : function() {
        this.control(

                   'countrylist' : {

                        itemcontextmenu : this.contextMenuBox

                    }
                });
        },

        contextMenuBox:function( view, record, item, index,  e, eOpts ){


if(record.data.status=='Y'){

var menu = Ext.create('Ext.menu.Menu',{
            items: [{
                        text: 'Do something'
                    }]
                    });
                    e.stopEvent();
                    menu.showAt(e.getXY());


        }
        else{
            var menu = Ext.create('Ext.menu.Menu',{
            items: [{
                        text: 'Don\'t'
                    }]
                    });
                    e.stopEvent();
                    menu.showAt(e.getXY());


        }

        },
0
aswininayak