PDA

View Full Version : Looking for help with nested hboxes in a vbox in a viewport



hflipman
2 Jul 2012, 9:25 PM
Hi,

in my app I have a viewport that uses the vbox layout. Inside that vbox are 2 hboxes. But I cannot seem to get the hboxes to stretch across the screen.

Any ideas what I am doing wrong?

Here is the complete code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Viewport Issue</title>
<link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all.css" />
<script type="text/javascript" src="https://extjs.cachefly.net/ext-4.1.0-gpl/ext-all.js"></script>
<script type="text/javascript">


var w1 = new Ext.Panel({
flex : 1,
margins: '5 5 5 5',
title : 'Panel 1',
width : 350,
height : 350,
layout : 'fit',
html : 'Some stuff'
});


var w2 = new Ext.Panel({
flex : 2,
margins: '5 5 5 5',
title : 'Panel 2',
width : 350,
height : 350,
layout : 'fit',
html : 'Some stuff'
});


var w3 = new Ext.Panel({
flex : 1,
margins: '5 5 5 5',
title : 'Panel 3',
width : 350,
height : 350,
layout : 'fit',
html : 'Some stuff'
});


var w4 = new Ext.Panel({
flex : 2,
margins: '5 5 5 5',
title : 'Panel 4',
width : 350,
height : 350,
layout : 'fit',
html : 'Some stuff'
});

var h1 = {
layout : 'hbox',
margins: '5 5 5 5',
layoutConfig : {
type :'hbox',
align : 'stretch',
pack : 'start'
},
items : [w1, w2]
};


var h2 = {
layout : 'hbox',
margins: '5 5 5 5',
layoutConfig : {
type :'hbox',
align : 'stretch',
pack : 'start'
},
items : [w3, w4]
};


Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: 'vbox',
layoutConfig : {
type : 'vbox',
align : 'stretch',
pack : 'start'
},
items: [h1, h2]
});
});


</script>
</head>
<body bgcolor="#888888">
</body>
</html>



Thanks.

Henk

punith.mailme
2 Jul 2012, 10:59 PM
can u remove the doctype and test it. between what browser are you using??

friend
3 Jul 2012, 5:22 AM
I refactored your code just a little and it seems to be working as expected. It appears that your layout configs were a little wonky:



<script type="text/javascript">
var w1 = new Ext.Panel({
flex : 1,
margins: '5 5 5 5',
title : 'Panel 1',
width : 350,
height : 350,
layout : 'fit',
html : 'Some stuff'
});


var w2 = new Ext.Panel({
flex : 2,
margins: '5 5 5 5',
title : 'Panel 2',
width : 350,
height : 350,
layout : 'fit',
html : 'Some stuff'
});


var w3 = new Ext.Panel({
flex : 1,
margins: '5 5 5 5',
title : 'Panel 3',
width : 350,
height : 350,
layout : 'fit',
html : 'Some stuff'
});


var w4 = new Ext.Panel({
flex : 2,
margins: '5 5 5 5',
title : 'Panel 4',
width : 350,
height : 350,
layout : 'fit',
html : 'Some stuff'
});

var h1 = {
margins: '5 5 5 5',
layout : {
type :'hbox',
align : 'stretch',
pack : 'start'
},
items : [w1, w2]
};


var h2 = {
margins: '5 5 5 5',
layout: {
type :'hbox',
align : 'stretch',
pack : 'start'
},
items : [w3, w4]
};


Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: {
type : 'vbox',
align : 'stretch',
pack : 'start'
},
items: [h1, h2]
});
});

</script>

hflipman
3 Jul 2012, 6:11 AM
Thanks for your reply. Removing the doc type did not help.

I tested it with Safari 5.1.7 on OSX 10.7.4.

Thanks.

Henk

hflipman
3 Jul 2012, 6:18 AM
@friend:

Thanks!

Yes, that indeed gives me the desired output. The configs were probably indeed wonky after all my attempts to get it working ;-).

The only thing that still needs work is that the 2 hboxes are not transparent. The vbox is transparent since I see the body's bgcolor. But the hboxes show white. Any ideas on how to resolve that?

In my real app the background is actually an image and not a solid color.

Thanks for your help!

Henk

friend
3 Jul 2012, 6:32 AM
Try explicitly typing the h1 and h2 components as 'container'. These are a lot lighter weight and you'll eliminate some extra borders as well.



var h1 = {
xtype: 'container',
margins: '5 5 5 5',
layout : {
type :'hbox',
align : 'stretch',
pack : 'start'
},
items : [w1, w2]
};


var h2 = {
xtype: 'container',
margins: '5 5 5 5',
layout: {
type :'hbox',
align : 'stretch',
pack : 'start'
},
items : [w3, w4]
};

hflipman
3 Jul 2012, 6:37 AM
Exactly what I was looking for. Thanks for the fast reply!

Henk