PDA

View Full Version : Loading exter form in a TabPanel



wilfredor
17 Aug 2009, 10:44 AM
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


Ext.onReady(function(){
// basic tabs 1, built from existing content
// second tabs built from JS
var tabs2 = new Ext.TabPanel({
renderTo: 'container',
activeTab: 0,
width:'70%',
height:200,
plain:true,
defaults:{autoScroll: true},

enableTabScroll : true,
animScroll: true,
layoutOnTabChange: true,

items:[{
title: 'Tab 1',
html: "Content o my tab"
},{
title: 'Formulario',
nocache: true,
text: "Loading...",
timeout: 10,
autoLoad: {url: 'myform.html',scripts: true}
}
]
});
});
myform.html



<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_AKExt( message, title ){
Ext.Msg.show({
title: title,
msg: message ,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
}
/**************limpiar formulario*******************************/
function fn_resetForm(button,event) {
f = Ext.getCmp('formulario');
f.getForm().reset();
//f.reset();
}
/**************evento cuando se envia el pormulario ************/
function fn_submitForm(button,event){

var f = 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 ( result, request ) {

Ext.tip.msg('Curriculum',result.responseText);
fn_resetForm();
},
failure: function ( result, request ) {
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]/,
maxLength: 2
}

]
},{
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%',
allowBlank: false

}, {
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',
handler: fn_submitForm
},{
text: 'Cancelar',
handler: fn_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