PDA

View Full Version : Layout: 2 columns inside a tab



ruso
24 Nov 2007, 11:59 AM
Hi. Sure it's easy but I just can't make it...

I made with the Viewport north, center and south regions.
The center one has 3 tabs.
Inside one of them I need to create 2 columns one plain and the other with 2 tabs...

Help appreciated!!!

tryanDLS
24 Nov 2007, 12:26 PM
Have you tried? Looked at the examples? Post an example that shows what you've tried and the problems you're having.

ruso
24 Nov 2007, 2:56 PM
Fair enough! I tried this:

JS code:

<script type="text/javascript">
Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var subTabs = new Ext.TabPanel(
{
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
frame: true,
defaults:{autoScroll:true},
items:[{
title: 'Bogus Tab',
closable:true
},{
title: 'Another Tab',
closable:true
},{
title: 'Closable Tab',
closable:true
}
]}
);

var subNav = new Ext.Panel(
{
region:'west',
layout: 'fit',
});


var subWin = new Ext.Container(
{
title: 'Layout Window',
applyTo: 'center2',
layout: 'border',
items: [subNav,subTabs]
}
);

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true
},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
}]
})
]
});
});

</script>

HTML Code:

<body>
<div id="north" class="x-panel-header">North OK</div>
<div id="center2">
</div>

<div id="center1">
<p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>

</div>
</div>
</body>
</html>

THANKS!!!