ExtJS Tab Panel Issue

[romulo.eng]

Hi,

I am new to the forum and to ext-js and am trying to use ext with C# .net... Everything was going great until I tried to put some divs as contentEl of some Tab Panels...

Everytime the page loads the divs of the tabpanels not selected are on the top of the page(before everything else) and only when I click on the tabpanels where they are supposed to be, that the divs go to the right place and my page looks how I intended to.

Is there a way around it?Am I configuring it wrong?

Thanks in advance for your help.




<script type="text/javascript">
Ext.require(['*']);
Ext.onReady(function () {
var cw;


Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [
{
//Cabeçalho
region: 'north',
xtype: 'box',
id: 'header',
contentEl: 'HeaderDiv',
height: 35,
},
{
//Menus da Esquerda
region: 'west',
layout: 'border',
border: false,
width: '40%',
items: [
{
region: 'center',
title: 'Monitoramento do Sistema',
contentEl: 'ControlesDiv',
height: '70%',
collapsible: true,
},
{
region: 'south',
title: 'Log',
contentEl: 'LogDiv',
width: '100%',
collapsible: true,
}]
},
{
//Diagramas do Centro
region: 'center',
layout: 'border',
border: false,
items: [
{
//Diagramas Tabulados
region: 'center',
xtype: 'tabpanel',
title: 'Visualização',
height: '50%',
items: [
{
title: 'Cálculo das Possíveis Ilhas',
id : 'panel1',
contentEl: 'MapView1Div',
},
{
title: 'Melhores Ilhas',
id : 'panel2',
contentEl: 'MapView1Div2',
}]
},
{
//Diagrama Unifilar
region: 'south',
xtype: 'tabpanel',
height: '50%',
title: 'Diagramas',
items: [
{
title: 'Melhores Ilhas',
//contentEl: 'MapView1Div2',
minHeight: 60,
}]
}]
}]
});
});
</script>

[scottmartin]

Viewport is designed to use the entire body of the browser. Try using a panel/container.

btw, if you are using .NET, you may be interested in: http://www.ext.net/

Scott.

[romulo.eng]

I already tried Ext.net But prefer to use the ext javascript... I'll make an attempt without the viewport.

Thanks.

[romulo.eng]

Well I was thinking about doing it without the viewport, but since my webpage was made to use it I gave up on that.

I found a way around it, thouth. I made a "divception" I put all my divs that went inside other tabs inside one big div, set my initial tab to display that one(with the original div for that tab in the beginning and a lot o breaks until the next div) and used the other divs normally for their tabs.And of course I turned of the scroll of the first tabpanel...

It is not the best way but it worked if anyone knows a more elegant way I apreciate the help...