extjs container hbox height 100%

Question

I am new in extjs and just stuck on dynamic (percent) height in hbox setting.

here is my extjs code

"xtype": "container",
"layout": "fit",
"width": "100%",
"height": "100%",
"cls": "dashboard-layout dashboard-layout-1-2",
"items": [
  {
    "xtype": "dashboardpanelcontainer",
    "height": "45%"
  },
  {
    "xtype": "container",
    "layout": "fit",
    "width": "100%",
    "height": "45%",
    "layout":
      {
        "type": "hbox",
        "align": "stretch"
      },
    "items": [
      {
        "xtype": "dashboardpanelcontainer",
        "flex": 1
      },
      {
        "xtype": "ruban-dashboardpanelcontainer",
        "flex": 1
      }]
  }]

this peace of code is working fine and setting height to 45%

"xtype": "dashboardpanelcontainer",
"height": "45%"

second item as a container "xtype": "container" is setting height to 45% too, but the hbox items are not picking this 45%, the height of the hbox items are 0px

I cant use "xtype": "window" or "xtype": "viewport" needs to be inside "xtype": "window"

Any help how to set container hbox item height as percentage in my case 45%.

If i add style in hbox item, its not working too

"xtype": "dashboardpanelcontainer",
"flex": 1,
"style":
  {
    "height": "100%"
  }

Thanks for the help

i saw it, the answer is good for whose who can use "xtype": "viewport", unfortunately i cant use viewport, i am using "xtype": "container" — user2894127

rixo rixo · Accepted Answer · 2014-02-11T23:13:15

Percentage height is supported by Touch, but in Ext only pixel height is officially supported...

Then, your parent container has layout: 'fit' so it expects only one child. If you want to stack components vertically, use the vbox layout. Its flex option will let you size children relatively. It does not use percentage per se, but it works on ratios so it's the same.

Here's an example that closely looks like yours:

Ext.onReady(function() {

    var ct = Ext.widget({
        renderTo: Ext.getBody(),
        xtype: 'container',
        style: 'background-color: pink;',
        width: '100%',
        height: '100%',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'panel',
            bodyStyle: 'background-color: magenta;',
            flex: 45
        },{ // Filler for the remaining 15%
            xtype: 'component',
            flex: 15
        },{
            xtype: 'container',
            width: '100%',
            flex: 45,
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'panel',
                bodyStyle: 'background-color: yellow;',
                flex: 1
            }, {
                xtype: 'panel',
                bodyStyle: 'background-color: cyan;',
                flex: 1
            }]
        }]
    });

    // Since I've rendered to the body without using a viewport, I have to
    // refresh the layout if the window is resized...
    Ext.EventManager.onWindowResize(function() {
        ct.doLayout();
    });
});

Update

Here's the HTML code I used. As you can see, there's nothing special with it...

<html>
    <head>
        <link rel="stylesheet" href="../../ext-4.2.1/resources/css/ext-all-debug.css" />
        <script type="text/javascript" src="../../ext-4.2.1/ext-all-dev.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body>
    </body>
</html>

extjs container hbox height 100%

1 Answers