对齐：'stretch' 不适用于手风琴布局

Question

我添加了一个 'accordion' 布局，它包含在 'border' 布局的 'west' 区域中。但是 align : 'stretch' 属性不适用于手风琴布局。

手风琴布局

var user_menu_items = new Ext.Panel({
        layout: 'accordion',
        height: 565,
        align: 'stretch',
        id: 'usermenu',
        items: [{
                layout: 'fit',
                title: 'Configuration',
                id: 'menulist1',
                html: 'Group1 Content',
                collapseFirst: true
            }, {
                title: 'User Action Group2',
                id: 'menulist2',
                html: 'Group2 Content'
            }, {
                title: 'User Action Group3',
                id: 'menulist3',
                html: 'Group3 Content'
            }]
    });

边框布局

Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [{
                layout: 'border',
                defaults: {
                    collapsible: false,
                    split: false,
                    bodyStyle: 'padding:2px'
                },
                items: [{
                        title: 'USER MENU',
                        region: 'west',
                        margins: '5 0 0 0',
                        cmargins: '5 5 0 0',
                        width: 225,
                        minSize: 100,
                        maxSize: 250,
                        collapsible: true,
                        collapsed: false,
                        bodyStyle: 'padding:0px',
                        items: [user_menu_items]
                    }]
              }],
        renderTo: Ext.getBody()
    });

我正在使用 extjs-4.2.2

Answer 1

你可以试试下面的方法：

var user_menu_items = new Ext.Panel({
        layout: 'accordion',
        //height: 565,
        //align: 'stretch',
        id: 'usermenu',
        items: [{
                layout: 'fit',
                title: 'Configuration',
                id: 'menulist1',
                html: 'Group1 Content',
                collapseFirst: true
            }, {
                title: 'User Action Group2',
                id: 'menulist2',
                html: 'Group2 Content'
            }, {
                title: 'User Action Group3',
                id: 'menulist3',
                html: 'Group3 Content'
            }]
    });


Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [{
                layout: 'border',
                defaults: {
                    collapsible: false,
                    split: false,
                    bodyStyle: 'padding:2px'
                },
                items: [{
                        title: 'USER MENU',
                        region: 'west',
                        margins: '5 0 0 0',
                        cmargins: '5 5 0 0',
                        width: 225,
                        minSize: 100,
                        maxSize: 250,
                        collapsible: true,
                        collapsed: false,
                        bodyStyle: 'padding:0px',
                        layout: 'accordion', // <------- ADD THIS LINE TO WEST PANEL.------------------>
                        items: [user_menu_items]
                    }]
              }],
        renderTo: Ext.getBody()
    });

Answer 2

如果我没记错的话，Ext.panel.Panel 没有配置选项 align。

什么有配置选项 align is the Ext.layout.container.Accordion。

所以代码是：

var user_menu_items = new Ext.Panel({
    layout: {
        type:'accordion',
        align: 'stretch'
    },
    height: 565,
    ...

对齐：'stretch' 不适用于手风琴布局

Align : 'stretch' not working for Accordion layout

extjs

extjs4

extjs4.2

extjs5