我有一个带有VBox布局的Ext JS面板(对齐拉伸)。 其中有两个容器。

当窗口调整大小时,我希望容器像这样调整大小:

所需的调整大小功能

注意:顶部区域的最小高度必须为200px 每个元素上的内容应自动溢出。

编辑:为澄清起见,每个图像在各种窗口大小下显示面板的所需布局。 这是每个图像的说明(从左到右):

  1. 所有内容都适合窗口时的布局。 顶部的高度(在此状态下)由其子元素的高度确定。

  2. 当窗口垂直调整到底部高度为100px (最大高度)的位置时的布局。 到目前为止,底部将调整大小并溢出,但顶部的高度将保持不变。

  3. 调整窗口大小后的布局。 现在, 而不是底部调整大小,顶部应该调整大小并溢出。

这是我的代码(为便于阅读而简化):

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.panel.Panel',

    layout: {
        type: 'vbox',
        align: 'stretch',
    },
    autoScroll: true,

    items: [
        {
            xtype: 'container',
            autoScroll: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },

            minHeight: 200

            items: [
                // There are a few variable height elements here
            ]
        },
        {
            xtype: 'bottomSection',
            minHeight: 100,
            autoScroll: true
            flex: 1
        }
    ]
});

这在某种程度上可行,但是在将底部调整到最小高度( 100px )之后,顶部不会开始收缩。

有没有办法使用纯Ext JS实现此功能? 如果没有,是否有一种简单的方法可以通过处理事件(即onResize )来做到这一点?

  ask by Sumner Evans translate from so

本文未有回复,本站智能推荐:

1回复

标签/ Vbox布局

我有一个应用程序,它使用选项卡布局,并在绑定到每个选项卡的每个表单面板之间共享相同的网格面板作为xtype小部件。 我的主选项卡布局如下: 共享相同网格小部件的各个选项卡(具体来说,demographicGrid,vitalGrid,labGrid,diagnosticGrid,p
1回复

调整vbox子项的大小

我们最近将ext-js从4.1更新为4.2。 在4.1上,以下代码可以调整此处使用的vbox子项的大小。 我们可以在这些孩子之间拖动边框,并且两个项目都会调整大小。 在4.2中,无法调整这些子项的大小。 指向正确的空间时,甚至光标都不会改变形状。 我尝试添加 给第一个
1回复

ExtJS 3.4 vbox布局无法正确呈现

我正在尝试渲染GridPanel和vbox布局中的两个常规面板(稍后将根据用户操作更新面板)。 http://jsfiddle.net/auVez/ 我的商店工作正常 在开始使用vbox之前,GridPanel工作正常。 我为vbox添加了高度,因为我读到它必须有一个
2回复

Ext JS 4-使用hbox,vbox等在表单中布置字段

我在窗口(MVC风格的应用程序)内有一个简单的Ext JS 4表单。 下面的示例显示了4个字段。 此示例已简化,但是现在我需要使用hbox和vbox(可能还有其他?)来设置这些字段并进行布局 例如,我将前两个字段放在窗体顶部的hbox中,以便它们在窗体顶部水平显示,然后将其余字段放在下
1回复

试图让两个vbox彼此​​相邻

我有两个彼此相邻的vbox 。 但是,只有第一个出现。 为什么会这样,我该如何更改? 这是我的代码
1回复

面板VBOX不会渲染项目

标题所暗示的是,我有一个面板,该面板将执行onRender命令以添加项目,例如下面的代码,一个树形面板。 我将treepanel包裹在一个布局-边框中,然后放在一个vbox面板上,以放置在西部区域。 不幸的是,整个树面板无法渲染。 我检查了HTML,其中的元素在那里,但是它们被禁用了,因为
3回复

autoscroll不适用于vbox布局

我需要将formpanels与中心对齐,所以我使用了vbox布局,在使用它之后,autoscroll不像以前一样工作,代码如下: 请告知。
1回复

Sencha Touch:vbox里面的hbox布局问题

我在hbox布局中放置了一个vbox布局。 但vbox无法正常工作。 这是代码: 码: 在这里,vbox的2个面板相互交叉。 如果我只是创建vbox,它可以很好地工作。 这是代码: 码: 我做错了吗? 编辑: 不知何故,我发现,如果我以这种方式交换
1回复

Xul:用vbox动态填充hbox会导致元素垂直放置

我试图在运行时使用以下代码用vboxes元素填充hbox元素: Xul代码: <hbox style="overflow:auto;" id="canvasContainer"> </hbox> JavaScript代码: 这样会导致画布和标签垂
1回复

Ext JS将容器添加到容器

我遇到了非常奇怪的问题。 我的动态创建的容器不会陷入现有的容器中。 //存在的容器 值fr容器ID存在。 我还检查了现有容器是否有问题, cont我有什么遗漏吗? 更新:使用此代码不会改变任何内容 更新:下面是控制台输出的屏幕截图。 第一个是创建好的容器,第二