PDA

View Full Version : hbox/vbox layout problems



bobthebuilder
24 Jun 2009, 11:52 AM
Hello,

I am an extjs n00b and I am attempting to do a nested vbox/hbox layout. With the code below running in FF 3.0.11 the window shadow at the bottom is off about 20 pixels, and not all of the layout is shown. Resizing the window reveals the missing item. Also, the bottom of row 2 is cut off.



new Ext.Window({
title: 'test layout',
layout: 'hbox',
height: 400,
width: 400,
defaults: {
xtype: 'container'
},
items: [{
layoutConfig : {
align: 'stretch'
},
layout: 'hbox',
defaults: {
xtype: 'container'
},
items: [{
layout: 'vbox',
layoutConfig: {},
items: [{
layout: 'vbox',
xtype: 'container',
cls: 'rows',
width: 100,
margins: '2 2 2 2',
defaults: {
xtype: 'container'
},
items: [{
layout: 'hbox',
defaults: {
xtype: 'container'
},
items: [{
autoEl: {
tag: 'div',
html: 'row 1'
},
flex: 1
}]
}]
},{
layout: 'vbox',
xtype: 'container',
cls: 'rows',
width: 100,
margins: '2 2 2 2',
defaults: {
xtype: 'container'
},
items: [{
layout: 'hbox',
defaults: {
xtype: 'container'
},
items: [{
autoEl: {
tag: 'div',
html: 'row 2'
},
flex: 1
}]
}]
}]
},{
width: 30,
style: {
border: '1px solid #aaaaaa',
background: '#ffffff'
}
}]
}]
}).show();

bobthebuilder
24 Jun 2009, 11:52 AM
Oh, and in IE8 nothing is shown in the window.

bobthebuilder
24 Jun 2009, 12:03 PM
Apologies, I forgot the css:



body {
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size:12px;
color:#333;
margin:0;
padding:0;
}

.rows {
background: #ffffff;
border: 1px solid #cccccc;
padding: 2px 2px 2px 2px;
}

mjlecomte
24 Jun 2009, 12:27 PM
Could you make a post in this format?
http://extjs.com/forum/showthread.php?t=71015

Missing is a screenshot for example.

bobthebuilder
24 Jun 2009, 1:00 PM
Ext version tested:
Ext 3.0 RC2

Browser versions tested against:
IE8
FF3.0.11

Operating System:
Windows Vista

Description:
See screenshot

Test Case:





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test layout</title>

<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="ExtStart.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>
</body>
</html>


body {
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size:12px;
color:#333;
margin:0;
padding:0;
}

.rows {
background: #ffffff;
border: 1px solid #cccccc;
padding: 2px 2px 2px 2px;
}


Ext.onReady(function() {

new Ext.Window({
title: 'test layout',
layout: 'hbox',
height: 400,
width: 400,
defaults: {
xtype: 'container'
},
items: [{
layoutConfig : {
align: 'stretch'
},
layout: 'hbox',
defaults: {
xtype: 'container'
},
items: [{
layout: 'vbox',
layoutConfig: {},
items: [{
layout: 'vbox',
xtype: 'container',
cls: 'rows',
width: 100,
margins: '2 2 2 2',
defaults: {
xtype: 'container'
},
items: [{
layout: 'hbox',
defaults: {
xtype: 'container'
},
items: [{
autoEl: {
tag: 'div',
html: 'row 1'
},
flex: 1
}]
}]
},{
layout: 'vbox',
xtype: 'container',
cls: 'rows',
width: 100,
margins: '2 2 2 2',
defaults: {
xtype: 'container'
},
items: [{
layout: 'hbox',
defaults: {
xtype: 'container'
},
items: [{
autoEl: {
tag: 'div',
html: 'row 2'
},
flex: 1
}]
}]
}]
},{
width: 30,
style: {
border: '1px solid #aaaaaa',
background: '#ffffff'
}
}]
}]
}).show();
});

Steps to reproduce the problem:
Load page.

The result that was expected:
rendered layout should be the same even before the window is resized.

The result that occurs instead:
Initial layout appears broken
Resize changes layout to better layout
Parts of left rows are cut off

Screenshot or Video:
attached

Debugging already done:
this is a simplified case

Possible fix:
not provided

bobthebuilder
24 Jun 2009, 1:01 PM
Thanks, done here:

http://extjs.com/forum/showthread.php?p=348352

mjlecomte
24 Jun 2009, 2:03 PM
There were some changes for box layouts, which I think are still in svn, they'll be out in the next release. I suspect your problems are partly related to that, although not completely.

I tried running your prior code and got "nothing in the window" initially also, at least with your originally posted (more nested) code.

I'll post the code I used to test and the resulting image without Panel resizing. I chose to use Panel instead of Window/Container items just to make it easier to see the various items.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Box Layout test page</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-detail.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){
var n = 1;

var getItem = function (){
return {
autoEl: {
tag: 'div',
html: 'row '+ n++
},
flex: 1
};
};

var getItemCt = function(){
return {
layout: 'hbox',
defaults: {
xtype: 'container'
},
items: [getItem()]
};
};

var getVboxItem = function(){
return {
title: 'Item ' + n++,
//xtype: 'container',
cls: 'rows',
margins: '2 2 2 2',
//width: 100,
defaults: {
//xtype: 'container'
flex: 1
},
layout: {
type: 'vbox'
},
items: [
{
title: 'Item ' + n++ // Items 3, 5
}
//getItemCt()
]
};
};

var getVbox = function(){
return {
defaults: {
//xtype: 'container',
flex: 1 // distribution vertically
},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
getVboxItem(), // Item 2
getVboxItem() // Item 4
]
};
};

var getEmptyContainer = function(){
return {
//width: 30,
title: 'Item ' + n++, // Item 6
style: {
border: '1px solid #CCFF33'
}
};
};


var getWindowItem = function(){
return {
title: 'Item ' + n++, // Item 1
defaults: {
//xtype: 'container',
flex: 1 // distribution horizontally
},
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
getVbox(),
getEmptyContainer()
]
};
};

new Ext.Panel({
title: 'test layout',
height: 400,
width: 400,
renderTo: document.body,
defaults: {
//xtype: 'container',
flex: 1 // distribution horizontally
},
layout: {
type: 'hbox',
align: 'stretch' // stretch it vertically
},
items: [
getWindowItem()
]
});


});
</script>

</head>
<body></body>
</html>

mjlecomte
24 Jun 2009, 2:05 PM
So as you see, I didn't unravel completely, I don't know what your layout requirements are. But there were a few misplaced/wrong configs in there I suspect.

bobthebuilder
24 Jun 2009, 3:22 PM
Thanks for the help,

Perhaps I should not be using vbox/hbox but I would like:

Width of item 2 to be the max width required to fit in whatever is in item 3, I could specify a width on item 3 if necessary (probably is or how does it know when to wrap or not?)
Item 6 be a fixed width.
Height of item 2 to be determined by item 3 (there will be multiple item 3s).
Height of item 1 to be the combined heights of items 2 and 4
Item 6's height to stretch to all of item 1.Here is a slight modification of the code you posted (thanks for the style hints) where I moved closer towards this:




Ext.onReady(function(){
var n = 1;

var getItem = function (){
return {
autoEl: {
tag: 'div',
html: 'row '+ n++
},
flex: 1
};
};

var getVboxItem = function(){
return {
title: 'Item ' + n++,
//xtype: 'container',
cls: 'rows',
margins: '2 2 2 2',
//width: 100,
defaults: {
//xtype: 'container'
//flex: 1
},
layout: {
type: 'vbox'
},
items: [
{
title: 'Item ' + n++, // Items 3, 5
html: 'text'
}
]
};
};

var getVbox = function(){
return {
defaults: {
//xtype: 'container',
flex: 1 // distribution vertically
},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
getVboxItem(), // Item 2
getVboxItem() // Item 4
]
};
};

var getEmptyContainer = function(){
return {
// specific width
width: 30,
title: 'Item ' + n++, // Item 6
style: {
border: '1px solid #CCFF33'
}
};
};


var getWindowItem = function(){
return {
title: 'WindowItem - Item ' + n++, // Item 1
defaults: {
//xtype: 'container',
flex: 1 // distribution horizontally
},
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
getVbox(),
getEmptyContainer()
]
};
};

new Ext.Panel({
title: 'test layout',
height: 400,
width: 400,
renderTo: document.body,
defaults: {
//xtype: 'container',
// no flex
},
layout: {
type: 'hbox',
align: 'stretch' // stretch it vertically
},
items: [
getWindowItem()
]
});


});
However, the width of item 1 is being determined by its title, not its children.

mjlecomte
24 Jun 2009, 3:48 PM
Just moving this to help so your questions get more exposure. Smells like you probably want a box layout.

Suggest you also post screenshots of what you get with each code post you have so someone can understand better by inspection.

bobthebuilder
24 Jun 2009, 4:42 PM
Here is what my current code shows:

bobthebuilder
25 Jun 2009, 4:52 PM
I have simplified the example a lot to come up with this:



Ext.onReady(function(){
var n = 1;

var getVboxItem = function(){
return {
title: 'Item ' + n++,
layout: {
type: 'vbox'
},
items: [
{
width: 200,
title: 'Item ' + n++, // Items 3, 5
html: 'text goes here and is long'
}
]
};
};

var getVbox = function(){
return {
defaults: {
//xtype: 'container',
flex: 1 // distribution vertically
},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
getVboxItem()
]
};
};

var getWindowItem = function(){
return {
title: 'Item ' + n++, // Item 1
defaults: {
// no flex
},
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
getVboxItem() // item 2
]
};
};

new Ext.Panel({
title: 'test layout',
height: 400,
width: 400,
renderTo: document.body,
defaults: {
//xtype: 'container',
// no flex
},
layout: {
type: 'hbox',
align: 'stretch' // stretch it vertically
},
items: [
getWindowItem(), // item 1
getVboxItem() // item 4
]
});


});
Note that the extra level of nesting under Item 1 stops the resize to the same width as item 3. With item 5, item 4 is resizing how I expected/want. The widths of items 3 and 5 are explicit.