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>