javascript - ExtJs设置窗口高度

Question

我正在尝试动态设置窗口高度:

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

但是，在浏览器中我看到它将高度设置为“winDecisionEditor-body”，而不是“winDecisionEditor”。如何设置“winDecisionEditor”的高度？预先感谢!

这是我的窗口声明:

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
});

更新:解决问题

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

Answer 1

我认为问题出在布局上。布局适合并不是页面的最佳选择，因为它使内部面板适合容器(反之亦然)。

我认为，如果您想将窗口拉伸(stretch)到内部项目(因此将“项目区域”的大小更改为所需的大小，即在您的示例 190 中)，您应该使用另一种布局。例如，在可能的示例中，我使用 layout:{type:'vbox',align:'stretch'}。

这里我修改了原来的 fiddle :

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

更新:

请考虑以下非常重要的答案 Mitchell Simoens ，即

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)