Problema con TabPanel Ayuda urgente
Hola amigos, soy novato en ExtJs 2.2, ojalá puedan ayudarme tengo el siguiente problema:
Tengo un archivo index.php donde creo la pantalla principal de la aplicación, esta tiene una barra de menú arriba, al lado izquierdo tengo un “accordion” y al lado derecho un tabpanel.
[img]http://img11.imageshack.us/img11/9713/image002zu.jpg[/img]
Cuando clickeo la primera vez en menú “Registrar Cliente” me agrega el tabpanel con el formulario desde otro archivo qe lo llamo frmClientes.php, luego cuando cierro el tabpanel y vuelvo a clikear en “Registrar Cliente” me agrega el tabpanel pero no me muestra el formulario.
[img]http://img11.imageshack.us/img11/5933/image004li.jpg[/img]
No se qe estoy haciendo mal, en firefox tiene ese problema pero en Internet Explorer funciona correctamente
Gracias de antemano, ojala me ayuden, les pongo el codigo a continuación.
[b]index.php[/b]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" pageEncoding="UTF-8">
<title></title>
<!-- archivo principal de ExtJS -->
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css"/>
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<!-- estilo de recursos -->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
try{
Ext.BLANK_IMAGE_URL = './ExtJS/resources/images/default/s.gif';
//************** barra Toolbar con Menus *********************
var barra=new Ext.Toolbar({
region:'north',
items:[{
text:'Clientes',
iconCls:'iCliente',
menu:{
items:[
{text:'Registrar Cliente',
leaf:true,
listeners:{
click: function(){mostrarTab('frmClientes', 'Clientes')} // frmClientes es el nombre de otro archivo php
// qe tiene un formulario
}
},
{text:'Listar Clientes',
leaf:true,
listeners:{
click: function(){mostrarTab('frmClientes', 'Clientes')}
}}
]}
},{
text:'Mantenimiento',
iconCls:'iMantenimiento',
menu:{
items: [
{text:'Usuarios'},
{text:'Listar Usuarios'}
]
}}]
})
//**************La barra de tabs, del cuerpo**************
var tabs = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
autoDestroy:true,
enableTabScroll:true,
items:[{
id:'tabInicio',
contentEl:'fondo-inicio',
title: 'Inicio',
closable:false,
autoScroll:true
}]
});
//*************** Inicio onReady ***************
Ext.onReady(function(){
//Componentes de la Interfaz
var viewport = new Ext.Viewport({
layout:'border',
items:[barra,{
region:'west',
id:'PanelAdmin',
title:'Panel Administración',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items:[{
title:'Usuario',
border:false
},{
title:'Clientes',
border:false
}]
}, tabs
]
});
});
//*************** Fin onReady ***************
//***********funcion que agrega un tab******************
function mostrarTab(nombre, titulo){
if(titulo==null)
titulo=nombre;
//Variable para saber si el tab esta abierto
var open = !tabs.getItem(nombre);
if(open){
tab = new Ext.Panel({
contentEl:nombre,
id: nombre,
title: titulo,
autoScroll:true,
//iconCls: 'tabs',
closable:true,
autoScroll:true,
autoLoad: {url: nombre + '.php', scripts:true , scope: this}
});
tabs.add(tab);
tab.show();
return;
}
//tabs.add(tab);
tab = tabs.getItem(nombre);
tab.show();
return;
}
}catch(err){
Ext.Msg.alert('Error',err.description);
}
</script>
</head>
<body>
<div id='fondo-inicio' style="background: url('images/blue.jpg') no-repeat; width: 100%; height: 100%; float: right;"></div>
</body>
</html>
[b]frmClientes.php[/b]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
Ext.namespace('cliente.frmcliente');
cliente.frmcliente={
init:function(){
this.frmClientes = new Ext.FormPanel({
border:false,
layout:'form',
renderTo : newCliente, //contenedor div con id newCliente
defaults:{xtype:'textfield'},
bodyStyle:'padding: 50px',
items:[{fieldLabel:'Nombre Cliente',name:'txtNombre',anchor:'60%',allowBlank:false},
{fieldLabel:'Apellido Paterno',name:'txtApPaterno',anchor:'50%',maxLength:100},
{fieldLabel:'Apellido Materno',name:'txtApMaterno',anchor:'50%',maxLength:100},
{fieldLabel:'Tipo Cliente', xtype:'combo', name:'cboTipoCliente',anchor:'50%',triggerAction:'all'},
{fieldLabel:'Dirección',xtype:'textarea',name:'txtDireccion',anchor:'70%',maxLength:250},
{fieldLabel:'Fecha Nacimiento',xtype:'datefield',name:'dtFechaNac',anchor:'30%',allowBlank:false}
],
buttons:[{text:'Guardar'},{text:'Salir'}],
buttonAlign:'center'
});
}
}
Ext.onReady(cliente.frmcliente.init,cliente.frmcliente);
</script>
</head>
<body>
<div id="newCliente"></div>
</body>
</html>
Usuario no registrado
07/10/2009
has un "doLayout" del tab cuando lo muestres, esto es algo muy común.
saludos
Crysfel Villa
08/10/2009
stock, gracias por contestar voy a probarlo, este problema me esta rompiendo la cabeza
Invitado
08/10/2009
¿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.