PDA

View Full Version : FormPanel in a TabPanel, bad layout in active TabItem



wilfredor
21 Aug 2009, 12:13 PM
I need to get out of the current tabitem and click again to view content. The content's a formpanel.

My source. Note: (The remote FormPanel's right)


Ext.onReady(function(){
var tabs2 = new Ext.TabPanel({
renderTo: 'container',
activeTab: 0,
width:600,
plain:true,
defaults:{autoScroll: true},
enableTabScroll: true,
animScroll: true,
layoutOnTabChange: true,
items:[{
title: 'Listado',
html: 'Contenido de mi tab'
},{
title: 'Personal',
nocache: true,
}]
});
/********* Adding a Remote FormPanel to a TabPanel *********/
tabs2.getItem(1).on('activate', function(){
var formulario = new Ext.FormPanel({
id:'formulario',
layout: 'form',
plugins:getRemote('formulario.json')

});
tabs2.get(1).add(formulario);
// formulario.show(); // Nothing
// tabs2.doLayout(); // Work but not show a form layout
}, null, {single:true});
});

http://img17.imageshack.us/img17/3037/layoutproblem.gif

Animal
21 Aug 2009, 12:33 PM
Why


tabs2.get(1).add(formulario);
?

Why not



tabs2.add(formulario);
?

You were adding the FormPanel to a no layout Panel.

wilfredor
21 Aug 2009, 12:45 PM
Whatever, show the same problem.

tabs2.get(1).add(formulario); Because I want to load the remote FormPanel only when the actual tab is actived

Animal
21 Aug 2009, 12:52 PM
Well at least don't use a no-layout Panel then!

wilfredor
21 Aug 2009, 1:35 PM
Could you recommend something? :-?

Animal
21 Aug 2009, 2:49 PM
How would you like that "Personal" Panel to size it's single child item, the FormPanel?

wilfredor
8 Sep 2009, 5:32 AM
I write short changes, the same problem, bad form layout. I canīt undestand where's the faul. (ONLINE TEST HERE >>> (http://www.laposadadelreino.com/test/personal/personal.html))


Ext.onReady(function(){
var tabs2 = new Ext.TabPanel({
renderTo: 'container',
activeTab: 0,
width:600,
plain:true,
defaults:{autoScroll: true},
enableTabScroll: true,
animScroll: true,
layoutOnTabChange: true,
defaults: {
hideMode: 'offsets' // recommended -- prevents formlayout problems in child "tabs" later on
},
items:[{
title: 'Listado',
html: 'Contenido de mi tab'
},{
title: 'Personal',
nocache: true,
listeners: {
render: function(self) {
self.doLayout();
}
}

}]
});
/********* Adding a Remote FormPanel to a TabPanel *********/
tabs2.getItem(1).on('activate', function(){
var formulario = new Ext.FormPanel(
{
id:'formulario',
layout: 'form',
plugins:getRemote('formulario.json'),
}
);
this.add(formulario);

this.doLayout(); // Work but show a bad layout

}, null, {single:true});



});