PDA

View Full Version : not getting scrollbars in tabpanel with vbox layout



andreik65
18 Jun 2013, 11:30 PM
Hi,

I'm try to layout a panel in a tabpanel so that it has 2 items, the first one with a height of 1/4 of the container, the second one with a height of 3/4.

I was trying to use vbox layout and flex and explicitly setting the height of an intermediate container (MIDDLE_PANEL), but that doesn't work properly. I've setup a JSFiddle working example of I would like to achieve http://jsfiddle.net/andreik65/vFXL5/6/ I would like to have the same result but without specifying heights in pixels but using proportions instead.

Any hint?

A.



Ext.create('Ext.window.Window', {
id: 'WINDOW',
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
id: 'TABPANEL',
xtype: 'tabpanel',
items: {
id: 'TAB',
title: 'A tab',
layout: 'fit',
items: {
id: 'MIDDLE_PANEL',
xtype: 'panel',
autoScroll: true,
//height: 1000,
//layout: {
// type: 'vbox',
// align: 'stretch'
//},
items: [ {
id: 'panelHi',
xtype: 'panel',
height: 250,
//flex: 1,
border: 1,
style: {borderColor:'#FF0000', borderStyle:'solid', borderWidth:'1px'},
html: '<p>hi!</p>'
},
{
id: 'panelHiToo',
xtype: 'panel',
height: 750,
//flex: 3,
border: 1,
style: {borderColor:'#00FF00', borderStyle:'solid', borderWidth:'1px'},
html: '<p>hi too!</p>'
}]
}
}
}


}).show();

chamacs
19 Jun 2013, 12:42 PM
Basically, you had two problems:
1. Your tab had a layout of 'fit'
2. The autoScroll : true should be on the TAB, not the MIDDLE_PANEL

Something like:


Ext.create('Ext.window.Window', {
id: 'WINDOW',
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
id: 'TABPANEL',
xtype: 'tabpanel',
items: {
id: 'TAB',
title: 'A tab',
autoScroll: true,
items: {
id: 'MIDDLE_PANEL',
xtype: 'panel',
height : 1000,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [ {
id: 'panelHi',
xtype: 'panel',
flex: 1,
border: 1,
style: {borderColor:'#FF0000', borderStyle:'solid', borderWidth:'1px'},
html: '<p>hi!</p>'
},
{
id: 'panelHiToo',
xtype: 'panel',
flex: 3,
border: 1,
style: {borderColor:'#00FF00', borderStyle:'solid', borderWidth:'1px'},
html: '<p>hi too!</p>'
}]
}
}
}




}).show();

andreik65
19 Jun 2013, 3:47 PM
Thanks a lot Chamacs, you're my hero!