hbox中的extjs 100％高度答案

【问题标题】：extjs 100% height in hboxhbox中的extjs 100％高度
【发布时间】：2014-02-11 14:29:33
【问题描述】：

我是 extjs 的新手，只是停留在 hbox 设置中的动态（百分比）高度。抱歉，我可以在 sencha fiddle 上为您提供我的代码，所以我简化了我的问题，

这里是代码

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

如何将容器的高度更改为 100% 而不是静态像素值，如在本例中为 200，

谢谢大家

【问题讨论】：

你能提供一个煎茶小提琴吗？

标签： extjs height hbox

【解决方案1】：

就我而言，包含在具有适合布局的视图中的项目将适合其父容器。

所以我不认为使用布局适合然后将第二个容器高度指定为 45% 会起作用。如果您对第二个容器使用固定高度，这可能会起作用。但我不认为 % 会这样做。

为第一个容器尝试另一种布局，也许锚会按您的预期工作。

这里是煎茶布局的链接...http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html

编辑

嗯，这看起来一点也不像您在编辑之前发布的帖子。试试我对你的第一个代码的建议。

如果我们使用您的实际代码最好，但至于您现在发布的这段代码...https://fiddle.sencha.com/#fiddle/3hg

【讨论】：

是的，这是一个非常简单的例子，它更容易理解和遵循。在我的情况下，我有一个占据所有屏幕尺寸的容器，所以我需要将它设置为 100%，并且在这个容器内我需要 Hbox 和几个项目。容器内的面板的高度为 0px，如果使用静态 px 值，我会看到指定高度的 hbox 面板，但我需要 % rafer 比 px。我尝试更改布局，但在 % 高度上仍然没有运气
我看到了你的例子，但我不能使用“Ext.container.Viewport”，因为我在同一个窗口上有其他项目，Viewport 占用所有屏幕尺寸并隐藏其余内容，我需要使用'Ext.container.Container'
我会接受你的回答 lascort，因为你的小提琴代码正在工作，我会按原样发布我的原始代码，谢谢你的帮助

【解决方案2】：

遇到了同样的问题，用这个煎茶小提琴https://fiddle.sencha.com/#fiddle/4uv解决了这个问题：将 hbox 的默认高度更改为：

默认值：{ xtype：'组件'，高度：'100%' },

【讨论】：