Aprendiendo Ext JS 3

Formularios y campos comunes en Ext JS Más videos

Descripción del tema

Entre los múltiples tipos de paneles que nos ofrece Ext JS, tenemos el componente Ext.FormPanel, un componente que nos proporciona toda la funcionalidad de un formulario común en HTML pero con métodos y funcionalidades propias de ExtJS. El componente Ext.FormPanel tiene un tipo de diseño (“layout”) por defecto tipo “form”, este tipo de diseño alinea de una manera inteligente cada uno de los componentes (etiqueta-componente) del formulario. La característica única de los Ext.FormPanel es que ya tiene implementado el guardado y cargado de datos de una manera segura y totalmente configurable.

Material de apoyo

Ahora descargamos el material de apoyo, descomprimimos su contenido, creamos una carpeta que se llame "formularios" dentro de la carpeta "curso" en la cual hemos estado trabajando, luego copiamos los archivos que descomprimimos anteriormente. Recuerden que este código lo vamos a ocupar durante todo el tema de “Formularios” así que en los tutoriales siguientes agregaremos líneas a este código para añadirle funcionalidad a nuestro formulario además de que estamos utilizando la versión 3.0 del Framework de Ext JS. El objetivo es que al final del tema “Formularios”, tengamos un formulario funcionando correctamente con todas las funcionalidades y validaciones correspondientes.

Empaquetando el tutorial

Vamos a empaquetar el código para evitar conflictos con otras variables.
 
Ext.ns('com.quizzpot.tutorial');

Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif';

com.quizzpot.tutorial.FormTutorial = {
	init: function(){
		//Aquí va el código del tutorial
	}	

}

Ext.onReady(com.quizzpot.tutorial.FormTutorial.init,com.quizzpot.tutorial.FormTutorial);

Formulario

A continuación vamos a construir un formulario con los campos más utilizados; dos campos de texto, un grupo de checkbox, un campo oculto, un grupo de radiobuttons y dos botones. Primero necesitamos crear un formulario donde se alojarán los campos para que el usuario capture la información necesaria, esto lo hacemos de la siguiente manera:
//creamos un formulario 
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	//componente por defecto del formulario 
	bodyStyle:'padding: 10px', //alejamos los componentes del formulario de los bordes		 
	html: 'This form is empty!' //<-- en el siguiente paso vamos a quitar esta propiedad 
});
Los formularios heredan las propiedades y métodos del componente "Ext.Panel" por lo tanto la configuración que hemos realizado ya es conocida por nosotros, si no es así te invito a darle un repaso al tema de los paneles. El código anterior genera la siguiente pantalla:
Imagen del formulario vacio

Un formulario vacio

Hasta este punto no hay diferencia visual entre un formulario y un panel, esto es porque aún no le hemos agregado ningún campo, vamos a ver detalladamente los componentes más comunes a continuación.

Campos de texto

Como hemos visto, en temas anteriores, podemos crear los componentes utilizando la palabra reservada "new" seguido del componente que necesitamos instanciar, o bien podemos crearlos mediante objetos de configuración utilizando la propiedad "xtype" para distinguir entre los componentes disponibles. El componente que nos permite crear cajas de texto es el "Ext.form.TextField" y su "xtype" es "textfield", por ejemplo:
 
//creamos una instancia del textfield 
var name = new Ext.form.TextField({ 
	fieldLabel:'Name', 
	name:'txt-name', 
	emptyText:'Your name...', 
	id:"id-name" 
}); 

//creamos un formulario 
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	//componente por defecto del formulario 
	bodyStyle:'padding: 10px', //alejamos los componentes del formulario de los bordes			 
	items:[ 
		name, // le asignamos la instancia que creamos anteriormente 
		{ 
			fieldLabel:'Email', // creamos un campo 
			name:'txt-email', // a partir de una 
			value:'default@quizzpot.com', //configuración 
			id:"id-email" 
		} 
	] 
});
En el código anterior se han creado dos campos de texto de dos maneras distintas, una utilizando una instancia del componente TextField y la otra usando un objeto de configuración, cada desarrollador puede elegir la opción que más le convenga dependiendo las circunstancias.
Imagen de campos de texto

Campos de texto

A continuación voy a mencionar las propiedades que utilizamos: "fieldLabel": esta propiedad define el texto que acompaña a cada componente del formulario. "emptyText": esta propiedad define el texto que contendrá el campo cuando se encuentra vacío. "name": es el nombre con el cual se envían los datos que contiene el campo al servidor, es exactamente igual al "name" que estamos acostumbrados a usar en formularios comunes. "value": es el valor por defecto con que aparece en el componente, útil para cuando queremos editar un registro y mostrar la información que actualmente está capturada.

Checkbox

Los checkboxes son utilizados para seleccionar uno o varios items de una lista, o simplemente para activar o desactivar alguna bandera o permiso en un sistema, para este ejemplo voy a poner un campo que se llame “activo” utilizando un objeto de configuración, también podemos crear una instancia utilizando el componente “Ext.form.Checkbox”:
 
// codigo removido por cuestiones de simplicidad...

//creamos un formulario 
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	
	bodyStyle:'padding: 10px', 		 
	items:[ 
		name, 
		{ 
			fieldLabel:'Email', 
			name:'txt-email', 
			value:'default@quizzpot.com', 
			id:"id-email" 
		},{ 
			xtype: 'checkbox', //definimos el tipo de componente 
			fieldLabel: 'Active',// le asignamos un label 
			name: 'chk-active', //y un "name" para que lo recojamos en el servidor... 
			id: 'id-active'// ...cuando el formulario sea enviado 
		} 
	] 
});
Por otro lado cuando queremos agrupar varios checkboxes necesitamos utilizar el componente “Ext.form.CheckboxGroup” el cual permite manipular de una forma sencilla cualquier cantidad de checkboxes.
 
//creamos un grupo de checkboxes
var checkboxes = new Ext.form.CheckboxGroup({ 
	fieldLabel:'Interests', 
	columns:2,//mostrar dos columnas de checkboxes						 
	items:[ 
		{boxLabel: 'JavaScript', name: 'cb-js', checked: true}, //campo marcado desde el principio 
		{boxLabel: 'HTML', name: 'cb-html'}, 
		{boxLabel: 'CSS', name: 'cb-css'}, 
		{boxLabel: 'Otros', name: 'cb-otros'} 
	] 
});

//creamos un formulario 
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	
	bodyStyle:'padding: 10px', 	 
	items:[ 
		name, 
		{ 
			fieldLabel:'Email', 
			name:'txt-email',
			value:'default@quizzpot.com',
			id:"id-email" 
		},{ 
			xtype: 'checkbox', //definimos el tipo de componente 
			fieldLabel: 'Active',// le asignamos un label 
			name: 'chk-active',//y un "name" para que lo recojamos en el servidor... 
			id: 'id-active'// ...cuando el formulario sea enviado 
		}, 
		checkboxes //<-- grupo de checkboxes 
	] 
});
Imagen de checkboxes

Checkboxes con Ext JS

Los grupos de checkboxes aceptan la propiedad “items” la cual debe contener un arreglo de objetos de configuración para checkbox o instancias del checkbox.

Radiobuttons

Los radiobutton son usados para seleccionar una sola opción de varios items, este componente se crea muy semejante a los checkboxes, solo que usamos el componente “Ext.form.RadioGroup” para agrupar varios radios.
 
//código removido por cuestiones de simplicidad

//creamos un grupo de opciones con radiobuttons 
var radios = new Ext.form.RadioGroup({ 
	fieldLabel: 'Favorite Framework',		                
     columns: 2, //muestra los radiobuttons en dos columnas 
     items: [ 
          {boxLabel: 'Ext Js', name: 'framework', inputValue: 'Ext js', checked: true}, 
          {boxLabel: 'Dojo', name: 'framework', inputValue: 'Dojo'}, 
          {boxLabel: 'Mootools', name: 'framework', inputValue: 'Mootools'}, 
          {boxLabel: 'jQuery', name: 'framework', inputValue: 'jQUery'}, 
          {boxLabel: 'prototype', name: 'framework', inputValue: 'prototype'}, 
          {boxLabel: 'YIU', name: 'framework', inputValue: 'yui'} 
     ] 
}); 

//creamos un formulario 
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	
	bodyStyle:'padding: 10px', 			 
	items:[ 
		name, 
		{ 
			fieldLabel:'Email', 
			name:'txt-email', 
			value:'default@quizzpot.com', 
			id:"id-email" 
		},{ 
			xtype: 'checkbox',
			fieldLabel: 'Active',
			name: 'chk-active',
			id: 'id-active'
		}, 
		checkboxes,
		radios // <-- grupo de radios 
	] 
});
Imagen de radiobuttons

Grupo de Radiobuttons

Normalmente los radios son usados en conjunto, pero si por alguna extraña razón necesitas solamente uno o en lugar de usar objetos de configuración en la propiedad “items” del RadioGroup quieres poner instancias, puedes utilizar el componente “Ext.form.Radio”.

Campos ocultos

Los campos ocultos nos sirven para enviar información al servidor que el usuario no le interesa saber, por ejemplo algún “id” del registro que se esta editando, o algún token de seguridad, etc. Ext JS cuenta con el componente “Ext.form.Hidden” el cual nos permite lograr esta funcionalidad.
 
//código removido por cuestiones de simplicidad

//creamos un formulario 
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	
	bodyStyle:'padding: 10px', 	 
	items:[ 
		name, 
		{ 
			fieldLabel:'Email',
			name:'txt-email', 
			value:'default@quizzpot.com',
			id:"id-email" 
		},{ 
			xtype: 'checkbox', 
			fieldLabel: 'Active',
			name: 'chk-active',
			id: 'id-active'
		}, 
		checkboxes, 
		radios,
		{ 
		    	xtype:'hidden',//<-- campo oculto (hidden) 
		    	name:'h-type', //el nombre con que se envia al servidor 
		    	value:'developer'//el valor que contendrá 
		}	 
	] 
});
Es de suma importancia definir la propiedad “name” así como la propiedad “value” para asignarle el contenido a la variable que será enviada al servidor, adicionalmente podemos asignarle un “id” para que podamos modificar el valor del campo de una manera sencilla más adelante.

Botones en el formulario

Podemos asignarle botones al formulario para que al ser presionados realicen las acciones correspondientes, por ahora únicamente voy a crear los botones sin ninguna acción.
 
//creamos un formulario 
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},
	bodyStyle:'padding: 10px', 			 
	items:[ 
		name,
		{ 
			fieldLabel:'Email', 
			name:'txt-email', 
			value:'default@quizzpot.com', 
			id:"id-email" 
		},{ 
			xtype: 'checkbox', 
			fieldLabel: 'Active',
			name: 'chk-active',
			id: 'id-active'
		}, 
		checkboxes, 
		radios, 
		{ 
		    	xtype:'hidden',
		    	name:'h-type', 
		    	value:'developer'
		} 
	], 
	buttons:[{text:'Save'},{text:'Cancel'}] //<-- botones del formulario 
});
Imagen de botones

Botones en un formulario

Podemos alinear la posición de los botones a la derecha, izquierda o al centro, por defecto están alineados al centro, pero mediante la propiedad “buttonAlign” podemos definir el lugar donde aparecerán los botones, para alinearlos a la derecha haríamos los siguiente:
 
//creamos un formulario 
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'}, 
	bodyStyle:'padding: 10px', 			 
	items:[ 
		name, 
		{ 
			fieldLabel:'Email', 
			name:'txt-email',
			value:'default@quizzpot.com', 
			id:"id-email" 
		},{ 
			xtype: 'checkbox', 
			fieldLabel: 'Active',
			name: 'chk-active', 
			id: 'id-active'
		}, 
		checkboxes, 
		radios, 
		{ 
		    	xtype:'hidden',
		    	name:'h-type', 
		    	value:'developer'
		} 
	], 
	buttonAlign: 'right', //<--botones alineados a la derecha 
	buttons:[{text:'Save'},{text:'Cancel'}] //botones del formulario 
});
Imagen botones alineados

Botones alineados a la derecha

Ventana que alojara el formulario

Solo por cuestiones visuales, vamos a ocupar una ventana para alojar nuestro formulario ahí, así que es necesario quitar la propiedad “renderTo: 'frame'” e insertar el formulario dentro de la ventana que crearemos, también vamos a mover los botones a la ventana, el título y el estilo del body de la siguiente manera:
 
//creamos un formulario 
this.form= new Ext.FormPanel({ 
	border:false, // <-- Le quitamos el borde al formulario
	defaults:{xtype:'textfield'},	//componente por default del formulario 
	items:[ 
		name, // le asignamos la instancia que creamos anteriormente 
		{ 
			fieldLabel:'Email', // creamos un campo 
			name:'txt-email', // a partir de una 
			value:'default@quizzpot.com', //configuración 
			id:"id-email" 
		},{ 
			xtype: 'checkbox', //definimos el tipo de componente 
			fieldLabel: 'Active',// le asignamos un label 
			name: 'chk-active',//y un "name" para que lo recojamos en el servidor... 
			id: 'id-active'// ...cuando el formulario sea enviado 
		}, 
		checkboxes, //grupo de checkboxes 
		radios, // grupo de radios 
		{ 
		    	xtype:'hidden',//campo oculto (hidden) 
		    	name:'h-type', //el nombre con que se envia al servidor 
		    	value:'developer'//el valor que contendrá 
		} 
	] 
}); 

//creamos la ventana que contendrá el formulario
var win = new Ext.Window({ 
	title: 'New Developer', 
	width:300, 
	height:300, 
	bodyStyle:'background-color:#fff;padding: 10px', 
	items:this.form, //le asignamos el formulario solamente
	buttonAlign: 'right', //botones alineados a la derecha 
	buttons:[{text:'Save'},{text:'Cancel'}] //botones del formulario 
}); 

win.show();
Imagen ventana con un formulario

Ventana con un formulario

Conclusiones

El día de hoy hemos visto como crear un formulario de manera muy fácil y sencilla, el código completo lo puedes descargar en la parte superior derecha de esta página, en el próximo tutorial veremos cómo añadirle un combo box con datos cargados de manera local y remota a nuestro formulario, y también le agregaremos algunos campos más que nos proporciona Ext JS. No olviden dejar sus dudas, comentarios o sugerencias aquí o pueden registrarse en el foro para tener una mejor conversación.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

