ExtJS - 填充和自动高度

Question

我正在使用ExtJS(html/css),我有一个关于布局的问题.例:

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

组合高度(它们没有任何填充,边距等)是它的父容器的100%.优选地,它是两个面板以某种方式彼此堆叠.

问题是,我不知道高度既不是顶部面板也没有底板的(它不是固定的,可能会改变,因为面板中的内容可能会改变,这两个菜单).我需要的顶部面板,以填补了剩余空间,或者如果需要还有滚动条.

解决方案是纯粹的ExtJS并不重要,只是两个面板的容器是一个ExtJS面板,里面两个面板的内容是由javascript驱动的简单html.

谁有线索从哪里开始？

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

Answer 1

可能有一种更简单的方法.在ExtJS的4使用的时候(我没有在3测试,但它可能工作)VBOX的布局,如果一个孩子项目具有flex的0或undefined布局管理器不会调整该项目的高度.

因此,对于您的示例中,顶部面板将有一个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

这不是一个容易解决的问题。根据您对问题的描述，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 上的 padding-bottom 样式