PDA

View Full Version : [FIXED][3.0rc1] Why does the top hbox not work right?



frew
24 Apr 2009, 2:15 PM
I am trying to use HBox instead of Saki's ColumnFit layout. The bottom half of this form looks right (half and half) but the top half doesn't really work at all (maybe a 1 to 10 ration?) What's the deal?


/*global Ext */
/*global ACDRI */
Ext.ns('ACDRI.ui');

ACDRI.ui.CustomerManagementForm = Ext.extend(Ext.Panel, {
controller: 'WorkOrderEntry',
action: 'customer',
customer_id: 'AA001',
initComponent: function () {
var config = {
title: 'Customer Management',
layout: 'border',
items: [{
region: 'north',
height: 200,
layout: 'hbox',
layoutConfig: { align: 'stretch' },
border: false,
items: [{
flex: 1,
xtype: 'customerinfo',
customer_id: this.customer_id,
successFunction: function (data) {
this.setTitle(data.name);
}.createDelegate(this),
style: 'padding: 10px 5px 10px 10px;'
}, {
flex: 1,
title: 'Customer Contacts',
controller: 'WorkOrderEntry',
action: 'customer_contacts',
autoScroll: true,
xtype: 'customer_contacts',
customer_id: this.customer_id,
style: 'padding: 10px 10px 10px 5px;'
}]
}, {
xtype: 'panel',
region: 'center',
layout: 'hbox',
layoutConfig: { align: 'stretch' },
border: false,
items: [{
flex: 1,
xtype: 'invoice_pane',
style: 'padding: 0 5px 0 10px;',
customer_id: this.customer_id
}, {
flex: 1,
xtype: 'shipping_pane',
style: 'padding: 0 10px 0 5px;',
customer_id: this.customer_id
}]
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
ACDRI.ui.CustomerManagementForm.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('customer_management_form', ACDRI.ui.CustomerManagementForm);
If you want to see this in action see this attachment: http://extjs.com/forum/attachment.php?attachmentid=13255&d=1240611095

jsakalos
25 Apr 2009, 12:16 AM
What I usually do in these cases is to step back to a workable point and adding to that simpler thing. So I've prepared workable hbox-in-border-in-window for you:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<title id="page-title">HBox Layouts in Border Layout</title>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function() {
var win = new Ext.Window({
width:600
,height:480
,layout:'border'
,border:false
,title:Ext.fly('page-title').dom.innerHTML
,items:[{
region:'north'
,height:200
,border:false
,layout:'hbox'
,layoutConfig:{align:'stretch'}
,items:[{
flex:1
,title:'Left North Panel'
,style:'padding:10px 5px 10px 10px;'
},{
flex:1
,title:'Right North Panel'
,style:'padding:10px 10px 10px 5px;'
}]
},{
region:'center'
,border:false
,layout:'hbox'
,layoutConfig:{align:'stretch'}
,items:[{
flex:1
,title:'Left Center Panel'
,style:'padding:10px 5px 10px 10px;'
},{
flex:1
,title:'Right Center Panel'
,style:'padding:10px 10px 10px 5px;'
}]
}]
});
win.show();
});
</script>
</head>
<body>
</body>
</html>

frew
27 Apr 2009, 6:53 AM
This looks like it's a problem with grid. If you put any grid at the top right of the layout you gave me you will see the same issue that I got. (I actually just copy pasted a basic grid from the examples to try it out.)

I guess I'll switch back to ColumnFit until this issue is worked out?

jsakalos
27 Apr 2009, 7:05 AM
Would you please post the code with the example grid in it? I'll try to test it and if it shows a problem, I'll move this thread to bugs.

frew
27 Apr 2009, 7:12 AM
Sure, I'll post it in a second.

frew
27 Apr 2009, 7:17 AM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<title id="page-title">HBox Layouts in Border Layout</title>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function() {
var win = new Ext.Window({
width:600
,height:480
,layout:'border'
,border:false
,title:Ext.fly('page-title').dom.innerHTML
,items:[{
region:'north'
,height:200
,border:false
,layout:'hbox'
,layoutConfig:{align:'stretch'}
,items:[{
flex:1
,title:'Left North Panel'
,style:'padding:10px 5px 10px 10px;'
},{
flex: 1,
store: new Ext.data.SimpleStore({ fields: [ {name: 'company'} ] }),
columns: [ {header: 'Company', dataIndex: 'company'} ],
title: 'Array Grid',
xtype: 'grid'
}]
},{
region:'center'
,border:false
,layout:'hbox'
,layoutConfig:{align:'stretch'}
,items:[{
flex:1
,title:'Left Center Panel'
,style:'padding:10px 5px 10px 10px;'
},{
flex:1
,title:'Right Center Panel'
,style:'padding:10px 10px 10px 5px;'
}]
}]
});
win.show();
});
</script>
</head>
<body>
</body>
</html>

jsakalos
27 Apr 2009, 7:20 AM
Yes, it must be a bug. Moving the thread.

Condor
27 Apr 2009, 7:24 AM
1. Shouldn't this be in the Ext 3.x Bugs section?
2. HBox only works for components that have a fixed width or that are autoWidth:true.
Unfortunately, GridPanel doesn't support autoWidth:true, so you'll have to give it a fixed width.

jay@moduscreate.com
27 Apr 2009, 7:42 AM
Hbox should be managing the widths of its child items automagically.

frew
27 Apr 2009, 7:43 AM
1. Shouldn't this be in the Ext 3.x Bugs section?
2. HBox only works for components that have a fixed width or that are autoWidth:true.
Unfortunately, GridPanel doesn't support autoWidth:true, so you'll have to give it a fixed width.

Well, it seems to magically work when two grids are at the bottom :)

Ok. Sounds like HBox wasn't quite what I'd expected. Switching back to ColumnFit.

jsakalos
27 Apr 2009, 8:23 AM
1. Shouldn't this be in the Ext 3.x Bugs section?
Yes, thanks for moving it to the right place.


2. HBox only works for components that have a fixed width or that are autoWidth:true.
Unfortunately, GridPanel doesn't support autoWidth:true, so you'll have to give it a fixed width.
I'd really like to hear from devel team if this behavior of hbox is by design because if really yes, then it is near to useless.

jay@moduscreate.com
27 Apr 2009, 8:31 AM
I woudl say it's a bug. doing a search on BoxLayout.js for autoWidth shows zero hits, which means that autoWidth is not even referenced.

Just need to do some debuging on the onLayout method, which starts on line 259.

Condor
27 Apr 2009, 10:58 AM
The problem is this line:

totalWidth += c.getWidth() + cm.left + cm.right;
which makes the entire layout dependent on the current width of the component.

If you really want 50%/50% columns then you should set the initial width of both components (the panel and the grid) to the same value, e.g. 0 (or any value, as long as you don't exceed the container width).

evant
14 Jun 2009, 9:23 AM
Very old one, but this has been fixed in SVN.

frew
14 Jun 2009, 9:36 AM
Excellent, this certainly seems to work. I have a different bug now, but I'll post that in a separate thread. Thanks!