Foro

Creación de un formulario

0
Hola buen día. Estoy intentado crear un formulario de captura con Extjs, sin embargo la forma que quiero darle es algo asi: [TEXTFIELD ] [ TEXTFIELD ] [ textfield ] Nombre Apellido paterno Apellido materno [ ] [ ] [ ] Fecha de nacimiento (DD/MM/YYYY) [ ] Estado de nacimiento Nota: En la vista previa no se distingue muy bien lo que quiero hacer, sin embargo es dividir el panel en tres, para ir poniendo los datos, a veces sólo requiero poner un dato, como en el caso de estado de nacimiento, etc. Qué temas debo leer, o si hay algún ejemplo del cual pueda basarme, se los agradeceré mucho, saludos.

4 Respuestas

Mejores votos Por fecha Solución
0
Puedes usar el Layout tipo "table". En este tipo de layout cada item corresponde a una celda de tabla, puedes usar el colspan para unir celdas. El contido de la celda debe ser un layout "form", para que te aparecza la label del campo.
0
Gracias por la respuesta, tienes algún ejemplo de su uso? por cierto adema? quiero agregarle esto: Crea un panel -Agregar un fieldset que se pueda esconder -En el fieldset agregar esto [TEXTFIELD ] [ TEXTFIELD ] [ textfield ] Nombre Apellido paterno Apellido materno [ ] [ ] [ ] Fecha de nacimiento (DD/MM/YYYY) [ ] Estado de nacimiento -Agregar otro fieldset - Agregar más objetos Espero haberme explicado, hay manera de subir imágenes?? para que muestre lo que quiero hacer con Extjs. Saludos y gracias
0
Hola a todos: Pongo una imagen de lo que quiero hacer. ya llevo hecha una parte: Ya puse los tabs, el fieldset, sólo que no puedo hacer que los campos se dividan en el panel, intenté con layout 'column', poniendo posiciones X y Y y nada. <!-- m -->http://sistemas.seq.gob.mx/seab/propuesta_pantalla.gif<!-- m --> el códido que llevo para lo que llevo es este: 
// JavaScript Document
Ext.ns('uimqroo');
Ext.BLANK_IMAGE_URL = '../ext3/resources/images/default/s.gif';
uimqroo.Panel =
{
   init: function()
   {   
      //PANEL DE LOS DATOS GENERALES
      var datosGenerales=new Ext.FormPanel
      (
      {      title      :'Datos Generales', 
             bodyStyle  :'padding: 10px', 
             height     :400,             
             border     :false,
             width      :750,                         
             items:
             [
              {
                xtype:'fieldset',
                collapsible: false,
                title: 'Datos Personales',
                autoHeight:true,
                
                //layout:'fit',
                items:
                [
                { 
                  columnWidth:.3, 
                  xtype:'textfield',
                  x:0,
                  y:5,
                  fieldLabel: 'Apellido Paterno',
                  name: 'txtApellidoPaternoAlumno',
                  anchor:'30%'                
                },
                {
                  columnWidth:.3,  
                  xtype:'textfield',
                  x:10,
                  y:30,
                  fieldLabel: 'Apellido Paterno',
                  name: 'txtApellidoPaternoAlumno',
                  anchor:'30%'                
                }                
                ]
              }                 
             ]
                            
      }       
      ) //FIN DEL PANEL DE DATOS GENERALES
      //PANEL DE LOS DATOS ACADÉMICOS
      var datosAcademicos=new Ext.FormPanel
      (
      {      title      :'Datos Acad&eacute;micos', 
             bodyStyle  :'padding: 10px', 
             height     :600,              
             items:
             [
             {
             }
             ]
                            
      }       
      ) //FIN DEL PANEL DE DATOS ACADÉMICOS
      //PANEL DE LOS OTROS DATOS
      var otrosDatos=new Ext.FormPanel
      (
      {      title      :'Otros Datos', 
             bodyStyle  :'padding: 10px', 
             height     :600,              
             items:
             [
             {
             }
             ]
                            
      }       
      ) //FIN DEL PANEL DE LOS OTROS DATOS
   
     //TABS
     var tabs=new Ext.TabPanel
     (
     {
        //Configuración del tab              
        activeTab   : 0,         
        width       : 750,
        frame       : true,                
        items       : [datosGenerales,datosAcademicos,otrosDatos]
     }
     )//FIN DEL TAB 
   
     tabs.render('frame');     
   } //Fin de la función del INIT
}//Fin del objeto PANEL del NM UIMQROO
Ext.onReady(uimqroo.Panel.init,uimqroo.Panel);
0
Hola, ya pude resolverlo. En términos generales hice esto: 1.- Cree un tabpabel 2.- Cree un fieldset 3.- Dentro del fieldset agregué un container con el layout hbox 4.- Dentro del container, agrego tantos container según el número de columnas que necesito, con el layout form. A quien quiera el código que me lo pida por aqui o a mi correo <!-- e -->tigrillo34@hotmail.com<!-- e --> y se lo paso, no lo pongo porque aún no lo he terminado. Saludos y gracias

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.

Tags

Ext JS 3