PDA

View Full Version : viewport bug with card panels, please help



Drsunno
30 Jun 2008, 5:47 AM
Hi,

it would be really nice if some one could help me... I am getting really fustrated..
I am a beginner with js ext...

I have a viewport with 2 (tab)panels (center and south), now I would like to be able to show 3 different views, one with the 2 panels, one with centerpanel in fullscreen, and one south panel fullscreen.

I tried to adapt the layout-browser example but it seams it doesnt really work.
Here the code:




<html>
<head>
<title>Ext 2.0 Layout Examples</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<!-- custom includes -->
<link rel="stylesheet" type="text/css" href="layout-browser.css">

<script type="text/javascript">
<!--


var bothpanels = {
id:'bothpanels-panel',
layout:'border',
bodyBorder: false,
defaults: {
collapsible: true,
split: true,
animFloat: false,
autoHide: false,
useSplitTips: true,
bodyStyle: 'padding:15px'
},
items: [{
title: 'Footer',
region: 'south',
height: 450,
minSize: 75,
margins: '5 0 0 0',
xtype: 'tabpanel',
activeItem: 0,
items:[{title: 'Tab Bottom',
layout:'fit',
contentEl:'south1'
},{
contentEl:'south2',
title: 'tab 2',
closable: false,
autoScroll:true
}]

},{
title: 'Main Content',
collapsible: false,
region:'center',
height: 450,
margins: '5 0 0 0',
xtype: 'tabpanel',
activeItem: 0,
items:[{title: 'Tab Top',
layout:'fit',
contentEl:'center2'
},{
contentEl:'center3',
title: 'tab 2',
closable: false,
autoScroll:true
}]

}]
};
var panel1 = {
xtype: 'tabpanel',
id: 'panel1-panel',
plain: true,
activeItem: 0,
defaults: {bodyStyle: 'padding:15px'},
items:[{title: 'tabe 1',
layout:'fit',
contentEl:'center2'
},{
contentEl:'center3',
title: 'tab 2',
closable: false,
autoScroll:true
}]
};


var panel2 = {
xtype: 'tabpanel',
id: 'panel2-panel',
plain: true,
activeItem: 0,
defaults: {bodyStyle: 'padding:15px'},
items:[{title: 'tab 1',
layout:'fit',
contentEl:'south1'
},{
contentEl:'south2',
title: 'tab 2',
closable: false,
autoScroll:true
}]
};
var contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: [bothpanels,panel2,panel1]
};

Ext.onReady(function(){

new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 30
},
contentPanel
],
renderTo: Ext.getBody()
});
});



function showPanel(panelID){
Ext.getCmp('content-panel').layout.setActiveItem(panelID + '-panel');
}

//-->


</script>
</head>
<body>
<div id="header"><h1>Ext Layout Browser</h1></div>
<div id="north"></div>
<div style="display:none;">
<div id="south1">
Panel south 1<br/>
<a href="javascript:showPanel('panel1');">panel 1 </a><br/>
<a href="javascript:showPanel('panel2');">panel 2 </a><br/>
<a href="javascript:showPanel('bothpanels');">both </a><br/>
</div>
<div id="south2">
Panel south 2<br/>
<a href="javascript:showPanel('panel1');">panel1 </a><br/>
<a href="javascript:showPanel('panel2');">panel 2 </a><br/>
<a href="javascript:showPanel('bothpanels');">both </a><br/>
</div>

<div id="center3">
Panel center 3<br/>
<a href="javascript:showPanel('panel1');">panel1 </a><br/>
<a href="javascript:showPanel('panel2');">panel 2 </a><br/>
<a href="javascript:showPanel('bothpanels');">both </a><br/></div>
<div id="center2">Panel center 2<br/>
<a href="javascript:showPanel('panel1');">panel1 </a><br/>
<a href="javascript:showPanel('panel2');">panel 2 </a><br/>
<a href="javascript:showPanel('bothpanels');">both </a><br/>
</div>
</div>
</body>
</html>

perhaps it is the referal from the "contentEl" to the same divs...

if you click a few times the content seams to dissapeare... could anybody pleas help me a little bit?

Regards
Gido Carper