Results 1 to 5 of 5

Thread: minHeight on table header causes layout faults if there is a scrollbar

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-7582 in 4.2.0.265.
  1. #1
    Sencha Premium User
    Join Date
    Sep 2009
    Posts
    23
    Vote Rating
    0
      0  

    Default minHeight on table header causes layout faults if there is a scrollbar

    To reproduce, run this:
    Code:
    Ext.onReady (function () {
        Ext.widget ('grid',
                    { store: { type: 'array',
                               fields: ['text'],
                               data: [['xxx'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['xxx']] },
                      columns: { minHeight: 50,
                                 items: [{ text: 'lalala', dataIndex: 'text' }] },
                      height: 200,
                      renderTo: document.body });
    });
    Note that the layout error only appears if there is a scrollbar in the grid view, or so it seems. If you delete a couple of data rows, so that all the remaining fit in the view, layout works without problems.

    Also 'height' instead of 'minHeight' is a possible workaround, but it certainly doesn't have the same semantics and I need *minimum* height (it depends on size of another component).

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Vote Rating
    1271
      0  

    Default

    The header container is 50px for me on Chrome 22

    Screen Shot 2012-10-23 at 8.22.22 AM.png
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium User
    Join Date
    Sep 2009
    Posts
    23
    Vote Rating
    0
      0  

    Default

    Here is what I see, Google Chrome 22.0. The header is 50 px, but it is empty (no text, no background), and there is "Layout run failed" error in the console. Depending on font size you may need to add a couple of lines in the grid so that scrollbar appears.

    grid-header.png

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Vote Rating
    1271
      0  

    Default

    This is what I see in Chrome 22:

    Screen Shot 2012-10-23 at 9.21.40 AM.png
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha Premium User
    Join Date
    Sep 2009
    Posts
    23
    Vote Rating
    0
      0  

    Default

    I tested it with 4.1.2a (latest released version, as I understand) and also the nightly build from 22.10.2012. In both cases I can reproduce my error. But, cannot reproduce if I just run the code on e.g. Ext example pages on Sencha website...

    So, can you please test with this HTML page? It is self-contained except you may need to alter the two Ext CSS and JS paths.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <link rel="stylesheet" href="ext-all.css" type="text/css"/>
      <script type="text/javascript" src="ext-all-dev.js"></script>
      <script type="text/javascript">
    
    
    Ext.onReady (function () {
        Ext.widget ('grid',
                    { store: { type: 'array',
                               fields: ['text'],
                               data: [['xxx'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['xxx']] },
                      columns: { minHeight: 50,
                                 items: [{ text: 'lalala', dataIndex: 'text' }] },
                      height: 200,
                      renderTo: document.body });
    });
    
    
      </script>
    </head>
    <body></body>
    </html>

Tags for this Thread

Posting Permissions

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