No se activa el tab
Hola amigos tengo el siguiente problema: En aplicación tengo un área donde muestro un Tabpanel que por defecto carga un Tab, y después dinámicamente le voy agregando mas tabs a este contenedor, ahora que sucede que cuando cierro los tabs que cree dinámicamente el tab que estaba por defecto no se activa. adjunto el código para ayuda.
Ext.ns('app');
Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
onRender : function(ct, position){
this.el = ct.createChild({tag: 'iframe', id: 'iframe-'+ this.id, frameBorder: 0, src: this.url});
}
});
Ext.onReady(function() {
//Para mostrar los avisos de validación
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//Generamos el viewport
var viewport = new Ext.Viewport({
layout:'border',
items: [app.navigation,app.tabpanel,app.header]
});
});
app.navigation = {
title: 'Administracion',
region: 'west',
id:'navigation',
split:true,
border:true,
width: 175,
minSize: 175,
maxSize: 400,
margins:'2 0 3 3',
collapsible: true,
collapsedTitle: true,
//layout:'accordion',
layout:'border',
//layout:'fit',
layoutConfig:{
animate:true
},
items:[app.menu]
}
app.menu = {
id:'menu',
xtype: 'treepanel',
region:'center',
autoScroll:true,
title:'Menú',
iconCls:'nav',
rootVisible: false,
border:false,
lines: false,
singleExpand: false,
useArrows: true,
listeners: {
click : {
scope : this,
fn : function(n,e) {
if(n.leaf)
{
//Accedemos a los a atributod del json que usamos para crear el nodo con
if (n.attributes.url) {
url = n.attributes.url;
}
else {
url = n.id;
}
app.addTabPostComprobacion(n.id,n.text,url,n.attributes.tabType);
}
}
}
},
loader: new Ext.tree.TreeLoader({
dataUrl:'/js/comunes/app.tree.js'
}),
root: new Ext.tree.AsyncTreeNode({
expanded :true
})
}
///Mi arbol de navegación
[{
text:'Usuarios',
expanded:false,
iconCls:'menu_usuarios',
children:[{
id : 'formulario',
tabType:'load',
url:'usuario',
text:'Usuario',
iconCls:'user_add',
leaf:true
},{
id : 'register',
tabType:'load',
url:'usuario/Register',
text:'Registrar',
iconCls:'user_add',
leaf:true
}]
}]
//Mi contenedor de Tabs con el que cargo por defecto
app.mytabpanel = Ext.extend(Ext.TabPanel, {
initComponent: function(){
app.mytabpanel.superclass.initComponent.apply(this, arguments);
}
});
// register xtype to allow for lazy initialization
Ext.reg('mytabpanel', app.mytabpanel);
app.tabpanel = new Ext.TabPanel({
id: 'tabs',
border:false,
activeItem: 0,
region:'center',
margins: '2 3 3 0',
autoScroll:true,
enableTabScroll:true,
items:[{
id:'cuadro_inicio',
closable:false,
layout:'fit',
title: 'Inicio',
iconCls:'house',
autoLoad: {url: 'principal', border:false, scripts: true,scope: this}
}]
});
//Funcion addPanel
app.addTabPostComprobacion = function (id,title,url,type)
{
//alert(url);
var open = !app.tabpanel.getItem(id);
if (open)
{
switch (type)
{
case 'iframe':
//Creamos un nuevo ifram y cargamos dentro la url
var newPanel = new Ext.Panel({
id : id,
title: title,
loadScripts: true,
autoScroll: true,
closable: true,
iconCls:id+'_icon',
layout:'fit',
items: [ new Ext.ux.IFrameComponent({ id: id, url: url, name: id}) ]
});
app.tabpanel.add(newPanel);
app.tabpanel.setActiveTab(newPanel);
break;
case 'load':
//Cargamos la pestaña por ajax
var newPanel = new Ext.Panel({
id : id,
layout: 'fit',
title: title,
loadScripts: true,
closable: true,
border:false,
autoLoad: {
url: url,
border:false,
scripts: true,
scope: this
}
});
app.tabpanel.add(newPanel);
app.tabpanel.setActiveTab(newPanel);
break;
default:
alert("Tipo de tab no definido");
break;
}
}
else {
//Si ya tenemos la pestaña creada la seleccionaremos
app.tabpanel.setActiveTab(id);
}
}
//aki mando a insertar un tab
var nombre = new Ext.form.TextField({
fieldLabel : 'Nombre(s)',
name : 'nombre',
id:'idnombre',
allowBlank : false,
maskRe:/^([a-zA-Z0-9áéíóúñüÑ,. ]+ ?[a-zA-Z0-9áéíóúñüÑ,. ]*)+$/,
blankText : 'Este campo es obligatorio'
});
var papellido=new Ext.form.TextField({
fieldLabel : 'Primer Apellido',
name : 'apellido1',
id:'idapellido1',
allowBlank : false,
maskRe:/^([a-zA-Z0-9áéíóúñüÑ,. ]+ ?[a-zA-Z0-9áéíóúñüÑ,. ]*)+$/,
blankText : 'Este campo es obligatorio'
});
var idformulario= new Ext.FormPanel({
border:false,
id: 'formulario',
labelAlign : 'top',
frame: true,
layout: 'form',
items:[nombre,papellido],
buttonAlign : 'right',
buttons :[{
text : 'Aceptar',
icon:'add',
iconCls:'add',
},{
text : 'Cerrar',
icon:'remove',
iconCls:'remove',
}]
});
app.tab_insertar=Ext.getCmp('tabs');
app.tab_insertar.add(idformulario);
app.tab_insertar.doLayout();
//Inserto otro Tabs
<h1>Hola Mundo</h1>
Hola, no se si te servirá de ayuda pero
¿ has probado de seleccionar el tab por defecto en el evento [b]remove[/b] del TabPanel?
¿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.
