View Full Version : Horizontal Layout?

11 Feb 2011, 9:43 AM
It seems there is no horizontal flow layout in Ext (HBox doesn't work exactly like this).

I want to add components to a panel that has a fixed height, but I want the components simply to flow left to right, causing the parent to scroll as needed.

Has anyone written something basic like this? Again, hbox doesn't work because the panel width is fixed to its parent and doesn't scroll.


11 Feb 2011, 12:59 PM
Use the "absolute" layout. Here's a simplified example (copy/paste into Firebug console to test).


var xAxis = 0;

var container = new Ext.Container({
layout: 'absolute',
autoScroll: true,
height: 300,
items: []

var win = new Ext.Window({
autoHeight: true,
width: 500,
items: container,
tbar: new Ext.Toolbar([{
text: 'add panel',
handler: function() {
xtype: 'panel',
title: 'panel',
height: 250,
width: 300,
x: xAxis,
y: 0
xAxis += 300;

11 Feb 2011, 2:22 PM
you don't need a special layout for this, just add the float to the panel.
I did this here:

11 Feb 2011, 4:50 PM
Thanks guys, let me try those suggestions.

I did think of using absolute, but then I have to manage the component locations and new components are added at the front and the back so its a bit of work there.

11 Feb 2011, 5:44 PM
I filed this as a bug because the HBoxLayout does not trigger scroll bars when the components run off the right edge.

So I made a change in mine (3.3beta):

onLayout: function(container, target) {
Ext.layout.BoxLayout.superclass.onLayout.call(this, container, target);

var tSize = this.getLayoutTargetSize(),
items = this.getVisibleItems(container),
calcs = this.calculateChildBoxes(items, tSize),
boxes = calcs.boxes,
meta = calcs.meta;

if (tSize.width > 0) {
var handler = this.overflowHandler,
method = meta.tooNarrow ? 'handleOverflow' : 'clearOverflow';

var results = handler[method](calcs, tSize);

if (results) {
if (results.targetSize) {
tSize = results.targetSize;

if (results.recalculate) {
items = this.getVisibleItems(container);
calcs = this.calculateChildBoxes(items, tSize);
boxes = calcs.boxes;

if(meta.desiredWidth>tSize.width) {
this.layoutTargetLastSize = tSize;

this.childBoxCache = calcs;

this.updateInnerCtSize(tSize, calcs);

this.handleTargetOverflow(tSize, container, target);

What's happening here is that the desiredWidth is not being honored correctly and thus the container is never resized to allow scrollbars to appear.