Javascript ExtJS-填充和自动高度_Javascript_Html_Css_Dom_Extjs

Javascript ExtJS-填充和自动高度

javascript html css dom extjs

Javascript ExtJS-填充和自动高度,javascript,html,css,dom,extjs,Javascript,Html,Css,Dom,Extjs,我正在使用ExtJS（html/css），我有一个关于布局的问题。例如： |--------| | | | | | | | | | | |--------| | | | | |--------| 组合高度（它们没有任何填充、边距等）是其父容器的100%。最好是两个面板以某种方式堆叠在一起问题是我不知道顶部面板和底部面板的高度（它不是固定的，并且可能会改变，因为面板中的内容可能会改变，这是两个菜单

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

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

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

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

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

有人知道从哪里开始吗

编辑

我认为问题的一部分是缺少“调整大小”事件。我想我可以用一些半动态/静态的解决方案，并尝试计算下面板的高度，如果我的问题正确-两个面板不应该有固定的大小，除非它们有内容，在这种情况下它们会滚动？通常我会建议至少有一个面板代表“主”内容，并且具有固定大小。否则，这应该是可行的：

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}”替换为组件名称）

这不是一个容易解决的问题。根据您对问题的描述，面板2必须具有

autoHeight:true

，但无法告诉浏览器或Ext根据该值自动调整顶部面板的大小

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

为两个面板创建一个绝对布局、固定高度的外部容器。对其应用自定义“位置：相对”样式

面板1具有

配置x:0、y:0、锚定：“100%100%”、自动滚动：true

面板2具有自定义样式：“顶部：自动；底部：0”
每隔1秒左右运行一个任务，检查面板2的高度，并将该高度指定给面板1上的填充底部样式

vbox

flex

未定义

flex

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

Ext.create（“widget.panel”{
renderTo:Ext.getBody（），
高度：300，宽度：400，
布局：{type:'vbox'，pack:'start'，align:'stretch'}，
项目：[{
//我们的顶部面板
xtype:'容器'，
flex:1，//获取剩余的可用垂直空间
布局：“适合”，
autoScroll：是的，
项目：[{
xtype:'组件'，
//一些长html来演示滚动
html:“Lorem ipsum door sit amet，concetetur adipising elit，sed do eiusmod temporal incident ut labour and dolore magna aliqua.但是，在最小限度的情况下，我们必须在公共消费的基础上进行劳动实践。在自由无产权的情况下，两人或两人在代表个人的情况下进行劳动。Exc不可轻视的圣徒，必须为动物的劳动负责。'
}] 
},{ 
//我们的底部面板
xtype:'容器'，
flex:0，//不要更改组件的高度（即让孩子们指定大小。）
项目：[{
xtype:'按钮'，
身高：200，
文字：“你好，世界”
}]
}]
});

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

flex

vbox