De manier om een eigen menu in de muis rechts klikken gebeurtenis functie in ExtJS 4 te maken is iets anders met pre-versie. Het lijkt in Ext 4.0.2 ze bij naam en argumenten te veranderen.

Laten we eerst eens kijken hoe we het menu te maken in Ext 3. Ik krijg dit voorbeeld uit aditia Rahman :

 var menu1 = new Ext.menu.Menu ({
     items: [
         {
             tekst: 'Ik hou van EXT',
             gecontroleerd: true
         }, '-', {
             tekst: 'Openen met',
             menu: {
                 items: [{
                     tekst: 'Notepad + +'
                 }, {
                     tekst: 'GIMP 2.0'
                 }, {
                     tekst: 'Firefox'
                 }]
             }
         }, '-', {
             tekst: 'Cut'
         }, {
             tekst: 'Kopiëren'
         }, {
             tekst: 'Verwijderen'
         }, '-', {
             tekst: 'Naam wijzigen'
         }
     ]
 });

We beginnen met een DataView om een ​​luisteraar toe te voegen.

 var datav = new Ext.DataView ({
     autoscroll: true, op te slaan: winkel, TPL: TPL,
     autoHeight: false, hoogte: 250, multiselect: true,
     bovenklasse: 'x-view-over', itemSelector: 'div.thumb-wrap',
     emptyText: 'Er zijn geen afbeeldingen om weer te geven',
     stijl: 'border: 1px solid # 99BBE8; ",
     luisteraars: {
         maken: {
             fn: function () {
                  Ext.getBody (). Op ("contextmenu", Ext.emptyFn,
                     null, {preventDefault: true});
             }
         }
         contextmenu: {
             fn: function (obj, index, knoop, event) {
                 x = event.browserEvent.clientX;
                 y = event.browserEvent.clientY;
                 menu1.showAt ([x, y]);
             }
         }
     }
 });

Wanneer de gegevensweergave wordt weergegeven is de standaard uit te schakelen klik met de rechtermuisknop web browser menu, dit heet in de luisteraars "maken" event en "contexmenu" evenement is voor het opsporen van rechts klikken muisgebeurtenis, vast te leggen met de muis cursor positie en de weergave van het menu.

Het is makkelijk toch? Laten we nu eens een rechtermuisknop-menu in ExtJs 4 MVC.

1. toe te voegen menu in 'app / view / MenuRight.js' Mapweergave

 Ext.define (PG.view.MenuRight ', {
         uit te breiden: 'Ext.menu.Menu',

	 items: [
		 {
			 tekst: 'Ik hou van EXT',
			 gecontroleerd: true
		 }, '-', {
			 tekst: 'Openen met',
			 menu: {
				 items: [{
					 tekst: 'Notepad + +'
				 }, {
					 tekst: 'GIMP 2.0'
				 }, {
					 tekst: 'Firefox'
				 }]
			 }
		 }, '-', {
			 tekst: 'Cut'
		 }, {
			 tekst: 'Kopiëren'
		 }, {
			 tekst: 'Verwijderen'
		 }, '-', {
			 tekst: 'Naam wijzigen'
		 }
	 ]
 });

2. toe te voegen luisteraar in controller bestand

 init: function () {
	 this.control ({
		 'Alias_name_here' {
			 render: function () {
				  Ext.getBody () op ("contextmenu", Ext.emptyFn, null, {preventDefault: true}).;
			 }
			 itemcontextmenu: functie (grid, record, item, index, event) {
				 x = event.browserEvent.clientX;
				 y = event.browserEvent.clientY;
				 var menu = new PG.view.MenuRight ();
				 menu.showAt ([x, y]);

				 / *
				 / / Als je wilt een menu hier in plaats van toe te voegen
                                 / / Menu in de weergave map, kunt u gebruik maken van onderstaande code
                                 event.stopEvent ();
				 var menu = Ext.create ('Ext.menu.Menu', {
					 items: [{
						 tekst: 'Toon naam',
						 handler: function () {
							 alert (record.get ('naam'));
						 }
					 }, {
						 tekst: 'Toon ID',
						 handler: function () {
							 alert (record.get ('user_id'));
						 }
					 }]
				 });
				 menu.showAt (event.xy);
				 * /

			 }
		 }
	 });