ExtJs设置窗口高度

Question

I am tring to dynamicaly set window height:

 component.remove(Ext.getCmp("comboBoxTypeOfSchool", true));
 component.remove(Ext.getCmp("comboBoxProgram", true));
 Ext.getCmp("winDecisionEditor").setHeight(190);

But, in browser i see that it sets height to "winDecisionEditor-body", not to "winDecisionEditor". How can I set height to "winDecisionEditor"?. Thanks in advance!

Here my decaration of window:

Ext.define('MyApp.view.decisionWindow', {
extend: 'Ext.window.Window',

requires: [
    'Ext.form.Panel',
    'Ext.form.field.Date',
    'Ext.form.field.ComboBox',
    'Ext.form.field.Display',
    'Ext.button.Button',
    'Ext.form.FieldSet'
],

height: '',
id: 'winDecisionEditor',
margin: '',
width: 707,
layout: 'fit',
title: 'Create decision',
modal: true,

//Other stuff
});

UPDATE: fiddle for the issue

https://fiddle.sencha.com/#fiddle/12rh

Answer 1

I think that the problem is the layout. Layout fit is not the best choice for your page, because it fit the inner panel to the container (and not viceversa).

I think that if you would like to stretch the window to the inner items (and so change the size of the "items area" to the desired, that is in your example 190) you should use another layout. for instance in may example I'm using layout:{type:'vbox', align:'stretch'} .

Here i modify the original fiddle:

https://fiddle.sencha.com/#fiddle/12ri

UPDATE:

Please consider the very important answer of Mitchell Simoens , that is

Fit layout but didn't explain it properly. Fit layout takes the first child component (only ONE) and fits it to the size of the container (window in this case).

That means, the first combobox will have the size of the window and will not show the other items at all. Fit layout will size the container to it's child component.

https://fiddle.sencha.com/#fiddle/12rs

Notice where the sizes are (or lack of sizes and autosizing happens)