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,135
    Vote Rating
    322
    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>

  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,135
    Vote Rating
    322
    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.

  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,135
    Vote Rating
    322
    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.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar