Ext border布局自动折叠起来

border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。

注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。

参数 split:true 可以调整除了center四个区域的大小。

参数 collapsible:true 将激活折叠功能， title必须设置，因为折叠按钮是出现标题部分的。
参数：collapsed：true则可以折叠起来
Ext.form.FieldSet
view sourcecollapsed : Boolean
Set to true to render the fieldset as collapsed by default. If checkboxToggle is specified, the checkbox will also be unchecked by default.

Defaults to: false，默认展开
floatable : Boolean
重要：这个配置仅仅对于Panel的collapsible属性且其直接子项拥以border 布局时有效。设置为true允许单击一个折叠的 Panel 的placeholder去展现Panel，如果为false则强制用户充分扩大折叠的区域通过点击按钮将其再次展现。默认为true。

Defaults to: true
这里写图片描述

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 300,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'South Region is resizable',
        region: 'south',     // position for region
        xtype: 'panel',
        height: 100,
        split: true,         // enable resizing
        margin: '0 5 5 5'
    },{
        // xtype: 'panel' implied by default
        title: 'West Region is collapsible',
        region:'west',
        xtype: 'panel',
        margin: '5 0 0 5',
        width: 200,
        collapsible: true,   // make collapsible
        id: 'west-region-container',
        layout: 'fit'
    },{
        title: 'Center Region',
        region: 'center',     // center region is required, no width/height specified
        xtype: 'panel',
        layout: 'fit',
        margin: '5 5 0 0'
    }],
    renderTo: Ext.getBody()
});

这里写图片描述

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 300,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'South Region is resizable',
        region: 'south',     // position for region
        xtype: 'panel',
        height: 100,
          collapsible: true,
                split: true, floatable: false,
                collapsed: true,        
        margin: '0 5 5 5'
    },{
        // xtype: 'panel' implied by default
        title: 'West Region is collapsible',
        region:'west',
        xtype: 'panel',
        margin: '5 0 0 5',
        width: 200,
          collapsible: true,
                split: true, floatable: false,
                collapsed: true, 
        id: 'west-region-container',
        layout: 'fit'
    },{
        title: 'Center Region',
        region: 'center',     // center region is required, no width/height specified
        xtype: 'panel',
        layout: 'fit',
        margin: '5 5 0 0'
    }],
    renderTo: Ext.getBody()
});

Ext border布局自动折叠起来

猜你喜欢