Creando Formas con Extjs

Desarrollo Extjs 4 on ,

Para el manejo de formas en Extjs , se realiza bajo el componente

Ext.form.Panel

, Esta clase hereda la clase panel . La clase form realiza el llamados request  con los métodos load, submit especificos. La clase form acepta el objeto items de una forma basica como los campos input (number, text, email , date etc.) , botones y soporta diferentes tipo de layout : como column layout, box layout  . entre otros Este es el link de la documentacion del paquete.http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Panel

A continuación mostramos el código de una forma sencilla sobre la creacion de una forma Extjs.

 

 

Ver demo aqui

Ext.onReady(function(){

 var forma = Ext.create("Ext.form.Panel",{
    title : "Contactenos", //-> titulo del panel form
    width : 500,
    height: 400,
    id    : "x_form1",
    items : [{
                xtype: "textfield", //-> tipo campo texto
                name : "nombre_contacto", // nombre del campo
                fieldLabel : "Nombre Contacto" // label o etiqueta del campo
    },
    {
                xtype: "textfield",
                name : "correo",
                fieldLabel : "Correo Contacto"
                vtype : "email" // tipo de validacion email. entre otros time etc.. 
    },
    {
                xtype : "textarea",
                name  : "comentario"
                fieldLabel : "comentario"
    }
   ],
    buttons:[{text:"Enviar",handler:function(e){
           //Codigo de envió de datos hacia al servidor
           // capturo la forma 
           var forma = Ext.getCmp("x_form1");
           // valido si el formulario esta bien registrado
           if(forma.getForm().isValid()){
              Ext.msg.alert("Error","Por favor Validar el formulario");
              return false;
           }

           // envió el formulario en caso de que el formulario este bien.
           forma.submit({
              url : "post.php",
              params : {param1:"valor1"}
           });

    }}]

 });

 form.render("x_forma1");
});