Results 1 to 9 of 9

Thread: Incorrect grid height in Firefox

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    240

    Default Incorrect grid height in Firefox

    I've got a column layout with three grids with the same heights set, but in Firefox (I'm using 3.0.11) they're each getting rendered with a different height. One is 30px shorter than another, and the other is 30px shorter than that. In Opera 10 and IE8 they render the same height. Here's an example:

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <title>SailCalc</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <style type="text/css">
      #loading-mask{
          position:absolute;
          left:0;
          top:0;
          width:100%;
          height:100%;
          z-index:20000;
          background-color:white;
      }
      #loading{
          position:absolute;
          left:45%;
          top:40%;
          padding:2px;
          z-index:20001;
          height:auto;
          width: 200px;
      }
      #loading a {
          color:#225588;
      }
      #loading .loading-indicator{
          background:white;
          color:#444;
          font:bold 13px tahoma,arial,helvetica;
          padding:10px;
          margin:0;
          height:auto;
      }
      #loading-msg {
          font: normal 10px arial,tahoma,sans-serif;
      }
      </style>
    </head>
    <body>
      <div id="loading-mask" style=""></div>
      <div id="loading">
        <div class="loading-indicator"><img src="include/loading.gif" style="width:32px;height:32px;margin-right:8px;float:left;vertical-align:top;">Loading SailCalc...<br><span id="loading-msg">Loading styles and images...</span></div>
      </div>
      
      <div id="sailcalc" style="width: 600px; height: 400px;"></div>
    
      <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
    
      <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
      <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
      <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
      <script type="text/javascript" src="ext/ext-all-debug.js"></script>
    
      <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>
    
      <script type="text/javascript" src="include/main.js"></script>
      <script type="text/javascript">
      Ext.onReady(SailCalc.main.init, SailCalc.main);
      </script>
    
    </body>
    </html>
    main.js:
    Code:
    if ((typeof console) == "undefined" || (typeof console.log) == "undefined")
    {
      console = {
        log: function (v) {} // do nothing if undefined
      }
    }
    
    Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
    Ext.namespace("SailCalc");
    
    SailCalc.main = function()
    {
      return (
      {
        main_win: null,
        gateway: "include/io.php",
    
        init: function()
        {
          // check for loading mask
          Ext.destroy(Ext.get("loading"));
          Ext.destroy(Ext.get("loading-mask"));
    
          var beginner_store = new Ext.data.ArrayStore({
            autoDestroy: false,
            fields: ['kts','mph','kph','sail']
          });
    
          var sailsize_store = new Ext.data.ArrayStore({
            autoDestroy: false,
            fields: ['kts','mph','kph','sail']
          });
    
          this.main_win = new Ext.Panel({
            renderTo: 'sailcalc',
            width: 600,
            height: 400,
            title: 'Sail Size Calculator',
            layout: 'fit',
            tbar: new Ext.Toolbar({
              id: 'sailcalc-tbar',
              items: [
                'Sailor weight:',
                {
                  xtype: 'textfield',
                  width: 30,
                  id: 'sailcalc-weight'
                },
                'pounds',
                '-',
                {
                  text: 'Update',
                  id: 'sailcalc-update',
                  scope: this,
                  handler: function()
                  {
                    console.log('click');
                  }
                }
              ]
            }),
            items: [
              {
                xtype: 'tabpanel',
                border: false,
                activeItem: 0,
                items: [
                  {
                    title: 'Grids',
                    items: [
                      {
                        border: false,
                        layout: 'column',
                        items: [
                          {
                            columnWidth: .33,
                            height: 320,
                            xtype: 'grid',
                            title: 'Sail Size by Wind Speed',
                            id: 'sailsize-grid',
                            store: sailsize_store,
                            columns: [
                              {header: 'Kts', dataIndex: 'kts', sortable: false, width: 40, menuDisabled: true},
                              {header: 'Mph', dataIndex: 'mph', sortable: false, width: 40, menuDisabled: true},
                              {header: 'Kph', dataIndex: 'kph', sortable: false, width: 40, menuDisabled: true},
                              {header: 'Sail Size (m<sup>2</sup>)', dataIndex: 'sail', sortable: false, width: 74, menuDisabled: true}
                            ]
                          },
                          {
                            columnWidth: .33,
                            height: 320,
                            xtype: 'grid',
                            title: 'Wind Speed by Sail Size',
                            id: 'windspeed-grid',
                            store: sailsize_store,
                            columns: [
                            {header: 'Sail Size (m<sup>2</sup>)', dataIndex: 'sail', sortable: false, width: 74, menuDisabled: true},
                              {header: 'Kts', dataIndex: 'kts', sortable: false, width: 40, menuDisabled: true},
                              {header: 'Mph', dataIndex: 'mph', sortable: false, width: 40, menuDisabled: true},
                              {header: 'Kph', dataIndex: 'kph', sortable: false, width: 40, menuDisabled: true}
                            ]
                          },
                          {
                            columnWidth: .34,
                            height: 320,
                            xtype: 'grid',
                            title: 'Beginner Sail Size',
                            id: 'beginner-grid',
                            store: beginner_store,
                            columns: [
                              {header: 'Kts', dataIndex: 'kts', sortable: false, width: 40, menuDisabled: true},
                              {header: 'Mph', dataIndex: 'mph', sortable: false, width: 40, menuDisabled: true},
                              {header: 'Kph', dataIndex: 'kph', sortable: false, width: 40, menuDisabled: true},
                              {header: 'Sail Size (m<sup>2</sup>)', dataIndex: 'sail', sortable: false, width: 74, menuDisabled: true}
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    title: 'Chart'
                  }
                ]
              }
            ],
            listeners: {
              'render': function(p)
              {
                var nav = new Ext.KeyNav('sailcalc-tbar', {'enter': Ext.getCmp('sailcalc-update').handler, scope: this});
              },
              scope: this
            }
          });
        }
      });
    }();

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    First, create 3 GridPanels. Put them in vars grid1, grid2, grid3.

    Then it's this simple:

    Code:
    {
        xtype: 'tabpanel',
        items: [{
            xtype: 'container',
            title: 'Grids',
            layoutConfig: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [ grid1, grid2, grid3 ]
        }
    }

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Posts
    240

    Default

    Thanks. Just to be clear, the solution is to use an hbox layout with stretch, right, it shouldn't make any difference whether they're declared as variables or inline, correct?

    I'll check out the hbox, I haven't played with it yet. Out of curiosity though, shouldn't this work with a 3-column layout? I'll understand if the hbox works, but I don't see anything in my code that should cause the behavior I'm seeing.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Column layout does not set the height of the column Components.

    hbox using align: stretch does.

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Posts
    240

    Default

    layoutConfig: {
    That should just be layout instead of layoutConfig, right?

    Column layout does not set the height of the column Components.
    Right, but I'm explicitly setting the heights on the grids. It did size one of them correctly in Firefox, but not all 3. It sized all 3 correctly in IE8 and Opera, but not in Chrome either.

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    No, it should be layoutConfig.

    You need the child items sized to the height of the Container. Then they will scroll in that height if they overflow. You shuold not control the height.

  7. #7
    Sencha User
    Join Date
    Jan 2008
    Posts
    240

    Default

    Hmm.. with layoutConfig it stacks the boxes vertically and doesn't set the height, but it seems to work correctly with just layout.

  8. #8
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    Quote Originally Posted by OutpostMM View Post
    Hmm.. with layoutConfig it stacks the boxes vertically and doesn't set the height, but it seems to work correctly with just layout.
    Yeah, it should have just been layout the way it was being used:
    Code:
    {
        xtype: 'tabpanel',
        items: [{
            xtype: 'container',
            title: 'Grids',
            layoutConfig: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [ grid1, grid2, grid3 ]
        }
    }

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Ouch! That's right. This has become a little confusing since the layout config processing was enhanced to double as a layout config object when you add e type property to it!

    I think they should bth be processed identically as synonyms.

    So if layoutConfig container type, it specifies the layout type.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •