[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?

Code:

/*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.ph...5&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 Code:

<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

Code:

<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

Originally Posted by Condor

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.

[FIXED][3.0rc1] Why does the top hbox not work right?

Thread Tools

Search Thread

Display

[FIXED] [3.0rc1] Why does the top hbox not work right?

[FIXED] [3.0rc1] Why does the top hbox not work right?