Question

我正在使用ExtJS（html / css），我有一个关于布局的问题。例如：

|--------|
|        |
|        |
|        |
|        |
|        |
|--------|
|        |
|        |
|--------|

组合高度（它们没有任何填充，边距等）是其父容器的100％。优选地，两个面板以某种方式彼此堆叠。

问题是我不知道顶部面板和底部面板的高度（它没有固定，并且可能会改变，因为面板内的内容可能会改变，这是两个菜单。）我需要顶部面板来填充剩余的空间，或者如果需要的话滚动条。

解决方案是纯粹的ExtJS并不重要，只是两个面板的容器是一个ExtJS面板，里面两个面板的内容是由javascript驱动的纯HTML。

谁知道从哪里开始？

修改
我认为问题的一部分是缺乏“调整大小”事件。我想我可以使用一些半动态/静态解决方案，并尝试计算下面板的高度

Answer 1

可能有一种更简单的方法。在使用 vbox 布局时，如果子项目的flex为0或undefined，则在ExtJS 4中（我没有在3中进行测试但可能会有效）布局管理器不会调整该项的高度。

因此，对于您的示例，顶部面板的flex为1，而底部面板的flex为0：

Ext.create("widget.panel", {
  renderTo: Ext.getBody(),
  height: 300, width: 400,
  layout: { type: 'vbox', pack: 'start', align: 'stretch' },
  items: [{
    // our top panel
    xtype: 'container', 
    flex: 1,             // take remaining available vert space
    layout: 'fit', 
    autoScroll: true, 
    items: [{ 
      xtype: 'component', 
      // some long html to demonstrate scrolling
      html: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
    }] 
  },{ 
    // our bottom panel
    xtype: 'container', 
    flex: 0,             // dont change height of component (i.e. let children dictate size.)
    items: [{ 
      xtype: 'button', 
      height: 200, 
      text: 'Hello World'
    }]
  }]
});

现在，底部面板将采用任何子组件的高度，顶部面板将采用剩余的可用高度。

Answer 2

如果我的问题是正确的 - 两个面板不应该有固定的尺寸，除非他们有内容，在这种情况下他们滚动？通常我会建议至少有一个面板代表“主”内容并且具有固定的大小。否则，这应该工作：

layout:'vbox',
layoutConfig: {
    align : 'stretch',
    pack  : 'start',
},
items: [
    {html:'panel 1', flex:1},
    {html:'panel 2', flex:2}
]

只需将该配置提供给'holding'元素，然后根据需要设置'panel 1'和'panel 2'（即将'{html：'panel 1'，flex：1}'替换为名称组件）

Answer 3

这不是一个容易解决的问题。根据您对问题的描述，Panel 2必须有autoHeight: true，但是没有办法告诉浏览器或Ext根据它自动调整顶部面板的大小。

我能想到的最好的方法是在计时器上手动完成：

为两个面板创建一个具有绝对布局，固定高度的外部容器。对它应用自定义的“position：relative”样式。
面板1有config x: 0, y: 0, anchor: "100% 100%", autoScroll: true
面板2为autoHeight: true，其中包含自定义style: "top: auto; bottom: 0"
以1秒左右的间隔运行任务，检查面板2的高度，并将该高度分配给面板1上的填充底部样式

Answer 4

你也可以使用CSS技巧（'max-height'CSS字段）代替'layout'和'flex'ExtJS字段。为此，只需将以下行添加到应该可滚动的元素：

bodyStyle: { maxHeight: '300px' },
autoScroll: true,

使用ExtJS 3.4.0进行测试。

ExtJS - 填充和自动高度

4 个答案: