EXTJS4自学手册——EXT容器布局（Fit,Card,Border）

一、Fit布局

说明：容器内的组件占满整个容器

例子：

<script type="text/javascript">
    <!--在页面加载完成后调用JS代码-->
    Ext.onReady(function(){
        //定义panel组件
var panel1 = Ext.create('Ext.panel.Panel',{
            
            title:'panel1',
            html:'columnWidth:.28'
        });
        
        //将3个panel放在一个弹出层中
var w =    Ext.create('Ext.window.Window',{
            width:200,
            height:200,
            title:'fit布局',
            layout:'fit',
            items:[panel1]
        });
        w.show();
    });
</script>

执行结果：

 

二、Card布局

说明：多个组件重叠排列，一次只有一个组件显示，占满整个容器。

例子：

<script type="text/javascript">
    <!--在页面加载完成后调用JS代码-->
    Ext.onReady(function(){
        //切换panel方法
var changePanel = function(button){
            //获取当前展示的panel
var activeItem = w.layout.activeItem;
            //当前展示的panel是第几个
var active = w.items.indexOf(activeItem);    
            //如果按下的是上一张按钮        
if(button.id=="preButton"){
                active-=1;//索引减一
                Ext.getCmp('nextButton').setDisabled(false);//启用下一张按钮
            }else{
                active+=1;//索引加一
                Ext.getCmp('preButton').setDisabled(false);//启用上一张按钮
            }
            w.layout.setActiveItem(active);//将索引为active的panel展示出来，其他的panel隐藏
            
            if(active==0){
                Ext.getCmp('preButton').setDisabled(true);//如果是第一张，第一张按钮不可用
            }
            if(active==2){
                Ext.getCmp('nextButton').setDisabled(true);//如果是最后一张，下一张按钮不可用
            }
        
        }
    
        //定义panel组件
var panel1 = Ext.create('Ext.panel.Panel',{
            
            title:'panel1',
            html:'panel1'
        });
        var panel2 = Ext.create('Ext.panel.Panel',{
            
            title:'panel2',
            html:'panel2'
        });
        var panel3 = Ext.create('Ext.panel.Panel',{
            
            title:'panel3',
            html:'panel3'
        });
        //将3个panel放在一个弹出层中
var w =    Ext.create('Ext.window.Window',{
            width:200,
            height:200,
            title:'card布局',
            layout:'card',
            //要包含的组件
            items:[panel1,panel2,panel3],
            //定义按钮
            bbar:[{
                id:'preButton',
                text:'上一张',
                //单击按钮时触发的方法
                handler:changePanel,
                disabled:true
            },'->',{
                id:'nextButton',
                text:'下一张',
                //单击按钮时触发的方法
                handler:changePanel
            }]
        });
        w.show();
    });
</script>

执行结果：

 

三、Border布局

说明：将容器分为上下左右中5个区域，其中中间区域的组件必须有，其他区域可有可无

例子：

<script type="text/javascript">
    <!--在页面加载完成后调用JS代码-->
    Ext.onReady(function(){
        
    
        //定义panel组件
var panel1 = Ext.create('Ext.panel.Panel',{
            //方位：北
            region:'north',
            title:'panel1',
            height:30,
            html:'north'
        });
        var panel2 = Ext.create('Ext.panel.Panel',{
            //方位：中
            region:'center',
            title:'panel2',
            html:'center'
        });
        var panel3 = Ext.create('Ext.panel.Panel',{
            //方位：南
            region:'south',
            height:40,
            title:'panel3',
            html:'south'
        });
        var panel4 = Ext.create('Ext.panel.Panel',{
            //方位：东
            region:'east',
            width:50,
            title:'panel3',
            html:'east'
        });
        var panel5 = Ext.create('Ext.panel.Panel',{
            //方位：西
            region:'west',
            width:100,
            title:'panel3',
            html:'west'
        });
        
        var w =    Ext.create('Ext.window.Window',{
            width:400,
            height:400,
            title:'border布局',
            layout:'border',
            //要包含的组件
            items:[panel1,panel2,panel3,panel4,panel5]
        });
        w.show();
    });
</script>

执行结果：