ExtJS 的布局

容器中可以放多个组件，甚至可以放其他容器
布局负责帮助容器，管理其中的组件。
容器中的layout选项（属性）用于控制容器的布局。

1.垂直布局与水平布局

Ext.onReady(function () {

    Ext.create('Ext.window.Window', {
        title: '布局的演示',
        width: 600,
        height: 400,
        items: [

            //window中的布局，默认垂直布局

            //第一个组件       
            {
                fieldLabel: '作者',
                xtype: 'textfield'
            },

            //第二个组件
            {
                fieldLabel: '出版社',
                xtype: 'textfield'
            },

            //第三个组件 没有xtype，默认panel
            {
                //panel中的布局，显式指定水平布局
                title: '时间',
                layout: 'hbox',
                height: 80,
                items: [{
                        fieldLabel: '开始日期',
                        xtype: 'datefield'
                    }, {
                        fieldLabel: '结束日期',
                        xtype: 'datefield'
                    }

                ]

            }

        ]

    }).show();

});

2.Resizer改变上下左右大小

Ext.onReady(function () {

    Ext.create('Ext.window.Window', {
        
        title: '布局的演示：Resizer ',
        width: 600,
        height: 400,
        items: [
            //window中的布局，默认垂直布局
            //第一个组件       
            {
                id : 'author',
                fieldLabel: '作者',
                xtype: 'textfield'
            },
            //第二个组件
            {
                id: 'addr',
                fieldLabel: '出版社',
                xtype: 'textfield'
            },
            //第三个组件 没有xtype，默认panel
            {
                //panel中的布局，显式指定水平布局
                title: '时间',
                layout: 'hbox',
                height: 80,
                items: [{
                        fieldLabel: '开始日期',
                        xtype: 'datefield'
                    }, {
                        fieldLabel: '结束日期',
                        xtype: 'datefield'
                    }
                ],
                //第三个组件的resize
                resizable:{
                  handles:'n s w',  //哪些方向可以拉伸
                  minWidth:200,
                  minHeight:100
                }

            }

        ]

    }).show();
    
    Ext.create('Ext.resizer.Resizer',{
        el: 'author',
        handles :'all'
    });

});

3.Splitter分割布局

Ext.onReady(function () {

    Ext.create('Ext.panel.Panel', {
        
        title: '布局的演示：Splitter ',
        width: 600,
        height: 400,
        renderTo:Ext.getBody(),
        
        layout:{
          type:'hbox',  
          align:'center'
        },
        
        items: [
            
            //第一个组件  没有xtype 默认为panel     
            {
                
                title:'第一个panel',
                height:'100%',
                flex:2                 //比例
            },
            // splitter
            {
                xtype:'splitter',
                
            },
            //第二个组件  没有xtype 默认为panel     
            {
                
                title:'第二个panel',
                height:'100%',
                flex:3                 //比例
            },
            // splitter
            {
                xtype:'splitter',
                
            },
            //第三个组件  没有xtype 默认为panel     
            {
                
                title:'第三个panel',
                height:'100%',
                flex:4                 //比例
            }

        ]

    });
    

});

4.Accordion折叠布局

Ext.onReady(function () {

    Ext.create('Ext.panel.Panel', {
        
        title: '布局的演示：Accordion ',
        width: 600,
        height: 400,
        renderTo:Ext.getBody(),
        
        layout:'accordion',
        
        items: [
            
            //第一个组件  没有xtype 默认为panel     
            {
                title:'第一个panel',
            },

            //第二个组件  没有xtype 默认为panel     
            {
                title:'第二个panel',
            },

            //第三个组件  没有xtype 默认为panel     
            {
                title:'第三个panel',
            }

        ]

    });
    

});

5.Border布局（把panel分割成5个部分）

Ext.onReady(function () {

    Ext.create('Ext.panel.Panel', {
        
        title: '布局的演示：border ',
        width: 600,
        height: 500,
        
        renderTo:Ext.getBody(),
        
        layout:'border',
        items: [
            
            //第一个组件  没有xtype 默认为panel     
            {
                title:'上侧panel',
                height:100,
                region :'north'
            },

            //第二个组件  没有xtype 默认为panel     
            {
                title:'左侧panel',
                width:80,
                split:true,
                region :'west'
            },

            //第三个组件  没有xtype 默认为panel     
            {
                title:'中央panel',
                region :'center'
            },
            //第四个组件  没有xtype 默认为panel     
            {
                title:'左侧panel',
                width:80,
                region :'east'
            },
            //第五个组件  没有xtype 默认为panel     
            {
                title:'下侧panel',
                height:100,
                collapsible:true,
                region :'south'
            },
        ]

    });
    
});