Code:
var headDiv = new Ext.Panel({
region:'north',
id:'headID',
border: false,
autoScroll:false,
height: 116,
autoLoad: {
url: '../snippets/head_'+enviroment+'.html',
scripts: true
}
});
var contentDiv = new Ext.TabPanel({
id:'contentID',
activeTab:0,
columnWidth:.76,
items:[{
xtype: 'portal',
title: 'Summary',
items: [{
columnWidth: .33,
style: 'padding:10px',
items: [{
title: 'Navigation',
id: 'navigationID',
width: '180px',
tools: [{id:'gear'}],
draggable: false,
autoLoad: {
url: '../snippets/navigation_panel.html',
scripts: true
}
},{
title: 'Picture',
tools: [{id:'gear'}],
draggable: true,
width: '180px',
autoLoad: {
url: '../snippets/picture.html',
scripts: true
} }]
},{
columnWidth: .66,
style: 'margin-top:10px',
items: [{
title: 'NEWS',
width: '370px',
tools: [{id:'gear'}],
collapsible:false,
autoLoad: {
url: '../snippets/topnews.html',
scripts: true
}
},{
title: 'Use',
tools: [{id:'gear'}],
width: '180px',
style: 'margin-right:10px',
autoLoad: {
url: '../snippets/use.html',
scripts: true
}
}]
}]
},{
title:'Germany',
autoLoad:{url:'../snippets/test.html'},
closable: false
}]
});
var dockDiv = new Ext.Panel({
id:'dockID',
columnWidth:.24,
items:[{
xtype: 'portal',
margins: '35 5 5 0',
title: 'right',
items: [{
items: [{
title: 'my Network',
id:'newsID',
width: '180px',
tools: [{id:'gear'}],
autoLoad: {
url: '../snippets/network_panel.html',
scripts: true
}
}, {
title: 'Frequent tasks',
width: '180px',
tools: [{id:'gear'}],
autoLoad: {
url: '../snippets/loremipsum.html',
scripts: true
}
}]
}]
}]
});
var bodyDiv = new Ext.Panel({
region:'west',
id:'bodyID',
width:790,
autoScroll:true,
layout:'column',
items:[ contentDiv, dockDiv]
});
// Virtuelles Panel zum fixen der 790er Page-Breite
var eastDiv = new Ext.Panel({
region:'center'
});
/*
* Viewport
*/
var viewport = new Ext.Viewport({
layout:'border',
//layout: 'table',
monitorResize: true,
hideBorders: true,
column: 1,
width: 790,
items:[ headDiv, bodyDiv, eastDiv]
});
Thanks a lot