ExtJS - 填充和自动高度

Question

我正在使用 ExtJS (html/css)，我有一个关于布局的问题。示例：

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

组合高度（它们没有任何填充、边距等）是其父容器的 100%。最好是两个面板以某种方式相互堆叠。

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

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

谁知道从哪里开始？

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

Answer 1

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

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

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

Answer 2

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

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

使用 ExtJS 3.4.0 测试。

Answer 3

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

因此，对于您的示例，顶部面板将具有 1 的 flex，底部面板将具有 0 的 flex：

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 4

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

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}' 替换为组件）