PDA

View Full Version : No vertical scrollbar with vbox layout



mjdslob
18 Jun 2009, 1:03 PM
When using the new vbox layout, I never get a vertical scrollbar. When using other layouts, the scrollbars do appear when necessary. Is this a bug, or am I doing something wrong?
I have some demo code showing the problem:

var mainPanel = new Ext.Panel({
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
autoScroll:true,
region: 'center',
items: [{height:200,title:'panel1'},{height:200,title:'panel2' }]
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Title</h1>',
autoHeight: true,
}, mainPanel ]
}); //eof viewport


regards,

Martijn

mjlecomte
18 Jun 2009, 7:38 PM
vbox just sizes to the container doesn't it? Why would you expect scrollbars?

P.S. Posting in code tags is helpful.

mjlecomte
18 Jun 2009, 7:39 PM
you must give north/south regions a height explicitly also.

mjlecomte
18 Jun 2009, 7:40 PM
Trying to scan that code, I think you may want to remove the heights of the panels in the center region.

mjdslob
18 Jun 2009, 11:46 PM
Thanks for your replies. I have added an explicit height to the north region, but the problem remains.
What I expect is something similar to the Java BoxLayout, where the items are stacked vertically (and stretched horizontally if you want), respecting the element heights. This means that the total height can become more than the height of the containing panel.
If my idea about the vbox layout is wrong, do you have another suggestion for my problem (stacking vertically, stretching horizontally)?


I added the sample code again. Hopefully it is better readable this time


var mainPanel = new Ext.Panel({
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
autoScroll:true,
region: 'center',
items: [{height:500,title:'panel1'},{height:500,title:'panel2' }]
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Title</h1>',
height: 28
}, mainPanel ]
}); //eof viewport
}


regards,

Martijn

Animal
18 Jun 2009, 11:53 PM
If you just want 2 fixed-height, full-width blocks in your center, make it



{
region: 'center',
xtype: 'container',
layout: 'anchor',
style: {
overflow: 'auto'
},
items: [{
anchor: '-20',
height: 500,
title: 'Panel 1'
}, {
anchor: '-20',
height: 500,
title: 'Panel 2'
}]
}

mjdslob
19 Jun 2009, 12:40 AM
Thanks for your reply, animal. Indeed, this seems to be a solution.
One 'however', however. In my code I add items dynamically to the container. When I use the anchor-layout, any new elements are added at the TOP of the panel, regardles of the index I supply to mainPanel.inser(index, cmp). Is this due to the anchor-layout?
I want items to be added at the before-last position.

The few lines of code are:


var num = this.mainPanel.items.getCount();
this.mainPanel.insert(num-1,this.activePanel);
this.mainPanel.doLayout();


(By the way, remarkable how efficient this forum works!)

Martijn

Animal
19 Jun 2009, 12:49 AM
If you use insert, new items will be inserted where you ask.

So if there are 2 items, and you insert at position 1, the new one will be inserted between the existing two.

If you use add, new items will be appended.

mjdslob
19 Jun 2009, 9:45 AM
It turns out that I have made an error in the onRender() function of the objects that I want to add dynamically. This caused the objects to be inserted at the wrong location.
Your suggestion to use the anchor-layout works now. Thanks!

(still I wonder why vbox does not support vertical scrollbars...)

regards,

Martijn

Animal
19 Jun 2009, 10:37 PM
It's a fitting layout. It allocates available space between the child Components.

ifti
3 May 2016, 7:08 AM
I have added a listener on resize event to get the vertical scroll as for Vbox we have to provide height to get scroll but when window size get change the height remain constant.


Ext.define('DataConfigurations', {
extend: 'Ext.form.Panel',
bodyStyle: 'padding:5px 5px;',
listeners: {
resize: {
fn: function(el) {
debugger;
this.setHeight(this.up('window').getHeight()-150); // 150 is extra for my panel coz of headers so have minus it.
console.log("new height = " + this.up('window').getHeight()-150);
}
}
},
header: {
xtype: 'header',
titlePosition: 0,
title: "Notification List Configurations",
items: [
{
xtype: 'Event'
}
]
},
title: "Update Data Configurations",


Hopes this help.