Introduccion a extjs

Introducción a formularios en ExtJS: Ext.FormPanel
21/11/2008 por Javier Caride
Definiendo un formulario
Realmente la definición de un formulario que haga su carga de datos y guardado mediante Ajax, no dista mucho de la definición de un grid.
Lo primero que hacemos es definir el registro que contendrá nuestros datos. Como se puede ver en este ejemplo hemos utilizado la misma definición deregistro.
view plaincopy to clipboardprint?
1. var categoriesRecord = new Ext.data.Record.create([   
2.     {name: 'cad_id', type: 'int'},   
3.     {name: 'cad_name', type: 'string'},   
4.     {name: 'cad_description', type: 'string'}   
5. ]);  
var categoriesRecord = new Ext.data.Record.create([
{name: 'cad_id', type: 'int'},{name: 'cad_name', type: 'string'},
{name: 'cad_description', type: 'string'}
]);
Para la carga de datos y respuestas del servidor, definimos también un reader (al igual que en los grids). Para este ejemplo vamos a seguir utilizando la codificación JSON, aunque podríamos haber elegido un reader XML
view plaincopy toclipboardprint?
1. var categoriesFormReader = new Ext.data.JsonReader(   
2.         {   
3.             root : 'data',   
4.             successProperty : 'success',   
5.             totalProperty: 'total',   
6.             id: 'cad_id'  
7.         },categoriesRecord   
8. );  
var categoriesFormReader = new Ext.data.JsonReader({
root : 'data',
successProperty : 'success',
totalProperty: 'total',
id: 'cad_id'
},categoriesRecord
);
Como vemos, su definición es prácticamente igual que en el caso del reader del grid, salvo que en estaocasión hay que definir una propiedad ‘successProperty’ en la respuesta JSON que nos indique si ha tenido éxito o no la operación
Otra novedad respecto al grid, es que podemos indicar a un form desde el servidor si hubo algún error en algún campo. Esto lo podemos utilizar para hacer verificacion de campos en servidor (comprobar duplicados, caracteres no permitidos, etc.). Para ello se define unanueva clase que hereda de JsonReader: JsonErrorReader
view plaincopy to clipboardprint?
1. Ext.form.JsonErrorReader = function() {   
2.     Ext.form.JsonErrorReader.superclass.constructor.call(this, {   
3.         root : 'data',   
4.         successProperty : 'success',   
5.         totalProperty: 'total'  
6.      },   
7.      [   
8.         {name: 'id'},   9.         {name: 'msg'}   
10.      ]);   
11.     };  
Ext.form.JsonErrorReader = function() {
Ext.form.JsonErrorReader.superclass.constructor.call(this, {
root : 'data',
successProperty : 'success',
totalProperty: 'total'
},
[{name: 'id'},
{name: 'msg'}
]);
};
Podemos ver que en este caso, en la definición del reader se cambia el registro por otro nuevo con sólo dos campos: ‘id’ y ‘msg’. En ‘id’ vendrá el identificador del campo en el que hay un error y en ‘msg’ vendrá el error para ese campo. Es importante que activemos losmensajes superpuestos mediante la línea Ext.QuickTips.init();
La definición del form es sencilla. Como en cualquier otro panel, en la propiedad ‘items’ vamos a introducir el array con todos los componentes del formulario, en este campos (texto, áreas de texto, combos, radios, etc.)
view plaincopy to clipboardprint?
1. var formCategories = new Ext.FormPanel({   
2.         frame : true,   ...