Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member frew's Avatar
    Join Date
    Aug 2008
    Posts
    451
    Vote Rating
    0
    frew is on a distinguished road

      0  

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

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


    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
    -fREW

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,557
    Vote Rating
    383
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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>
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext JS Premium Member frew's Avatar
    Join Date
    Aug 2008
    Posts
    451
    Vote Rating
    0
    frew is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,557
    Vote Rating
    383
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Ext JS Premium Member frew's Avatar
    Join Date
    Aug 2008
    Posts
    451
    Vote Rating
    0
    frew is on a distinguished road

      0  

    Default


    Sure, I'll post it in a second.
    -fREW

  6. #6
    Ext JS Premium Member frew's Avatar
    Join Date
    Aug 2008
    Posts
    451
    Vote Rating
    0
    frew is on a distinguished road

      0  

    Default


    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>
    -fREW

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,557
    Vote Rating
    383
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Yes, it must be a bug. Moving the thread.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  9. #9
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Hbox should be managing the widths of its child items automagically.

  10. #10
    Ext JS Premium Member frew's Avatar
    Join Date
    Aug 2008
    Posts
    451
    Vote Rating
    0
    frew is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    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.
    -fREW