代码之家 › 专栏 › 技术社区 › Onkelborg

ExtJS-填充和自动高度

extjs dom css html javascript

Onkelborg · 技术社区 · 14 年前

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

组合高度(它们没有任何填充、边距等)是其父容器的100%。最好是不知怎的互相堆积。

问题是我 不知道高度 无论是上面板还是下面板(它不是固定的,而且由于面板中的内容可能会更改,所以可能会更改,这是两个菜单) 顶部面板 填满离开剩余的空间,或者 滚动条(如果需要) .

有人知道从哪里开始吗?

编辑
我认为问题的一部分是缺少“resize”事件。我想我可以用一些半动态/静态的方法来计算下面板的高度

4 回复 | 直到 14 年前

giliev Kristijan Iliev 9 年前

这不是一个容易解决的问题。根据你对问题小组2的描述 autoHeight: true ,但无法告诉浏览器或Ext根据此自动调整顶部面板的大小。

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

使用固定高度的绝对布局为两个面板创建外部容器。对其应用自定义的“位置:相对”样式。
config x: 0, y: 0, anchor: "100% 100%", autoScroll: true
面板2是 自动高度:真 与习俗 style: "top: auto; bottom: 0"
以1秒左右的间隔运行任务,检查面板2的高度,并将该高度指定给面板1上的填充底部样式

Andy 13 年前

vbox软件 如果子项具有 flex 0 或 undefined

因此,在您的示例中,顶部面板将具有 弯曲 属于 1 弯曲 属于 :

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

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

SW4 14 年前

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

user2648222 11 年前

您还可以使用CSS技巧(“max-height”CSS字段),而不是“layout”和“flex”ExtJS字段。为此,只需在元素中添加以下可滚动的行:

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

用ExtJS 3.4.0测试。