Results 1 to 1 of 1

Thread: Loading exter form in a TabPanel

  1. #1
    Ext User wilfredor's Avatar
    Join Date
    Jul 2009
    Location
    Venezuela
    Posts
    26

    Default Loading exter form in a TabPanel

    Hi Guys

    I'm having some problems with the load of a form inner a TabPanel, The form's loading out of the Tabpanel in the body, I want to add the content inner the actual TabPanel Item, that is my source:

    main page
    PHP Code:
    Ext.onReady(function(){                     
        
    // basic tabs 1, built from existing content
        // second tabs built from JS
        
    var tabs2 = new Ext.TabPanel({
            
    renderTo'container',
            
    activeTab0,
            
    width:'70%',
            
    height:200,
            
    plain:true,
            
    defaults:{autoScrolltrue},
            
            
    enableTabScroll true,
            
    animScrolltrue,
            
    layoutOnTabChangetrue

            
    items:[{
                    
    title'Tab 1',
                    
    html"Content o my tab"
                
    },{
                    
    title'Formulario',
                    
    nocachetrue,
                    
    text"Loading...",
                    
    timeout10,
                    
    autoLoad: {url'myform.html',scriptstrue}
                }
            ]
        });
    }); 
    myform.html

    PHP Code:
    <script language="javascript">
    Ext.onReady(function(){
      
    Ext.QuickTips.init();

        
    // turn on validation errors beside the field globally
        
    Ext.form.Field.prototype.msgTarget 'side';  
    /*
     * ================  Hoja de Vida  =======================
    */

    /*********** Escribe un mensaje**********/
    function fn_AKExtmessagetitle ){
       
    Ext.Msg.show({
          
    titletitle,
          
    msgmessage ,
          
    buttonsExt.MessageBox.OK,
          
    iconExt.MessageBox.INFO
         
    });
     }
    /**************limpiar formulario*******************************/
    function fn_resetForm(button,event) {
        
    Ext.getCmp('formulario');
        
    f.getForm().reset();
        
    //f.reset();
    }
    /**************evento cuando se envia el pormulario ************/
    function fn_submitForm(button,event){

       var 
    Ext.getCmp('formulario');
       if( 
    f.getForm().isValid() == true)
       {
        var 
    obj_nombre Ext.get('nombre').dom.value;
        var 
    obj_direccion Ext.get('direccion').dom.value;
        var 
    obj_telefono Ext.get('telefono').dom.value;
        var 
    obj_pais Ext.get('pais').dom.value;
        var 
    obj_nacionalidad Ext.get('nacionalidad').dom.value;
        var 
    obj_grado Ext.get('grado').dom.value;
        var 
    obj_libreta Ext.get('libreta').dom.value;
        var 
    obj_zurda Ext.get('zurdo').dom.value;
        var 
    obj_conyugue Ext.get('conyugue').dom.value;
        var 
    obj_email Ext.get('email').dom.value;
        var 
    obj_lugarnacimiento Ext.get('lugarnacimiento').dom.value;
        var 
    obj_fechanacimiento Ext.get('fechanacimiento').dom.value;
        var 
    obj_cedula Ext.get('cedula').dom.value;
        var 
    obj_licencia Ext.get('licencia').dom.value;
        var 
    obj_ivss Ext.get('ivss').dom.value;
        var 
    obj_ecivil Ext.get('ecivil').dom.value;
        var 
    obj_hijos Ext.get('hijos').dom.value;    
        
           
    Ext.Ajax.request({
             
    url 'guardar_curriculum.php',
                      
    method'POST',
                      
    params:{
                            
    p_nombre:obj_nombre,
                            
    p_direccion:obj_direccion,
                            
    p_telefono:obj_telefono,
                            
    p_pais:obj_pais,
                            
    p_nacionalidad:obj_nacionalidad,
                            
    p_grado:obj_grado,
                            
    p_libreta:obj_libreta,
                            
    p_zurdo:obj_zurda,
                            
    p_conyugue:obj_conyugue,
                            
    p_email:obj_email,
                            
    p_lugarnacimiento:obj_lugarnacimiento,
                            
    p_fechanacimiento:obj_fechanacimiento,
                            
    p_cedula:obj_cedula,
                            
    p_licencia:obj_licencia,
                            
    p_ivss:obj_ivss,
                            
    p_ecivil:obj_ecivil,
                            
    p_hijos:obj_hijos
                          
    },
                      
    success: function ( resultrequest ) {
          
                          
    Ext.tip.msg('Curriculum',result.responseText);
                          
    fn_resetForm();
                   },
                      
    failure: function ( resultrequest ) {
                       var 
    resultMessage result;
                   }
           });
       }else{
            
    Ext.tip.msg('Curriculum','Recuerde llenar todos los datos');
       }
       }

    /*** parametros para pintar el formulario*************/
    var formulario = new Ext.FormPanel({
            
    labelAlign'top',
            
    title'Datos del Empleado',
            
    bodyStyle:'padding:10px;',
            
    id:'formulario',
            
    layout'form',
            
    width'70%',
            
    items: [{
                
    layout:'column',
                
    border:false,
                
    items:[{
                    
    columnWidth:.5,
                    
    layout'form',
                    
    border:false,
                    
    items: [{
                        
    xtype:'textfield',
                        
    fieldLabel'Nombre',
                        
    id'nombre',
                        
    name'nombre',
                        
    anchor:'95%',
                        
    allowBlank:false

                    
    }, {
                        
    xtype:'textfield',
                        
    fieldLabel'Direcci&oacute;n',
                        
    id'direccion',
                        
    name'direccion',                    
                        
    anchor:'95%',
                        
    allowBlank:false
                    
    }, {
                        
    xtype:'textfield',
                        
    fieldLabel'Pais',
                        
    id'pais',
                        
    name'pais',                    
                        
    anchor:'95%',
                        
    allowBlank:false
                    
    }, {                    
                        
    xtype:'textfield',
                        
    fieldLabel'Tel&eacute;fono',
                        
    name'telefono',                    
                        
    id'telefono',
                        
    anchor:'95%'
                    
    }, {
                        
    xtype:'textfield',
                        
    fieldLabel'Nacionalidad',
                        
    id'nacionalidad',
                        
    anchor:'95%',
                        
    allowBlank:false    
                    
    }, {
                        
    /** Combobox de Grado **/
                        
    xtype:'combo'
                        
    ,fieldLabel:'Grado'
                        
    ,displayField:'grado'
                        
    ,valueField:'id'
                        
    ,id:'grado'
                        
    ,store: new Ext.data.SimpleStore({
                             
    fields:['id''grado']
                             
    /*** Ver estados.js, all se define LCombo.grado ***/
                            
    ,data:LCombo.grado
                        
    })
                        ,
    triggerAction:'all'
                        
    ,mode:'local'
                        
    ,lastQuery:''
                        
    ,emptyText:'Seleccione el grado...'
                        
    ,anchor:'95%'
                        
    ,allowBlank:false    

                    
    }, {
                        
    xtype:'textfield',
                        
    fieldLabel'Libreta Militar',
                        
    id'libreta',
                        
    anchor:'95%'    
                    
    }, {        
                        
    /** Combobox de Zurdo **/
                        
    xtype:'combo'
                        
    ,fieldLabel:'&iquest;Es usted Zurdo?'
                        
    ,displayField:'zurdo'
                        
    ,valueField:'id'
                        
    ,id:'zurdo'
                        
    ,store: new Ext.data.SimpleStore({
                             
    fields:['id''zurdo']
                             
    /*** Ver estados.js, all se define LCombo.zurdo ***/
                            
    ,data:LCombo.zurdo
                        
    })
                        ,
    triggerAction:'all'
                        
    ,mode:'local'
                        
    ,lastQuery:''
                        
    ,anchor:'95%'
                        
    ,allowBlank:false    
                        
                        
                    
    }, {
                        
    xtype:'textfield',
                        
    fieldLabel'Nombre del Conyugue',
                        
    id'conyugue',
                        
    anchor:'95%'    
                    
    }, {                                                    
                        
    xtype:'textfield',
                        
    fieldLabel'Cantidad de hijos',
                        
    id'hijos',
                        
    anchor:'95%',
                        
    maskRe: /[0-9]/,
                        
    maxLength2
                    
    }
                    
                    ]
                },{
                    
    columnWidth:.5,
                    
    layout'form',
                    
    border:false,
                    
    items: [{
                        
    xtype:'textfield',
                        
    fieldLabel'Ciudad',
                        
    id'ciudad',
                        
    anchor:'95%',
                        
    allowBlank:false
                    
    },{
                        
    xtype:'textfield',
                        
    fieldLabel'Estado',
                        
    id'estado',
                        
    anchor:'95%',
                        
    allowBlank:false
                    
    },{
                        
    xtype:'textfield',
                        
    fieldLabel'Email',
                        
    id'email',
                        
    vtype:'email',
                        
    anchor:'95%',
                        
    allowBlank:false
                    
    },{
                        
    xtype:'textfield',
                        
    fieldLabel'Lugar de Nacimiento',
                        
    id'lugarnacimiento',
                        
    anchor:'95%',
                        
    allowBlank:false
                    
    },{
                        
    xtype'datefield',
                        
    fieldLabel'Fecha de Nacimiento',
                        
    id'fechanacimiento',
                        
    format'd-m-Y'
                        
    //maskRe: /[0-9.]/,
                        //vtype: 'daterange',
                        
    anchor:'95%',
                        
    allowBlankfalse

                    
    }, {
                        
    xtype:'textfield',
                        
    fieldLabel'C&eacute;dula de Identidad / Pasaporte',
                        
    id'cedula',
                        
    anchor:'95%',
                        
    allowBlank:false    
                    
    }, {
                        
    xtype:'textfield',
                        
    fieldLabel'Licencia de Conducir',
                        
    id'licencia',
                        
    anchor:'95%'    
                    
    }, {
                        
    xtype:'textfield',
                        
    fieldLabel'Carnet IVSS No.',
                        
    id'ivss',
                        
    anchor:'95%'    
                    
    }, {
                        
    xtype:'textfield',
                        
    fieldLabel'Estado Civil',
                        
    id'ecivil',
                        
    anchor:'95%',
                        
    allowBlank:false    
                    
    }
                    
                    ]
                }]
            }],

            
    buttons: [{
                
    text'Guardar',
                
    handlerfn_submitForm
            
    },{
                
    text'Cancelar',
                
    handlerfn_resetForm

            
    }]
        });

    /********* Render de objetos **********/
        
    formulario.render(Ext.get('ext-gen16'));    
    });
    </script> 
    The tab is loading out of The TabPanel, some idea?
    I want to render my form in the item Tab. (ext-gen16)'s the div id thank's firebug but it's not loading
    Last edited by wilfredor; 17 Aug 2009 at 11:11 AM. Reason: add question

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •