0

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

user2894127
  • 47
  • 1
  • 3
  • 9

2 Answers2

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

martskins
  • 2,920
  • 4
  • 26
  • 52
  • Yes this is very simple example, and its easier to understand and follow. In my case i have the container which occupies all screen size so i need to set it to 100%, and inside this container i need Hbox with few items. Panels inside container is getting 0px height, if the static px value is used i see hbox panel in specified height, but i need % rafter than px. I tried changing layouts and still no luck in % height – user2894127 Feb 11 '14 at 15:24
  • I saw your example, but i can't use 'Ext.container.Viewport' as i have another items on the same window, Viewport takes all screen size and hides rest of the content, i need to use 'Ext.container.Container' – user2894127 Feb 11 '14 at 15:29
  • I will accept your answer lascort, as your fiddle code is working, and i will post my original code back as it was, thanks for your help – user2894127 Feb 11 '14 at 17:05
0

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%' },

Ronald
  • 89
  • 1
  • 8