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()
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值