PDA

View Full Version : add method in a panel



patrosmania
18 Jun 2009, 6:07 AM
Hi everyone.

I want to add a form to a panel dinamically. But i can't understand the add method. I don't know which approach is best. For instance i have this code, but i doesn't work.



Ext.getCmp('panel').add(

new Ext.form.FormPanel({

title: 'form',
labelWith: 100, ...etc

})

);

How should i resolve this?

18 Jun 2009, 7:37 AM
you need to call doLayout.

If you want a visual tutorial: http://tdg-i.com/58/ext-js-screencast-005-containers-add-and-remove

patrosmania
18 Jun 2009, 7:40 AM
Thanks! I'll check it out.

Do you speak spanish ?

18 Jun 2009, 7:47 AM
Sadly, very little. :(

patrosmania
18 Jun 2009, 7:56 AM
That's ok, don't worry.

It actually worked with add and doLayout but only when i add a Ext.Panel.

When i try with Ext.form.FormPanel or Ext.FormPanel, it displays this error:

record is undefined
this.items.each(fn);

Can you help me please?

18 Jun 2009, 8:00 AM
can you post your (related) code in [code] tags?

patrosmania
18 Jun 2009, 8:10 AM
No problem. The last part doesn't work. As i explained just with Ext.Panel. Thanks!




window_producto = new Ext.Window
({
closeAction: "hide",
layout: "fit",
modal: true,
plain: false,
resizable: true,
height: 400,
width: 600,
items: new Ext.TabPanel
({
deferredRender:false,
border:false,
activeTab:'tab_datos_producto',
autoScroll: true,
items:
[{
title: 'Datos',
id: 'tab_datos_producto',
items: form_datos_producto
},{
title: 'Valores',
id: 'tab_valores_producto',
items: form_valores_producto
},{
title: 'Configuraciones',
id: 'tab_configuraciones_producto'
}]
}),
buttons:
[{
text: 'Cerrar',
handler: function()
{
window_producto.hide();
}
}]
});


var child1 = new Ext.form.FormPanel({
title:'child 1',
html: 'child 1'
});

Ext.getCmp('tab_configuraciones_producto').add(child1);
Ext.getCmp('tab_configuraciones_producto').doLayout();

18 Jun 2009, 8:31 AM
The following works for me:



window_producto = new Ext.Window
({
closeAction: "hide",
layout: "fit",
modal: true,
plain: false,
resizable: true,
height: 400,
width: 600,
items: new Ext.TabPanel
({
deferredRender:false,
border:false,
activeTab:'tab_datos_producto',
autoScroll: true,
items:
[{
title: 'Datos',
id: 'tab_datos_producto',
html: 'form_datos_producto'
},{
title: 'Valores',
id: 'tab_valores_producto',
html: 'form_valores_producto'
},{
title: 'Configuraciones',
id: 'tab_configuraciones_producto'
}]
}),
buttons:
[{
text: 'Cerrar',
handler: function()
{
window_producto.hide();
}
}]
});

window_producto.show();


var child1 = new Ext.form.FormPanel({
title:'child 1',
html: 'child 1'
});

Ext.getCmp('tab_configuraciones_producto').add(child1);
Ext.getCmp('tab_configuraciones_producto').doLayout();

18 Jun 2009, 8:31 AM
by the way, if form_valores_producto
is a form, it can be a child of TabPanel.

patrosmania
18 Jun 2009, 8:38 AM
I forgot to mention that the
var child1 = new Ext.form.FormPanel({
title:'child 1',
html: 'child 1'
});

Ext.getCmp('tab_configuraciones_producto').add(child1);
Ext.getCmp('tab_configuraciones_producto').doLayout();

part is done when a JSONStore finish loading. Also the window open method is called in other function.

So it's like this:



store_conf_producto.on('load', function()
{
var child1 = new Ext.form.FormPanel({
title:'child 1',
html: 'child 1'
});

Ext.getCmp('tab_configuraciones_producto').add(child1);
Ext.getCmp('tab_configuraciones_producto').doLayout();


});



That does not work for me =(

patrosmania
19 Jun 2009, 4:49 AM
JGarcia, did you find any solution for including a form instead of a panel with the add method? Thanks in advance.

19 Jun 2009, 5:11 AM
it works for me. :0\

patrosmania
19 Jun 2009, 5:47 AM
I don't know what happen, but today it did work for me. Thanks for your help!