extjs 100% height in hbox

Question

I am new in extjs and just stuck on dynamic (percent) height in hbox setting. Sorry i could provide you my code on sencha fiddle, so i simplified my question,

here is code

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.create('Ext.Container', {
width: "100%",
height: 200,
title: "HBoxLayout Panel",
layout: {
    type: 'hbox',
    align: 'stretch'
},
renderTo: document.body,
items: [{
    xtype: 'panel',
    title: 'Inner Panel One',
    flex: 2
},{
    xtype: 'panel',
    title: 'Inner Panel Two',
    flex: 1
},{
    xtype: 'panel',
    title: 'Inner Panel Three',
    flex: 1
}]});}});

how i can change a height of container to be 100% and not static pixel value, as in this case 200,

Thanks everyone

Answer 1

As far as I'm concerned, an item contained in a view with fit layout, will fit its parent's container.

So I don't think using layout fit and then specifying the second container height to 45% will work. That may work though if you use a fixed height for the second container. But I don't think % will do.

Try another layout for the first container, maybe anchor will work as you expect.

Here's a link to sencha layouts... http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html

EDIT

Well, this doesn't seem at all like the post you posted before your edit. Try what I suggested for your first code.

It would be best if we used your actual code, but as for this code you posted now... https://fiddle.sencha.com/#fiddle/3hg

Answer 2

Had the same problem, figured it out using this sencha fiddle https://fiddle.sencha.com/#fiddle/4uv: Change the height of the defaults for the hbox to:

defaults: { xtype : 'component', height : '100%' },