调整 vbox 子项的大小答案

【问题标题】：Resizing child items of vbox调整 vbox 子项的大小
【发布时间】：2013-09-09 09:35:35
【问题描述】：

我们最近将 ext-js 从 4.1 更新到了 4.2。在 4.1 上，以下代码可以调整此处使用的 vbox 子项的大小。我们可以在这些孩子之间拖动边框，这两个项目都会调整大小。

在 4.2 中无法调整这些子项的大小。当指向正确的空间时，甚至光标都不会改变形状。

Ext.define('Example.view.NavPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.exampleNavPanel',
    requires: ['Example.view.example.List', 'Example.view.example2.List', 'Example.view.paneledycji.EditTabPanel'],
    layout: {
        type: 'vbox',
        align: 'stretch',
        pack: 'start'
    },
    items: [
        {
            xtype: 'panel',
            title: 'Navpanel',
            collapsible: true, 
            flex: 1,
            layout: {
                type: 'hbox',
                pack: 'start',
                align: 'stretch'
            },
            items: [
                {xtype: 'exampleList', flex: 1},
                {xtype: 'example2List', flex: 3}
            ]

        },
        {
            xtype: 'editTabPanel',
            flex: 1
        }
    ]
});

我尝试添加

resizable:true

给第一个孩子。它使光标在指向边框时改变形状，我可以拖动它......但孩子们不会调整大小。当我从第一个孩子中删除 flex 时，我终于可以调整项目的大小，但它几乎没有问题：

我可以调整第一个项目的高度和宽度，我只想要高度，这就是它在 4.1 中的工作方式
vbox 会为第一个孩子提供尽可能多的空间，如果第一个孩子太大，第二个孩子甚至不在窗口中，因此无法看到或调整第一个孩子的大小，因为边框在屏幕外
对任一孩子设置 minHeight 完全没有效果

我希望能够为大孩子设置最小和最大高度，最好是百分比，并禁用宽度调整。理想情况下，我还希望能够为两个孩子设置默认尺寸。我无法使用 docs.sencha.com 上列出的任何配置组合来解决这个问题。我需要做什么才能达到这个效果？

【问题讨论】：

标签： javascript layout extjs extjs4.2 vbox

【解决方案1】：

您可以使用boxready 事件在初始布局后删除flex 属性。这样，您可以从初始自动调整大小中受益，但不会阻止组件稍后调整大小。

对于您的第二个问题，使用resizeHandles 选项指定可以抓取以调整大小的边。

Ext.define('Example.view.NavPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.exampleNavPanel',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'panel',
        title: 'Navpanel',

        flex: 1,

        resizable: true,
        resizeHandles: 's',

        listeners: {
            single: true,
            boxready: function() {
                delete this.flex;
            }
        }
    },{
        xtype: 'component',
        html: 'editTabPanel',
        flex: 1
    }]
});

【讨论】：