58Comentarios

  • Avatar-10 Crysfel 01/06/2009

    Este tutorial fué realizado con la ayuda de Jose Armando (<a href="http://twitter.com/manduks" rel="nofollow">@manduks</a>), agradecemos tu apoyo :D

    • Avatar-9 manduks 01/06/2009

      bueno, bueno quedo muy bien, jeje aunque mi propuesta inicial era mas corta :(, me alegra ver que la estructuraste mejor y le agregaste algunos detalles, bueno yo soy el usuario Manduks en el foro, mas corto ... saludos a todos y espero que les guste (y)

      • Avatar-8 DrMartin 05/06/2009

        Vaya!! que me alegra tanto ver el apoyo a ExtJS ya que he buscado como enfermo por todos lados y aun no encontraba nada de documentación decente en español, hasta que doy con este sitio!.. Magnifico!!! GRACIAS TOTALES!!

        • Avatar-8 Roberto 12/06/2009

          Muy buen tutorial, muy bien explicado.....solo una pequeña observación creo que hay un error de dedo en cuando agregas los checkboxes al formulario debiera ser checkboxs en lugar de checkboxes, no es gran cosa pero alguien por ahí se puede confundir y no le funcionaria el ejemplo.....

          • Avatar-10 Franco 29/06/2009

            hola Crystel ya no habra mas videos para los tutoriales? X(

            • Avatar-3 Crysfel 01/07/2009

              mmmmm.... O_o la idea es que si, pero últimamente he tenido mucho trabajo y me ha sido imposible hacer los videos. espero que pronto pueda ahcer los que vienen y algunos que hacen falta. saludos

              • Avatar-4 Fabricio 04/07/2009

                Este tutorial parece no funcionar con la versión 2, se queda en el "renderTo". Muchas gracias por la inestimable ayuda que prestas. Saluti Fabricio

                • Avatar-11 Jorge Andres 13/07/2009

                  Hola.... Muy buen tutorial, esta es una de las partes que mas me interesa.... una pregunta... ¿Con qué propiedad hago que los texfields me queden uno seguido del otro?, es decir, que además de que queden vertical, tambien los pueda poner horizontal.

                  • Avatar-10 Crysfel 13/07/2009

                    Necesitas cambiar el layout por "table" y configurar las columnas que necesites, si necesitas algún ejemplo registrate <a href="http://foro.quizzpot.com" rel="nofollow">en el foro</a> para platicar mejor. saludos

                    • Avatar-1 AlxRam 14/07/2009

                      trata con: renderTo: document.body, funcionó para mi.

                      • Avatar-10 Jorge Andres 15/07/2009

                        Ya me registré, pero no me han dado de alta

                        • Avatar-11 Jorge Andres 15/07/2009

                          jeje... ya estoy activo... sorry

                          • Avatar-6 julitillo 19/07/2009

                            Gracias por tu esfuerzo. s muy últim para mí. ¿Cómo puedo hacer para que un formulario tenga unos campos para un tipo de usuario y para el admin, por ejemplo, tenga algún campos más?. El mismo problema lo tengo con los botones de una ventana. Quiero que todos los usuarios tengan el "Close", pero "el dueño" de los datos mostrados tenga además el "Delete". Muchísimas gracias desde España.

                            • Avatar-12 sam 08/01/2010

                              muy buena tu pagina la acabo de descubrir.. saludos desde sinaloa

                              • Avatar-11 César Mendez 17/03/2010

                                Crysfel y que novedades tienes?

                                • Avatar-6 Ditmar 18/03/2010

                                  Sublime!! Gracias por todo

                                  • Avatar-5 JuanDavid 06/04/2010

                                    Una Pregunta: existe alguna funcion que me permita capturar el valor seleccionado en un RadioGroup, ya he probado con getValue y getGroupValue y no sirve..... gracias por la ayuda

                                    • Avatar-4 Antonio 13/05/2010

                                      Como puedo hubicar textfields uno al lado del otro en un formulario

                                      • Avatar-3 tierrarara 19/05/2010

                                        que diferencia hay entre boxLabel y fieldLabel en los form.Fields de ext js ?

                                        • Avatar-3 MK00 06/06/2010

                                          Muy buen tut. me esta ayudando bastante en una entrega que debo hacer en al universidad xD

                                          • Avatar-1 JR82 18/06/2010

                                            Muy bueno el tutorial. Necesito mostrar un textfield que no muestre el label, le agrego hideLabel:true al textfield y aunque me oculta el texto del label me sigue mostrando ':' por defecto. si alguien sabe como quitarlo(':') se lo agradeceria. Salu2

                                            • Avatar-3 manduks 22/06/2010

                                              solo ocupa la propiedad label separator y ponel '' o usa un layout diferente al fomulario

                                              • Avatar-11 os 01/07/2010

                                                Podras realizar un ejemplo de login con ext? gracias

                                                • Avatar-1 Silverio 09/08/2010

                                                  Muy buen tutorial, excelente, felicidades. Tienes un ejemplo de como hacer "Leave a Reply" es decir algo similar a justamente donde estoy llenando mi comentario. ¿Es con ext o con jQuery?

                                                  • Avatar-9 oscargut 23/08/2010

                                                    una consulta con respecto al tamaño de los controles tambien se pueden dimensionar con % cambiando lo que se hace por px!!!

                                                    • Avatar-2 oscargut 23/08/2010

                                                      y por favor un ejemplo corto por que me lanza error !!!

                                                      • Avatar-11 Crysfel 23/08/2010

                                                        Si, es posible asignarle un string en lugar de un numero.

                                                        • Avatar-2 uFercho 07/09/2010

                                                          excelente tutorial muy detallado me gusto mucho. siguan así XD

                                                          • Avatar-9 Raidel 08/09/2010

                                                            Muy bueno en verdad, sobre todo por su sencillez

                                                            • Avatar-4 Merly.sr 27/09/2010

                                                              de verdad interesante, normalmente yo agregaba un text field al hacer click en un boton de la sgte manera: var contador=1; function agregar() { var nt=document.createTextNode('Nuevo texto '+contador+'-'); var nparrafo=document.getElementById('parrafo'); nparrafo.appendChild(nt); contador++; } donde mi 'parrafo' es un div de mi html. Bueno, quise hacerlo en Extjs: {buttons:[{text:'Agregar Sub_Proyecto',handler:this.agregar,scope:this}]}, Y definí mi agregar: agregar:function(){ nameField = new Ext.form.TextField({ fieldLabel: 'Name', name: 'ruleSetName', anchor: '100%', allowBlank: false, grow: false }); this.form.add(nameField); }, Y no me agrega nada, agradecería sus ayudas.

                                                              • Avatar-12 luis 22/10/2010

                                                                gracias, recien me inicio en EXTjs, y me parece muy bueno este material. Solo una consulta : tengo dos checks y un boton lo que quiero es hacer que cuando los 2 checks esten activos o marcados recien se active el boton para grabar.... [code] //-- FORMULARIO DE APROBACION --// function aprobar(){ var fisico = null; var ppto = null; if (fisicoCheck.getValue()){ fisico=1; }else{ fisico=2; } if (pptoCheck.getValue()){ ppto=1; }else{ ppto=2; } Ext.Ajax.request({ url: '', method: 'POST', params: { idMeta : , comentario : comentario.getValue(), fisico : fisico, ppto: ppto }, success: function (action,options){ var data=Ext.util.JSON.decode(action.responseText); Ext.Msg.alert('Name', data.message, function(btn, text){ if (btn == 'ok' || btn=='yes'){ window.close(); } }); } }); } var form = new Ext.FormPanel({ renderTo: 'form', defaults:{xtype:'textfield'}, bodyStyle:'background: #E5E5E8;', border:false, width:700, labelWidth:200, labelAlign:'right', items:[ fisicoCheck, pptoCheck, comentario ], buttonAlign: 'center', //&lt;--botones alineados a la derecha buttons:[ { text:&#039;Aprobar metas&#039;, id:&#039;botonmetas&#039;, disabled:true, listeners : { click: function(){ aprobar(); } } } ] }); } } Ext.onReady(com.mod43.Form1.init,com.mod43.Form1); [/code]

                                                                • Avatar-12 JulioM 23/10/2010

                                                                  Hola, muy bueno tu tutorial. Tengo una consulta, hay alguna forma de colocarle tootips a los campos del formulario. Asi como se ve en el formulario para agregar un comentario en esta web, claro quiza no tan funcional, pero algo parecido.

                                                                  • Avatar-4 Martha 22/11/2010

                                                                    Saludos a Crysfel y Manduks, y a todos los foreros, Muy buen tutorial. Yo tambien ando empezando en esto de EXTJS, alguien podria decirme como hago para limpiar el formulario he probado con formulario.form.reset y tambien con formulario.getform.reset y no he obtenido resultados. Les agradeceria me ayudasen.

                                                                    • Avatar-11 Crysfel 22/11/2010

                                                                      intenta lo siguiente: form.getForm().reset(); Saludos

                                                                      • Avatar-9 angelo 02/01/2011

                                                                        tengo en un estatus bar un boton, qiero que al hacer click en ese boton llame a una pagina php que destruya la variables y redireccione a otra pagina.... agradezco toda la ayuda

                                                                        • Avatar-5 rafael 05/03/2011

                                                                          Hola,me esta surguiendo el siguiente problema,mira te explico, tengo un tabpanel, en uno de sus tab tiene layout border,en el west tiene un treepanel y en el center un formpanel, que me sucede,que los fieldset del formpanel,cuando cargo solo me muestra el primero,los demas fieldset no los carga hasta que no muevo o maximizo la ventana, le doy al firebug y sube la ventana, si me puedes ayudar con este problema, si necesitas mas detalles del error , escribeme y te envio las fotos o el codigo,muchas gracias de antemano.

                                                                          • Avatar-12 sebastian 07/03/2011

                                                                            Roberto, checkboxes es la variable que se crea un poco mas arriba que contiene los checkboxs

                                                                            • Avatar-12 Sebastian 07/03/2011

                                                                              Puede ser asi: dentro de las propiedades de los checkbox indica allowBlank: false y en el boton indica formBind: true

                                                                              • Avatar-1 Yotuel 06/04/2011

                                                                                ¿Es posible agregarle paginado a un formulario? Para ir navegando de registro en registro. Quiero hacer algo parecido a lo que hacen los formularios de Microsoft Access (Primero/Anterior/Siguiente/Último). Gracias de antemano.

                                                                                • Avatar-5 enel 14/04/2011

                                                                                  hola esta bueno el tutorial de formulario de este framework, pero explicar como guardo los datos que tipeen en formulario en una base de datos usando este framework le agradeceria respusta

                                                                                  • Avatar-9 Reynaldo 21/04/2011

                                                                                    Sera posible realizar un formulario padre que habra un formulario hijo para la obtencion de datos que al cerrar los datos esten en el formulario padre

                                                                                    • Avatar-8 julian 21/07/2011

                                                                                      buenas necesito saber como le doy formato de miles a numero mientras lo voy digitando en una caja de texto

                                                                                      • Avatar-6 manduks 21/07/2011

                                                                                        mira lo pudes hacer mediante un vtype, o mediante el validator, yo te recomiendo que lo hagas con el vtype, http://www.sencha.com/forum/showthread.php?4271-More-VTypes!

                                                                                        • Avatar-5 manduks 21/07/2011

                                                                                          ocupa un wizard, http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html

                                                                                          • Avatar-4 julian 21/07/2011

                                                                                            realmente te agradesco por la respuesta pero la verdad soy muy novato aun en lo de ext js entonces no entiendo muy bien la respuesta que me has dado la caja de texto que estoy creando esta de la siguiente manera y quiero que a lo que el usuario digite123456 quede 123.456 { xtype: 'container', columnWidth:.5, layout: 'anchor', items: [{ xtype:'textfield', fieldLabel: 'Cedula Tenedor', arrowAlign:'center', value:'', name: 'tenedor', anchor:'75%', fieldCls:'numero', maskRe: /[\d\-]/, maxLength: 10 , } les agredeceria mucho su ayuda se que la única forma de lograr las cosas es investigando pero ya le e dado muchas vueltas a esto y no lo e logrado de antemano muchas gracias

                                                                                            • Avatar-2 therion 22/07/2011

                                                                                              bueno me parecen excelentes los tutoriales pero tengo una duda que espero por favor me respondan como puedo darle negrilla a los títulos de las cajas de texto

                                                                                              • Avatar-10 julian 22/07/2011

                                                                                                pues yo solo le pongo la etiqueta a name:'<b> el titulo</b>' de esta manera lo hago y por ultimo les recomiendo mi pregunta Gracias espero te sirva therion

                                                                                                • Avatar-5 julian 22/07/2011

                                                                                                  la etiqueta que se utiliza en html

                                                                                                  • Avatar-3 julian 28/07/2011

                                                                                                    por fa muchachos colaborenme con lo de la caja de texto solo me falta eso para terminar como para que al escribir 123456789 me quede 123.456.789

                                                                                                    • Avatar-11 Luis Olivera 03/10/2011

                                                                                                      Asi es q egresaste de la uni aqui en huajuapan, ajjejejej, quien lo hubiiera imaginado, llevo 3 meses aprendiendo extjs soy de huajuapan de leon y no me imagine q fueras egresado de la utm, felicidades,.. saludos

                                                                                                      • Avatar-4 manduks 03/10/2011

                                                                                                        oralex que chido, pues echale ganas man. cualquier cosa aqui me encuentras iam@armando.mx

                                                                                                        • Avatar-3 juan russi 12/10/2011

                                                                                                          nada

                                                                                                          • Avatar-1 Hernan 30/11/2011

                                                                                                            Una consulta si me funciona tu aplicacion, pero yo quiero hacerlo de modo local que llame a mi servidor Apache, por eso esta parte del codigo como lo redirecciono: Ext.ns('com.quizzpot.tutorial'); Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif'; com.quizzpot.tutorial.FormTutorial = { init: function(){ .... ... .. } } Ext.onReady(com.quizzpot.tutorial.FormTutorial.init,com.quizzpot.tutorial.FormTutorial);

                                                                                                            • Avatar-4 Carlos Moreno 09/03/2012

                                                                                                              He cargado en un xtype:"combo" las variables de un fichero .xml. pero como puedo pasar el valor(sin perderlo) de esas variables como parametros a una simple URL, Mi codígo es el siguiente: ventanaCentrar = new Ext.Window({ title: "Localizaci&oacute;n, zoom y centrado de parcelas", layout: "fit", width: 370, height: 180, bodyStyle: 'padding:5px;background-color:#fff', items:[ new Ext.form.FormPanel({ id: "formCentrar", labelAlign: "left", items: [{ xtype: "combo", store: new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: OpenLayers.ProxyHost + encodeURIComponent("Data.xml"), method: 'GET' }), reader: new Ext.data.XmlReader({ record: 'dataRow' },[ {name: 'name', mapping: 'name'}, {name: 'code', mapping: 'code'}, {name: 'zone', mapping: 'zone'}, {name: 'xMin', mapping: 'xMin'}, {name: 'yMin', mapping: 'yMin'}, {name: 'xMax', mapping: 'xMax'}, {name: 'yMax', mapping: 'yMax'} ] ), autoLoad: true }), id: 'recinto', valueField: 'code', editable: true, width: 220, align:'left', emptyText: "Selecciona un recinto...", displayField: "name", fieldLabel: "Recintos", typeAhead: true, disabled: false, mode: "local", triggerAction: "all", listeners: { select: { fn:function(cmb,record,index) { var xMin = record.get('xMin').substring(0,6) + "." + record.get('xMin').substring(7,10); var xMax = record.get('xMax').substring(0,6) + "." + record.get('xMax').substring(7,10); var yMin = record.get('yMin').substring(0,7) + "." + record.get('yMin').substring(8,11); var yMax = record.get('yMax').substring(0,7) + "." + record.get('yMax').substring(8,11); //Define el sistema de proyección origen y destino var source; var dest = new Proj4js.Proj(map.projection.toString()); if (record.get('zone') == 29) { source = new Proj4js.Proj("EPSG:23029"); } else{ source = new Proj4js.Proj("EPSG:23030"); } var coord1Transfor = new OpenLayers.Geometry.Point(xMin, yMax); var coord2Transfor = new OpenLayers.Geometry.Point(xMax, yMin); vcoord1Transfor = coord1Transfor; vcoord2Transfor = coord2Transfor; vxMin = xMin; vyMin = yMin; vxMax = xMax; vyMax = yMax; Proj4js.transform(source, dest, coord1Transfor); Proj4js.transform(source, dest, coord2Transfor); var extension = new OpenLayers.Bounds(coord1Transfor.x-140, coord1Transfor.y, coord2Transfor.x-140, coord2Transfor.y); extension.extend(new OpenLayers.Geometry.Point(coord1Transfor.x-140, coord1Transfor.y)); extension.extend(new OpenLayers.Geometry.Point(coord2Transfor.x-140, coord2Transfor.y)); map.zoomToExtent(extension, false); } } } }] }) ] }); ventanaCentrar.show(); Muchas gracias.

                                                                                                              • Avatar-12 Lolo 06/11/2013

                                                                                                                Esta bueno, pero tengo una pregunta. Que debo hacer para que mis campos ocultos no ocupen espacio en mi panel, ya que si tengo muchos campos ocultos, mi panel se agranda con espacio en blanco. gracias

                                                                                                                • Avatar-1 Albertineno 10/07/2019

                                                                                                                  Dating sites for sex: https://s.coop/2323s?&jsivq=L0finpvlo Popular tags: free dating websites millionaires, dating a religious catholic girl, beverly hills 90210 cast members dating, free online dating sites in missouri, gay speed dating minneapolis, players dating cheerleaders, online dating cats lovers, who is selena gomez dating april 2015, dating site mingle, reddit destiny raid matchmaking, body type dating website, dating sites barcelona spain, dating relationship quotes, dating practices in africa, gackt still dating iconiq, speed dating for over sixties, online dating openers 2014, are you dating quiz, speed dating sheffield, 18 rules for dating my teenage daughter cast, special bridge dating site, lowered expectations dating service, online dating nerds, dating china marks, dating room in karachi, matchmaking by date of birth only free, table eight dating sydney, look up dating sites, dating agency in johor bahru, divorced women's dating india, online dating sites that start with t, what are the christian dating sites, dating dating sites, jhb cbd hookup, radiometric dating and half life, questions to ask when dating a man, online dating cold feet, kenyan singles dating site, dating ideas in melbourne, speed dating online chat, which internet dating site is the best, phone dating websites, dating a bad boy, online dating tips meeting in person, free dating basingstoke, online dating pick up tips, mixed race muslim dating sites, real dating site in kolkata, online black dating sites, online dating jezebel, best dating profile ads, at what age should i try online dating, tag dating free, the guy i'm dating stopped texting me, nfl cheerleaders hook up with players, dc hook up, online dating i love you, arab dating site canada, speed dating stoke on trent, shiki kurobane dating a demon walkthrough, spotting fake dating profiles, good dating sites for young adults, muddy boots dating agency, cmt dating show sweet home alabama, dating sites in odisha, what is the dating age rule in florida, online dating newspaper articles, dating adventures, marriage not dating 16, 100 free black online dating sites, dating in palm beach, dating sites elite singles, is dating for 7 years too long, nepali online dating site, catchy lines for dating sites, stanley hand plane dating spreadsheet, waco texas dating, absolute dating volcanic ash layers, ideas for dating website username, dating regal guitars, speed dating melbourne over 35, asiand8 muslim speed dating, dating letters, phase eight hook up dress, free mississauga dating, dating an australian man tips, sam dating freddie, dating william moorcroft pottery, dating old telephones, how to troll an internet dating site, 11 signs you are dating a woman, how does online dating work yahoo, dating sites for caribbean singles, dating co stars, great jokes for online dating, online dating swift current, online dating social networking sites, vietnam gay dating sites, kentucky dating sites, scorpio man dating someone else, chef k dating, tips for writing dating profile, almost complete 78 rpm record dating guide, aquarius woman dating gemini man, dating london 2016, i need a dating scan, internet dating jokes, go speed dating alone, free online dating massachusetts, dating site in israel, dating websites in saudi arabia, dating online without registration, drunk dating site, free polish dating site uk, filipino dating sites in uae, vintage dating sites uk, best place for dating in kl, dating tallinn, free dating site in us without credit card, halo matchmaking fix, twins dating sites, hello cupid dating site, dating website self summary, couples dating 100 free, speed dating london age 23, dating website for medical students, what do you buy a man you just started dating, ultrasound dating rules, dating site maroc, online dating bhubaneswar, guardian dating column, rsvp dating search, free military dating sites for civilians, sydney hook up bars, online dating email examples, hook up underwear, hookup lures, bipolar dating horror stories, pig hunting dating site, interracial dating st louis mo, outsource online dating profile, free dating sites like meet me, healthy christian dating, dating kissing games free online, chicago dating sites free, hongbin and zinni dating, animal rights dating website, brickleberry speed dating, dating finance guys, what guys think of online dating, internet dating growth, asian in dating, 420 friendly dating canada, gr??nde warum man single sein sollte, early stages of dating a taurus man, top 5 dating sites, dating sister in laws cousin, dating alone chanyeol full, nina dobrev and paul wesley dating 2014, top totally free dating, dating apps for iphone india, what if my ex boyfriend is already dating another girl, dating louisville, paul from the real housewives of beverly hills dating, lucas till dating history, hoekie vir eensames dating, dating teachers assistants, dubai dating expatica, dating schizoid personality disorder, internet dating tips first date, online dating edmonton, speed dating paris 25 35 ans, how to do matchmaking on halo reach, dating sites where you can message for free, free hookup apps that actually work, dating practices in egypt, 24 years old dating 12 years old, dating games sim, best dating spots singapore, interracial dating pics, sverige dating online, christian dating for free sites, free online dating for farmers, fish free dating website, dating chicago over 40, christian interracial dating services, psychology of internet dating, hookup culture vs dating, radiocarbon dating ice cores, newspaper articles online dating, catchy headlines online dating, guidelines to ensure safe dating, do dating sites pop up, impression management through communication in online dating, surf girl dating, dating brighton mi, blind dating sites in philippines, joe survivor dating, tinder dating app for iphone, how to ask a guy if he is dating anyone else, funny dating questions to ask a guy, dating after 50 stop looking for the wrong person, dating sims on vita, dating but no marriage, writing a dating profile, real estate is like dating, dating online mumbai, matchmaking world of tanks 9.5, montreal dating scene, how to find out if my man is on a dating site, funny first message for online dating, best dating apps android 2014, dating non-christians, are garcia and morgan dating on criminal minds 2013, dating in rio de janeiro, clyde 1 dating search, dating sites newcastle nsw, dating agency northumberland, 1 nite stand dating, download lagu ost marriage without dating stop the love now, afroromance interracial dating, list of the 100 free dating site in europe, free dating bratislava, how dating used to be, dating old photographs uk, free dating website yahoo answers, cougars dating site, full dating sims games download, dota 2 matchmaking joindota, what does double dating mean, full access free dating sites, christian dating couple vacation, are we officially dating sydney nsw, black asian dating website, best dating site for vegans, best intro lines for online dating, mobile dating chat room, what is the word hook up mean, dating polish girls, christian dating red pill, dating a psychopath, dating laws in usa, who is jessica alba dating 2013, accuracy of radioactive dating, introduction titles for dating sites, site-uri dating gratis, best first thing to say online dating, did any cast members from 90210 dating in real life, caravan hook up adapter, annan dating, lithuania dating site free, sex change dating site, pakistani dating sites uk

                                                                                                                  • Avatar-10 GordonDer 10/07/2019

                                                                                                                    How to find a woman for casual sex: https://hec.su/jVZ6?jG27lq Popular tags: dating carl zeiss binoculars, any free dating sites in uk, dating someone 3 years older, rules for dating a mormon girl, black american dating online, how to write a good online dating message, spam email dating sites, profile name for dating site, free online dating sites in trinidad and tobago, craigslist tulsa ok dating, dating site for apple lovers, 25 year old female dating 20 year old male, best dating montreal, online dating sites aspergers, can i hook up my ipad mini to a projector, good first email online dating examples, online dating is it worth it, blogs like forty days of dating, cool dating site usernames, online dating yukon, dating boutique perth, free dating sites in new york, dating puns, about me examples for dating website, dating raleigh frame numbers, scientific american carbon dating, matchmaking games for parties, explain the process of relative dating of fossils, dota 2 matchmaking stats, free local online dating, making money dating sites, swiss dating, online dating funkar, kpop celebrities dating, abuja hookup, examples of dating site messages, four dating rules, dating sites use paypal, dating feels hopeless, amish online dating service, dating sites australia sydney, popular dating app india, ghaziabad free dating, senior christian dating uk, hookup agency in singapore, black speed dating in washington dc, black gay dating advice, hook up vb, single black females & interracial dating, normal dating sites, best free online dating sites uk, enugu dating, free online dating sites forum, dating an older man jokes, how long should my online dating profile be, gay dating apps for ipad, reddit best dating websites, open source dating site php, dating someone with mild autism, dating in the dark nyc, free kundali match making online in hindi, online dating success stories, questions to ask on dating sites, free online dating chat in india, hook up with your teacher, uk dating site no sign up, speed dating michigan, dating agencies sydney reviews, herpes dating nyc, kerr jars dating, lds youth dating questions, high school hook up culture, bmp dating, water hook up cambridge ontario, dating agency sydney, easy hook up 1, best australian online dating sites, just found out i'm dating a sex offender, best free interracial dating apps, dating app based on personality, cheeky boo dating, warcraft dating sites, airport hookup site, hook up card mpia, ruger dating serial number, dating celebrities quizzes, metro fm dating online, funny dating someecards, privacy online dating, 17 years old dating 20 year old, mcgee and abby dating, lebanese dating sites free, lesbian dating quizzes, dating sites worksop, quick match dating site, top 5 dating sites in canada, dating sites for singles in lagos, iphone apps dating sites, signs that a guy is dating someone else, brecon dating service, penguins dating, like for our chances of dating picture, been dating for 2 years, online dating cherry blossom, free online dating for 14 year olds, dating does not mean boyfriend girlfriend, dating back to last year, down dating app download, black and white online dating sites, dating ontario canada, oasis dating site contact number, 100 free best dating sites, is morgan dating garcia in criminal minds, abuja dating site in nigeria, what to know about dating an iranian man, jewish dating sites over 50, what do you say in a first message on a dating site, free army dating websites, kimbra dating gotye, photo dating online, how long before i start dating again after a break up, speed dating berkshire area, i really want to hook up with this guy, broke and dating, pregnant dating site advice, applesails dating, black speed dating chicago, paying online dating sites, when to start dating after a 3 year relationship, free christian dating site.com, prince albert dating sites, ramblers association dating, hook up definition, can you hook up two amps to one sub, self esteem while dating, art dating site, dating ideas for long distance relationships, the hook up kristen callihan, free premium dating themes, browse dating website for free, dating show sex change, dating someone less attractive than ex, thai dating agency pattaya, radiocarbon dating range, best dating apps for asian, dating to friends back to dating, online dating ukraine scammer, friends dating online, lesbian dating websites usa, non religious guide to dating and being single, charleston dating scene, lesbian dating london uk, knoxville tennessee dating, daddy's rules for dating, new 100 percent free dating sites, top free hookup apps iphone, plants vs zombies garden warfare matchmaking, top ten senior dating websites, speed dating in london free, filipina dating sites uk, top gay dating sites, 100 free asian dating uk, messages for dating sites examples, pisces dating a pisces, good greetings for dating sites, leo dating pisces man, speed dating izmir, free dating sites luxembourg, mobile dating apps for windows phone, millionaire dating agency usa, how to handle a new dating relationship, 7 rules for dating my son, take me out china dating show, free spiritual dating uk, seniors dating perth, belize dating sites, minecraft dating server 1.7.5, download matchmaking demos, dating site deutschland, elements used in radioactive dating, dating sites for farmers uk, dating us navy, speed dating mooresville nc, lirik stop the love now ost marriage not dating, our time online dating reviews, dating chanel bottles, free dating numbers on phone, dating a married woman going through divorce, awkward dating site pictures, it match making 2013, dating agency cyrano taemin izle, papa dating guide, online dating scams africa, best online dating sites atlanta, best hookup sites for college students, potsdam hookup, best funny online dating profiles, jc and lia dating announcement, best dating agencies scotland, coptic orthodox dating site, dating and marriage customs in australia, totally free dating apps uk, samples of dating profiles for women, i'm 23 and dating a 17 year old, turkish dating sites australia, high maintenance dating, free ukraine online dating, why is online dating so depressing, free online lesbian dating south africa, cody and michelle dating, japanese dating simulation games online free, speed dating va beach, dating after emotionally abusive relationship, dating app hoax, advice on christian dating relationships, 43 year old woman dating 25 year old man, 11 signs you're dating a boy and not a man, high school christian dating, dating websites in joburg, speed dating warner robins ga, dating sites for sugar mummies in ghana, dating site for gamers, dating gold, hookup area login, how do you hook up amp to stock radio, aunties phone numbers for dating everything else in bangalore, filipinas dating sites, sample bios for dating sites, interracial dating in illinois, top free hookup apps 2016, best dating site to get married, premier matchmaking philadelphia, list of free dating site in kuwait, high school hook up portugues 320x240 jar, online dating essays, korea dating rumors, completely free dating site app, uniform dating deals, cyrano dating agency dramawiki 2013, girl dating guy 4 years younger, tim and eric dating, ataca and la alemana dating, what a dating ultrasound, craigslist charlotte hookup, top filipino dating, dating how long before moving in together, online dating marines, dating lebanon, right stuff dating service, online dating questions to ask in email, dating website little fish, clever dating profile summary, po fish dating site

                                                                                                                    • Avatar-10 DonaldAland 01/07/2020

                                                                                                                      Earning method from $ 15 000 a day After only 30 days, I still have to pinch myself to make sure I'm not dreaming. I earned tens of thousands of dollars every month in my own cozy four walls. Profits grow and grow and grow! http://vgkhmrq.belluga.xyz/62 It only takes a few minutes With just a few clicks, you can generate $ 15,000 every day for the rest of your life http://qvdaip.changemyaddressinusa.site/4303a2c 4. Earn Money Online through Sale of E-Books. More than just knowing what to do with your money is understanding what it is, how it works, and what it means for your personal and professional life. This interactive class will help you set up your accounts, budget, and work with taxes and government benefits. Sam, a personal finance expert and co-founder of How To FIRE says, “Even the cheapest meal delivery service will make a tough situation easier for those stuck at home. If they can’t find the food they are looking for, help bring it to them. Also, many kids are home from school right now, so make a hectic situation easier for parents!” Or any other number of freelance skills? Sites like Upwork and Fiverr will help you get access to freelancing jobs no matter what your skills are. Owning a car in Japan is extremely expensive due to inspection fees, parking fees, etc. As a result, most foreigners either can’t afford one , or don’t stay here long enough to warrant spending so much on one.

                                                                                                                      Instructor del curso

                                                                                                                      Crysfel3

                                                                                                                      Autor: Crysfel Villa

                                                                                                                      Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                                                                                                                      Descarga Código Fuente Ver Demostración

                                                                                                                      Regístrate a este curso

                                                                                                                      Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                                                                                                                      Tendrás acceso a descargar los videos, códigos y material adicional.

                                                                                                                      Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                                                                                                                      Llevarás un registro de tu avance.