web-dev-qa-db-fra.com

Comment je peux créer un menu contextuel pour la grille d'extjs

Je peux créer un menu contextuel pour tree et attacher à l'événement 'contextmenu'. Code:

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

Mais comment puis-je créer un menu contextuel pour les éléments de la grille?

extjsgridcontextmenu
20
edtsech

Définissez d'abord votre menu contextuel 

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

Créez ensuite un écouteur pour l'événement souhaité. Il est très important de vous rappeler d'arrêter le comportement par défaut de l'événement pour pouvoir le remplacer par le vôtre. Si vous n'appelez pas la méthode event.stopEvent () pour arrêter l'événement, le menu contextuel par défaut du navigateur apparaîtra quoi que vous fassiez. 

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

Eh bien, selon ce que vous souhaitez faire, vous pouvez gérer les événements GridPanel suivants de la même manière que votre exemple: contextmenu , cellcontextmenu , contient contenu du menu contextuel , groupcontextmenu , headercontextmenu , rowbodycontextmenu ou rowcontextmenu .

7
Brian Moeskau

Pour extjs4, ajoutez ceci dans votre grille:

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

Avec le même contexte de menu que Alan fourni ci-dessus.

4
jaycode

il faut ajouter cette propriété dans votre grille par exemple: 

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. Créer un fichier de contrôleur

  2. Créer un fichier de vue

        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