PDA

View Full Version : How add tab content dynamicly?



wilfredor
18 Aug 2009, 5:42 AM
It's a simple question. I have a TabPanel and I want to add content in the item 0 dynamictly. How do it that?

jay@moduscreate.com
18 Aug 2009, 5:44 AM
use the various panel or container methods in the API.

Lukman
18 Aug 2009, 5:45 AM
tabpanel.get(0).add(stuffToAdd) ?

wilfredor
18 Aug 2009, 6:09 AM
tabpanel.get(0).add(stuffToAdd) ?

But I have in tab2 some like this:

autoLoad: {url: 'test.js',scripts: true},


And inner test.js

tab2.get(0).add(myFormPanel);

But It Show "Unknow tab2"

Lukman
18 Aug 2009, 6:24 AM
You don't want us to hack into your PC to get to your code, do you? Then show us a substantial amount of code that we can run to reproduce the problem.

jay@moduscreate.com
18 Aug 2009, 6:25 AM
http://extjs.com/learn/Ext_Forum_Help

wilfredor
18 Aug 2009, 6:39 AM
My Tab definition

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.js',scripts: true}
}
]
});
});


myform.js



<script language="javascript">


/*** 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

}

]
},{
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
}

]
}]
}],

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

}]
});

/********* Render de objetos **********/
tab2.get(1).add(formulario);

});
</script>


Firebug Show tab2 is not defined

Lukman
18 Aug 2009, 6:55 AM
You should also enclose the whole code in myform.js inside Ext.onReady(function(){ .. }); just like your tab definition ...

wilfredor
18 Aug 2009, 7:04 AM
I do not want that. Since each tab has a complex code, if I do that, this would apply to very heavy. The idea is to load only what is necessary for each tabpanel and then destroy the object. Maybe in the future I may need this form in other applications (Modular Programming)

Lukman
18 Aug 2009, 7:11 AM
Then just enclose the line

tab2.get(1).add(formulario);inside the Ext.onReady() ..

whatever you do, you can only use the tab2 inside Ext.onReady() because there is where you define it.

If you still don't want it, suit yourself.

wilfredor
18 Aug 2009, 7:18 AM
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 0',
html: 'Contenido de mi tab'
},{
title: 'Formulario',
nocache: true,
text: 'Cargando...',
timeout: 10,
autoLoad: {url: 'myform.js',scripts: true}
}]
});

tab2.get(1).add(formulario); // here ?
});Here?, because firebug show again tab2 is not defined

Lukman
18 Aug 2009, 7:23 AM
tabs2 or tab2?

Make up your mind!

wilfredor
18 Aug 2009, 7:44 AM
Yes, well it's tabs2 a translating mistake :D

Well.


formulario is not defined

at the end of myform.js or declaration of tabs2. It is immaterial error remains


tabs2.get(1).add(Ext.getCmp('formulario')); or tabs2.get(1).add(formulario); not work

wilfredor
19 Aug 2009, 5:17 AM
Then just enclose the line

tab2.get(1).add(formulario);inside the Ext.onReady() ..

whatever you do, you can only use the tab2 inside Ext.onReady() because there is where you define it.

If you still don't want it, suit yourself.

Yes, form is not defined, because this is defined in the call tab

Lukman
19 Aug 2009, 6:03 AM
Me not understanding you english.

Learn english. Don't rely on translators ...

jay@moduscreate.com
19 Aug 2009, 6:16 AM
Me not understanding you english.

Learn english. Don't rely on translators ...

Be nice dude! A better suggestion would be for him to post in his native language.

wilfredor
8 Sep 2009, 6:29 AM
problem online:

http://www.laposadadelreino.com/test/personal/personal.html

Load tab item content in the seccond time