时间戳

首页 > 解决方案 > Ext js 7 现代可调整大小的面板

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

问题描述

我想制作一个可调整大小的面板布局。我做了一个小提琴：

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

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

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

标签： extjsresizepanel

解决方案

因为您在第一个面板中使用了 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
});

推荐阅读