From Sencha - Learn

En este pequeño tutorial trataremos de construir un formulario Ext que se enviará de manera tradicional, como cualquier formulario html.

Introducción

Es probable que como programador conozcas PHP (o ASP, o algún otro lenguaje del lado servidor) y la manera tradicional de trabajar con interfaces de usuario. Sueles construir formularios en tu lenguaje del lado servidor y los muestras en texto plano html al usuario final. Puede que uses un motor de plantillas, pero al final, estás enviando html lindamente formateado al usuario final.

Con Ext es realmente fácil construir formularios e interfaces atractivas, así que te gustará usarlo. Pero también tienes un montón de código que ya funciona, el cual preferirías conservar en vez de convertirlo todo para manejar datos formateados en JSON, etc.

Al menos, esa era y es mi situación actual.

Comenzando: la página HTML

Probablemente ya haz leído como incluir todo el código Ext requerido en tu página, pero déjame repetirtelo: (coloca esto en la sección head de tu documento html)

<title>A tradional form</title>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
 
<!-- Include your own Javascript file here - adapt the filename to your filename-->
<script type="text/javascript" src="ext/mytestscript.js"></script>  
 
 
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">

A continuación, la página necesita un lugar donde mostrar el formulario. (coloca lo siguiente en el cuerpo de la página)

<div id="mytradionalform"></div>

Eso es todo para el código html. Puedes colocarlo en un archivo html común (Ej. formulario.html), o puedes mostrarlo por medio de un script del lado servidor. Realmente no importa.

El código Javascript

Ahora, armaremos el código Javascript. La mejor práctica parece ser colocarlo en un archivo separado. Yo lo llamé "mytestscript.js" (ver html arriba). No importa como lo llames, solo asegúrate de referenciar el archivo correcto.

Ver el código de abajo.

Ext.onReady(function(){
 
	var simple = new Ext.form.FormPanel({
 
 
        standardSubmit: true,
 
 
        frame:true,
        title: 'Register',
 
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',
		items: [{
                fieldLabel: 'Username',
                name: 'username',
                allowBlank:false
            },
			{
                inputType: 'hidden',
                id: 'submitbutton',
                name: 'myhiddenbutton',
                value: 'hiddenvalue'
            }
 
        ],
        buttons: [{
            text: 'Submit',
            handler: function() {
		simple.getForm().getEl().dom.action = 'test.php';
	        simple.getForm().getEl().dom.method = 'POST';
                simple.getForm().submit();
            }
        }]
 
 
    });
 
 
 
    simple.render('mytradionalform');
 
 
 
});

Partes importantes del script a continuación:

• La línea "standardSubmit: true" se encarga de que el formuario se envíe de forma estándar.
• El manejador para el botón de envío. Primero pensé que agregar "standardSubmit: true" sería suficiente, pero no fue así.
• simple.render() dice donde debe ubicarse el formulario. Si cambias el id de la etiqueta <div> en el html, no olvides cambiar también este nombre.

This page was last modified on 17 January 2009, at 02:49. This page has been accessed 11,947 times.