Question

我有一个菜单（面板），当我在布局中展开可折叠菜单时，它会压缩旁边面板的内容。如何扩展内容？这是我的菜单代码。

Ext.define('*****.view.main.MainMenu', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.main.MainMenu',

    title: 'Menu',
    collapsed: true,
    dock: 'left',
    minWidth: 140,

    initComponent: function () {
        var me = this;  

        Ext.applyIf(me, {
            collapseDirection: 'left',
            collapsible: true,

            titleAlign: 'center',
            titleCollapse: false,
            items: [
                {

                }
            ]
        });

        me.callParent(arguments);
    }
});

Answer 1

你可以让它浮动，你可以将它改成一个窗口（这是一个可调整大小和默认浮动的专用面板），你可以改变父容器的布局，你可以将这两个面板包装到一个tabpanel中一次显示一个面板，如果您需要一次只看一个，手风琴也可能适合您。查看Sencha网站上的示例以查看不同的组合。

Answer 2

这样的事情怎么样？

Ext.onReady(function () {

    Ext.define('MainMenu', {
        extend: 'Ext.panel.Panel',

        title: 'Menu',
        collapsed: true,
        titleCollapse: false,
        hideCollapseTool: true,
        minWidth: 140,
        region: 'west'
    });

    var menu = Ext.create('MainMenu');

    var otherPanel = Ext.create('Ext.panel.Panel', {
        title: 'Other Panel',
        region: 'center'
    });

    var panel = Ext.create('Ext.panel.Panel', {
        height: 300,
        width: 500,
        renderTo: Ext.getBody(),
        layout: 'border',
        items: [
            menu,
            otherPanel
        ]
    });
});

在内容上滑动面板

2 个答案: