Results 1 to 3 of 3

Thread: List height is 0px if a height is not specified (should stretch to fill)

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    88
    Vote Rating
    0
      0  

    Default List height is 0px if a height is not specified (should stretch to fill)

    REQUIRED INFORMATION




    Ext version tested:
    • ST2 B2
    • ST2 B1
    Browser versions tested against:
    • Chrome
    • Firefox
    • Safari

    DOCTYPE tested against:
    • html

    Description:
    • If a list is added to a panel, its height is 0px

    Steps to reproduce the problem:
    • See code sample

    The result that was expected:
    • List should stretch to fill available space in the panel

    The result that occurs instead:
    • List height is 0px

    Test Case:
    ** Using MVC pattern / Zip file attached **
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>test</title>
        <link rel="stylesheet" href="../common/js/sencha-touch-2-b2/resources/css/sencha-touch.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <script src="../common/js/sencha-touch-2-b2/sencha-touch-debug.js" type="text/javascript" charset="utf-8"></script>
        <script src="app.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    </body>
    </html>

    Code:
    Ext.Loader.setConfig({ enabled: true });
    Ext.application({
        name: 'Test',
        views: ['Home'],
        launch: function() {
            Ext.Viewport.add([
                Ext.create('Test.view.Home')
            ]);
        }
    });

    Code:
    Ext.define('Test.view.Home', {
        extend: 'Ext.Panel',
        config: {
            items: [{
                xtype: 'list',
                itemTpl: '{name}',
                data: [{ name: 'name' }],
            }]
        },
    });

    HELPFUL INFORMATION


    Debugging already done:
    • Set list height manually using Chrome Web Inspector (list appears)
    Operating System:
    • OSX
    Attached Files Attached Files

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

    Default

    Your Test.view.Home needs to tell the list to have a height. Check out the red to see if that helps you:

    Code:
    Ext.define('Test.view.Home', {
        extend: 'Ext.Panel',
        config: {
            layout : 'fit',
            items: [{
                xtype: 'list',
                itemTpl: '{name}',
                data: [{ name: 'name' }],
            }]
        }
    });
    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 User
    Join Date
    Aug 2011
    Posts
    88
    Vote Rating
    0
      0  

    Default

    That does work, thanks.

    (The irony being that I tried this with every layout except fit for some reason...)

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
  •