Ext js 7 现代可调整大小的面板

Question

我很想制作一个可调整大小的面板布局。我做了一个 fiddle:

https://fiddle.sencha.com/#view/editor&fiddle/3c94

为什么我不能在 test1 和 test2 之间使用 resizer 而 test3 和 test4 之间的resizer 正在工作。

我尝试将 flex/fit 添加到一些容器中，尝试删除不重要的东西，找不到解决方案。

Answer 1

因为您在第一个面板中使用了 fit 布局，在第二个面板中使用了 hbox（有效）：

Ext.create('Ext.form.Panel', {
    xtype: 'main_customer',
    itemId: 'main_customer',
    renderTo: Ext.getBody(),

    flex: 1,
    items: [{
        xtype: 'panel',
        itemId: 'maincontainer',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'panel',
            padding: 0,
            scrollable: true,
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            flex: 1,
            height: '63%',
            resizable: {
                split: true,
                edges: ['south']
            },
            items: [{
                xtype: 'panel',
                resizable: {
                    split: true,
                    edges: ['east'],
                },
                items: [{
                    xtype: 'panel',
                    html: 'test 1',
                }]
            }, {
                xtype: 'panel',
                html: 'test 2',
            }]
        }, {
            xtype: 'panel',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            flex: 1,
            items: [{
                xtype: 'panel',
                width: '50%',
                resizable: {
                    split: true,
                    edges: 'east'
                },
                html: 'test 3',
            }, {
                xtype: 'panel',
                html: 'test 4',
            }]
        }]
    }],
    collapsible: false
});

Ext js 7 现代可调整大小的面板

Ext js 7 modern resizable panels

resize

extjs

panel