29
Mar
10

ExtJS, mi primer formulario

Enviaremos datos desde un formulario y mostraremos la información en otra pagina solo para ver que esta funcionando

<html>
	<head>
		<title>Mi Primer Formulario Ingenio DS</title>
		<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
		<script src="lib/extjs/adapter/ext/ext-base.js"></script>
		<script src="lib/extjs/ext-all-debug.js"></script>
		<script>
			Ext.onReady(function(){
				var formulario = new Ext.form.FormPanel({
				<!-- formulario nombre de la variable, Ext.FormPanel funcion que indica que queremos un formulario -->
				standardSubmit: true,
				renderTo: document.body,<!-- donde pondremos el formulario -->
				<!-- si tuviesemos un div donde quisieramos poner el formulario seria(mirar ultima linea)  -->
				frame: true,<!-- lo queremos como ventana -->
				title: 'Ingenio DS',<!-- titulo de la ventana -->
				width: 250,<!-- ancho del formulario -->
				heigth: 250,<!-- ancho del formulario -->
				x: 100,<!-- 'x' y 'y', una posicion en la ventana -->
			    y: 100,
				floating: true,<!-- decir que puede tomar cualquier posicion en la ventana -->
				items: [{<!-- items hace referencia a los campos del formulario es un vector -->
							xtype: 'textfield',<!--xtype tipo del campo -->
							fieldLabel: 'Nombre',<!--fieldLabel texto del campo -->
							name: 'nombre'<!--name nombre del campo -->
						},{
							xtype: 'textfield',<!--xtype puede ser textfield, datefield, timefield, numberfield, combo, textarea-->
							fieldLabel: 'Apellido',
							name: 'apellido'
						},{
							xtype: 'datefield',
							fieldLabel: 'Fecha de nacimiento',
							name: 'fecha'
						}],
						<!-- en es es un vector precedido de la palabra buttons: para especificar -->
						<!-- que este vector son los botones del formulario en este caso el submit--> 
				buttons: [{
            				text: 'Guardar',
            				handler: function() {
								<!-- estos son elementos basicos de los formularios -->
								<!-- la accion -->
								
								<!-- procesar.jsp=para tomcat -->
								<!-- procesar.php=para wamp, xamp, apache -->
								formulario.getForm().getEl().dom.action = 'procesar.jsp';
								<!-- el metodo de envio de la informacion -->
				        		formulario.getForm().getEl().dom.method = 'POST';
								<!-- para decir que este boton es el submit -->
								formulario.getForm().submit();
							}
        				}]
				});
			});
			 
			 <!-- formulario.render('divFormulario'); -->
		</script>
	</head>
	<body>
		<!-- Nada en el cuerpo -->
		Ingenio DS
	</body>
</html>

y hacemos otra pagina que se llama procesar.jsp o procesar.php
PHP

<html>
	<head>
	<title>Ver informacion del formulario</title></head>
<body>
nombre <?php echo($_REQUEST['nombre'])?>&nbsp;<?php echo($_REQUEST['apellido'])?><br/>
fecha de nacimiento <?php echo($_REQUEST['fecha'])?>
</body>
</html>

JSP

<html>
	<head>
		<title>Ver informacion del formulario</title>
	</head>
<body>
nombre <%= request.getParameter("nombre") %>&nbsp;<%= request.getParameter("apellido") %>
fecha de nacimiento <%= request.getParameter("fecha") %>
</body>
</html>

5 Responses to “ExtJS, mi primer formulario”


  1. mayo 22, 2010 a las 11:23 am

    Hola. Bueno, de verdad este es el ejemplo que estaba buscando.. entendì casi todo (lo demas que no entendi es por mi inexperiencia en javascript y web).

    Quisiera preguntarte si conoces alguna pagina o manual de referencia de cada una de las propiedades de almenos extjs panel.

    Estoy desarrollando una idea personal de un sitio web que ayude a las personas a organizar sus datos y que de oportunidad a desarrolladores a desarrollar mini formularios que venderselo a los usuarios.

    Gracias.

    • mayo 22, 2010 a las 5:32 pm

      Bueno la información ultima toda esta en ingles imposible en español pero te recomiendo esta pagina http://www.extjses.com/, y puedes probar el ExtJS designer es mas rápido hacer las interfaces con ese programa. pero de odas formas si tienes alguna duda en especifico pregunte que si yo se le puedo responder

  2. 3 Francisco
    julio 30, 2010 a las 10:16 pm

    Hola Excelente tutos, quisiera saber si tendras un tuto donde combines varios componentes de extjs en un layout es decir grid, acordion .. o si fuese posible tengas un tuto de crud con extjs seria estupendo en php o java

    Saludos

  3. 5 andro
    febrero 23, 2011 a las 1:42 pm

    hola buenas tardes… estoy incursionando en el mundo de Ext y ya me he creado mi primera grid que se conecta con una BD sql y extrae la información y la carga … ahora el problema es que no encuentro como paginar la grid para que me muestre solo 50 filas… y asi susesibamente la información a cargar en muy grande y me es importante poder distribuir de 50 en 50 estamos hablando miles de miles de infimración y cada dia va creciendo si me podes ayudar de antemano le agradesco por su ayuda… pues me he registrado 6 beses en el sitio oficial http://www.extjses.com/foros.html y no resivo el Email para activar la cuenta… saludos

    gracias


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


I+Ds

Dudas consultas
Facebook
Twiter
Google +

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevas publicaciones por correo.

Únete a otros 348 seguidores

Ingenio DS en Facebook

Redes Sociales y Archivos

Entradas

marzo 2010
L M X J V S D
« Feb   Abr »
1234567
891011121314
15161718192021
22232425262728
293031  

IngenioDS en twiter


A %d blogueros les gusta esto: