La façon de créer un menu personnalisé dans la fonction clic de souris événement en plein ExtJS 4 est peu différent avec une pré-version. Il semble en poste 4.0.2, ils ont changé nom de l'événement et de l'ordre des arguments.

Tout d'abord, nous allons voir comment nous créons le menu en Ext 3. Je reçois cet exemple à partir Aditia Rahman :

 var menu1 = new Ext.menu.Menu ({
     articles: [
         {
             texte: «J'aime Ext ',
             vérifié: true
         }, '-', {
             texte: "Ouvrir avec",
             menu: {
                 articles: [{
                     texte: «Notepad + +"
                 }, {
                     texte: «GIMP 2.0 '
                 }, {
                     texte: 'Firefox'
                 }]
             }
         }, '-', {
             texte: "Couper"
         }, {
             texte: "Copier"
         }, {
             texte: «Supprimer»
         }, '-', {
             texte: "Renommer"
         }
     ]
 });

Écrivons un DataView pour ajouter un écouteur.

 var = new datav Ext.DataView ({
     AutoScroll: true, magasin: magasin, tpl: tpl,
     autoHeight: false, hauteur: 250, multiSelect: true,
     classe supérieure: «x-vue-over ', itemSelector:« div.thumb-wrap',
     emptyText: «Pas d'images à afficher ',
     style: 'border: 1px solid # 99BBE8; »,
     auditeurs: {
         rendre: {
             fn: function () {
                  Ext.getBody (). Sur ("ContextMenu", Ext.emptyFn,
                     null, {preventDefault: true});
             }
         },
         contextmenu: {
             fn: la fonction (obj, index, noeud, event) {
                 x = event.browserEvent.clientX;
                 y = event.browserEvent.clientY;
                 menu1.showAt ([x, y]);
             }
         }
     }
 });

Lorsque la vue des données est rendue, elle la désactivation du clic droit par défaut de menus du navigateur Web, c'est ce qu'on appelle chez les auditeurs «rendre» l'événement et "contexmenu« événement est destiné à détecter le droit événement clic de souris, de capturer la position du curseur de la souris et l'affichage du menu.

Il est facile non? Maintenant, nous allons faire un menu clic droit dans extjs 4 MVC.

1. Ajout d'un menu en "app / view / MenuRight.js 'affichage des dossiers

 Ext.define («PG.view.MenuRight ', {
         étendre: «Ext.menu.Menu»,

	 articles: [
		 {
			 texte: «J'aime Ext ',
			 vérifié: true
		 }, '-', {
			 texte: "Ouvrir avec",
			 menu: {
				 articles: [{
					 texte: «Notepad + +"
				 }, {
					 texte: «GIMP 2.0 '
				 }, {
					 texte: 'Firefox'
				 }]
			 }
		 }, '-', {
			 texte: "Couper"
		 }, {
			 texte: "Copier"
		 }, {
			 texte: «Supprimer»
		 }, '-', {
			 texte: "Renommer"
		 }
	 ]
 });

2. Ajout d'un écouteur dans le fichier de commande

 init: function () {
	 this.control ({
		 «Alias_name_here ': {
			 render: function () {
				  Ext.getBody () sur ("ContextMenu", Ext.emptyFn, null, {preventDefault: true}).;
			 },
			 itemcontextmenu: function (grille, record, point, indice, événement) {
				 x = event.browserEvent.clientX;
				 y = event.browserEvent.clientY;
				 var menu = nouvelle PG.view.MenuRight ();
				 menu.showAt ([x, y]);

				 / *
				 / / Si vous voulez créer un menu ici au lieu d'ajouter
                                 / / Menu dans le dossier de la vue, vous pouvez utiliser le code suivant
                                 event.stopEvent ();
				 var menu = Ext.create ('Ext.menu.Menu', {
					 articles: [{
						 texte: «Afficher le nom»,
						 gestionnaire: function () {
							 alert (record.get ('name'));
						 }
					 }, {
						 texte: «Afficher ID»,
						 gestionnaire: function () {
							 alert (record.get ('user_id'));
						 }
					 }]
				 });
				 menu.showAt (event.xy);
				 * /

			 }
		 },
	 });