La forma de crear un menú personalizado en función de botón derecho del ratón en el evento click ExtJS 4 no es muy diferente con el pre-versión. Al parecer, en Ext 4.0.2 se cambió el nombre del evento y para los argumentos.

En primer lugar, vamos a ver cómo podemos crear el menú en el Ext. 3. Me sale este ejemplo de aditia Rahman :

 var menu1 = new Ext.menu.Menu ({
     artículos: [
         {
             texto: "Me gusta Ext ',
             comprobar: true
         }, '-', {
             texto: 'Abrir con',
             menú: {
                 elementos: [{
                     texto: "Notepad + +"
                 }, {
                     texto: 'GIMP 2.0'
                 }, {
                     texto: 'Firefox'
                 }]
             }
         }, '-', {
             texto: 'Cut'
         }, {
             texto: "Copiar"
         }, {
             texto: 'Eliminar'
         }, '-', {
             texto: "Cambiar nombre"
         }
     ]
 });

Vamos a escribir una DataView para agregar un oyente.

 var = new datav Ext.DataView ({
     AutoScroll: tienda de verdad,: tienda, TPL,
     autoHeight: false, altura: 250, de selección múltiple: true,
     clase superior: 'X-View-over ", itemSelector:' div.thumb-wrap ',
     emptyText: 'No hay imágenes para mostrar ",
     estilo: 'border: 1px solid # 99BBE8;',
     oyentes: {
         imagen: {
             fn: function () {
                  Ext.getBody (). En ("menú contextual", Ext.emptyFn,
                     nulo, {preventDefault: true});
             }
         },
         menú contextual: {
             fn: function (obj, el índice, el nodo, el evento) {
                 x = event.browserEvent.clientX;
                 y = event.browserEvent.clientY;
                 menu1.showAt ([x, y]);
             }
         }
     }
 });

Cuando la vista de datos se representa que desactivar el menú del botón derecho por defecto del navegador web, esto se llama en los oyentes "render" de eventos y "contexmenu" evento es para la detección de eventos botón derecho del ratón, la captura de la posición del cursor del ratón y visualizar el menú.

Es fácil ¿no? Ahora vamos a hacer un menú del botón derecho en ExtJS 4 MVC.

1. añadir el menú en "app / view / MenuRight.js" Vista de carpetas

 Ext.define ('PG.view.MenuRight', {
         se extienden: "Ext.menu.Menu ',

	 artículos: [
		 {
			 texto: "Me gusta Ext ',
			 comprobar: true
		 }, '-', {
			 texto: 'Abrir con',
			 menú: {
				 elementos: [{
					 texto: "Notepad + +"
				 }, {
					 texto: 'GIMP 2.0'
				 }, {
					 texto: 'Firefox'
				 }]
			 }
		 }, '-', {
			 texto: 'Cut'
		 }, {
			 texto: "Copiar"
		 }, {
			 texto: 'Eliminar'
		 }, '-', {
			 texto: "Cambiar nombre"
		 }
	 ]
 });

2. añadir detector en un archivo de controlador de

 init: function () {
	 this.control ({
		 'Alias_name_here': {
			 imagen: function () {
				  Ext.getBody () en ("menú contextual", Ext.emptyFn, nulo, {preventDefault: true}).;
			 },
			 itemcontextmenu: function (grid, registro, elemento, el índice del evento) {
				 x = event.browserEvent.clientX;
				 y = event.browserEvent.clientY;
				 var menu = new PG.view.MenuRight ();
				 menu.showAt ([x, y]);

				 / *
				 / / Si usted quiere crear un menú de aquí en lugar de sumar
                                 / / Menu en la carpeta de vista, puede utilizar el código siguiente
                                 event.stopEvent ();
				 var = menu Ext.create ('Ext.menu.Menu', {
					 elementos: [{
						 texto: "Mostrar nombre",
						 controlador: function () {
							 alerta (record.get ('nombre'));
						 }
					 }, {
						 texto: «Mostrar ID ',
						 controlador: function () {
							 alerta (record.get ('user_id'));
						 }
					 }]
				 });
				 menu.showAt (event.xy);
				 * /

			 }
		 },
	 });