Question

我收录了一支＆＃39;手风琴＆＃39;布局，包含在＆＃39; west＆＃39;区域边界＆＃39;布局。但是对齐：＆＃39;伸展＆＃39;属性不适用于手风琴布局。

手风琴布局

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的内容是Ext.layout.container.Accordion。

所以代码是：

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

对齐：＆＃39;伸展＆＃39;不适用于Accordion布局

2 个答案: