标准布局类(11中布局类)

113837_oL68_1773772.png

<div class="box">
    <div id="myAuto" class="w_320">
        <h2>自动布局类</h2>
    </div>
    <div id="myFit" class="w_320">
        <h2>Fit自适应布局</h2>
    </div>
    <div id="myAccordion" class="w_320">
        <h2>Accordion折叠布局</h2>
    </div>
    <div id="myCard" class="w_320">
        <h2>Card卡片式布局</h2>
    </div>
    <div id="percenAnchor" class="w_320">
        <h2>锚点布局百分比定位1</h2>
    </div>
    <div id="offsetsAnchor" class="w_320">
        <h2>锚点布局偏移值定位2</h2>
    </div>
    <div id="sidesAnchor" class="w_320">
        <h2>锚点布局参考线定位3</h2>
    </div>
    <div id="myAbsolute" class="w_320">
        <h2>Absolute绝对位置的布局</h2>
    </div>
    <div id="myCheckboxGroup" class="w_320">
        <h2>复选框布局</h2>
    </div>
    
    <div id="myColumnWidth" class="w_320">
        <h2>Column列布局1:固定列宽</h2>
    </div>
    
    <div id="myColumnBaiWidth" class="w_320">
        <h2>Column列布局2:百分比列宽</h2>
    </div>
    <div id="myColumn" class="w_320">
        <h2>Column列布局2:固定百分比结合使用</h2>
    </div>
    
    <div id="myTable" class="w_320">
        <h2>表格布局</h2>
    </div>
    
    <div id="myBorder" class="w_320">
        <h2>边框布局</h2>
    </div>
    
    <div id="myBox" class="w_320">
        <h2>盒子布局</h2>
    </div>
</div>
<!--CSS样式文件-->
<style> 
        .box { padding:50px 0 0 50px; }
        * { padding:0; margin:0; }
        .w_320 { width:320px; float:left; }
        .my-foo-trigger { border-radius:5px; }
        .aaa { background:red; }
</style>
Ext.onReady(function(){
    
    //标准布局类(11中布局类)
    //如果直接在面板上添加内容会很凌乱,如果划分不同的区域,在区域中添加内容将会很整洁,就要用到布局类
    
    //1.Auto布局类(Ext.layout.container.Auto)(默认方式)
    
    Ext.create('Ext.panel.Panel',{
    
        title : '默认Auto布局类',
        width : 250,
        height : 200,
        renderTo : 'myAuto',
        frame : true,
        bodyPadding : 5,
        layout : 'auto',//自动布局
        defaults : {
            bodyStyle : 'background-color:#ffffff'
        },
        //items配置项默认的xtype类型为panel,可以通过defaultType配置项进行更改
        items : [{
            title : '面板一',
            html : '面板一'
        },{
            title : '面板二',
            html : '面板二'
        }]
    });
    
    //2.Fit自适应布局(使唯一的子元素充满容器,只显示一个面板,第二个面板并不会显示)
    Ext.create('Ext.panel.Panel',{
        title : 'Fit自适应布局',
        width : 250,
        height : 200,
        renderTo : 'myFit',
        frame : true,
        layout : 'fit',//使唯一的子元素充满容器,只显示一个面板,第二个面板并不会显示
        defaults : {
            bodyStyle : 'background-color:#ffffff;'
        },
        items : [{
            title : '面板一',
            html : '面板一'
        },{
            title : '面板二',
            html : '面板二'
        }]
    });
    
    //3.Accordion折叠布局(任何时候都只有一个自面板处于打开状态)
    //制作分组内容或者分组菜单
    Ext.create('Ext.panel.Panel',{
        title : 'Accordion折叠布局',
        width : 250,
        height : 200,
        renderTo : 'myAccordion',
        frame : true,
        bodyPadding : 5,
        layout : 'accordion',
        defaults : {
            bodyStyle : 'padding:15px;background-color:#ffffff'
        },
        items : [{
            title : '面板一',
            html : '面板一'
        },{
            title : '面板二',
            html : '面板二'
        },{
            title : '面板三',
            html : '面板三'
        }]
    });
    
    //4.Card卡片式布局(用于向导或者标签页)
    //任何时候只有一个自面板处于显示状态
    var myCard =  Ext.create('Ext.panel.Panel',{
        title : 'Card卡片式布局',
        width : 250,
        height : 200,
        renderTo : 'myCard',
        frame :true,
        layout : 'card',//
        activeItem : 0,//设置默认显示第一个子面板
        bodyPadding : 5,
        defaults : {
            bodyStyle : 'padding:15px; background-color:#ffffff'
        },
        items : [{
            title : '嵌套面板一',
            html : '说明一',
            id : 'p1'
        },{
            title : '嵌套面板二',
            html : '说明二',
            id : 'p2'
        },{
            title : '嵌套面板三',
            html : '说明三',
            id : 'p3'
        }],
        buttons : [{
            text : '上一页',
            handler : changePage
        },{
            text : '下一页',
            handler : changePage
        }]
    });
    //触发函数
    function changePage(btn){
        
        var index = Number(myCard.layout.activeItem.id.substring(1));
        console.info(index);
        if(btn.text == '上一页'){
            index -= 1;
            if(index < 1){
                index = 1;
            }
        }else {
            index += 1;
            if(index > 3){
                index = 3;
            }
        }
        myCard.layout.setActiveItem('p'+index);
    }
    
    //5.Anchor锚点布局
    //(1)百分比定位,(2)偏移值定位,(1)参考线定位
    //5.1百分比定位
    Ext.create('Ext.panel.Panel',{
        title : '百分比定位',
        width : 250,
        height :200,
        renderTo : 'percenAnchor',
        frame : false,//渲染面板
        layout : 'anchor',
        defaults : {
            bodyStyle : 'padding:15px; background-color:#ffffff'
        },
        items : [{
            title : '子面板',
            anchor : '50% 50%'
        }]
    });
    //5.2 offsetsAnchor偏移值定位
    Ext.create('Ext.panel.Panel',{
        title : '偏移值定位',
        width : 250,
        height : 150,
        renderTo : 'offsetsAnchor',
        frame : false,//
        layout : 'anchor',
        defaults : {
            bodyStyle : 'padding:15px; background-color:#ffffff'
        },
        items : [{
            title : '子面板',
            anchor : '-10 -10'//宽高偏移父元素10像素
        }]
    });
    //5.3 sidesAnchor参考线定位
    Ext.create('Ext.panel.Panel',{
        title : '参考线定位',
        width : 250,
        height : 150,
        renderTo : 'sidesAnchor',
        frame : false,
        layout : 'anchor',
        autoScroll : true,
        defaults : {
            bodyStyle : 'padding:15px; background-color:#ffffff'
        },
        items : [{
            title : '子面板',
            width : 200,
            height : 100,
            anchor : 'r b',//相对于父容器的右边和底边的差值进行定位
            html : '说明'
        }]
    });
    
    //6. Absolute绝对位置的布局
    Ext.create('Ext.panel.Panel',{
        title : '',
        width : 250,
        height : 150,
        renderTo : 'myAbsolute',
        frame : false,
        layout : 'absolute',
        
        defaults : {
            width : 100,
            height : 70,
            frame : true,
            bodyStyle : 'padding:5px; background-color:#ffffff'
        },
        items : [{
            title : '面板一',
            x : 10,//横坐标距离父元素组编10像素
            y : 10,//纵坐标距离父元素组编10像素,
            html : '面板一的内容'
        },{
            title : '面板二',
            x : 130,//横坐标距离父元素组编10像素
            y : 40,//纵坐标距离父元素组编10像素,
            html : '面板二的内容'
        }]
    });
    
    //7. myCheckboxGroup复选框布局
    Ext.create('Ext.panel.Panel',{
    
        title : '复选框布局',
        width : 250,
        height : 150,
        renderTo : 'myCheckboxGroup',
        frame : true,
        bodyPadding : 5,
        defaults : {
            width : 240,
            labelWidth : 40,
            labelSeparator : ': '
        },
        items : [{
            fieldLabel : '爱好',
            xtype : 'checkboxgroup',
            columns : 3,
            items : [{
                name : 'love',
                boxLabel : '游泳',
                inputValue : 'swim'
            },{
                name : 'love',
                boxLabel : '游戏',
                inputValue : 'game'
            },{
                name : 'love',
                boxLabel : '游戏',
                inputValue : 'game'
            },{
                name : 'love',
                boxLabel : '游戏',
                inputValue : 'game'
            },{
                name : 'love',
                boxLabel : '游戏',
                inputValue : 'game'
            }]
        }]
    });
    
    //8. Column列布局
    //所有的columnWidth值相加必须等于1或者100%
    //8.1 指定固定列宽
    Ext.create('Ext.panel.Panel',{
        title : 'Column列布局 指定固定列宽',
        width : 250,
        height : 150,
        frame : true,
        renderTo : 'myColumnWidth',
        layout : 'column',
        defaults : {
            height : 100,
            frame : true,
            bodyStyle : 'background-color:#ffffff'
        },
        items : [{
            title : '子面板一',
            width : 100, //指定列宽100像素
            html : '列宽100像素'
        },{
            title : '子面板二',
            width : 100, //指定列宽100像素
            html : '列宽100像素'
        }]
    });
    
    //8.2 百分比列宽
    Ext.create('Ext.panel.Panel',{
        title : 'Column列布局 百分比列宽',
        width : 250,
        height : 150,
        frame : true,
        renderTo :'myColumnBaiWidth',
        layout : 'column',
        defaults : {
            height : 100,
            frame : true,
            bodyStyle : 'background-color:#ffffff'
        },
        items : [{
            title : '子面板一',
            columnWidth : 0.3 ,//百分比宽度30%
            html : '列宽<span style="color:red">30%</span>'
        },{
            title : '子面板二',
            columnWidth : 0.7, //百分比宽度70%
            html : '列宽<span style="color:red">70%</span>'
        }]
    });
    
    
    //8.3  固定百分比结合使用
    Ext.create('Ext.panel.Panel',{
        title : '固定百分比结合使用',
        width : 250,
        height : 150,
        frame : true,
        renderTo :'myColumn',
        layout : 'column',
        defaults : {
            height : 100,
            frame : true,
            bodyStyle : 'background-color:#ffffff'
        },
        items : [{
            title : '子面板一',
            idth : 100 ,//指定宽度100
            html : '列宽<span style="color:red">指定宽度100</span>'
        },{
            title : '子面板二',
            columnWidth : 0.3, //百分比宽度30%
            html : '列宽<span style="color:red">30%</span>'
        },{
            title : '子面板三',
            columnWidth : 0.7, //百分比宽度70%
            html : '列宽<span style="color:red">70%</span>'
        }]
    });
    
    //9. Table表格布局
    Ext.create('Ext.panel.Panel',{
    
        title : 'Table表格布局',
        width : 250,
        heigh : 150,
        frame : true,
        renderTo : 'myTable',
        layout : {
            type : 'table',//表格布局
            columns : 4//设置默认4列
        },
        defaults : {
            width : 50,
            height : 50,
            frame : true,
            bodyStyle : 'bakcground-color : #ffffff'
        },
        items :  [{
            title : '面板一',
            width : 150,
            colspan : 3//设置跨3列
        },{
            title : '面板二',
            height : 100,
            rowspan  : 2//跨2行
        },{
            title : '面板三'
        },{
            title : '面板四'
        },{
            title : '面板五'
        }]
    });
    
    //10. Border边框布局(面向应用的UI风格的布局)
    Ext.create('Ext.panel.Panel',{
        title : 'Border边框布局',
        width : 250,
        height : 200,
        frame : true,
        renderTo : 'myBorder',
        layout : 'border',
        defaults : {
            collapsible : true
        },
        items : [{
            title : '北部面板',
            region : 'north' ,//指定区域north
            height : 50,
            html : '头部'
        },{
            title : '南部面板' ,
            region : 'south',
            height : 50,
            html : '底部'
        },{
            title : '西部面板',
            region : 'west',
            width : 50,
            html : '左边'
        },{
            title : '东部面板',
            region : 'east',
            width : 50,
            html : '右边'
        },{
            title : '主要内容',
            region : 'center',//这个必须有
            html : '中间区域不能缺少'
        }]
    });
    
    //11. Box盒布局
    //水平盒、垂直盒
    Ext.create('Ext.panel.Panel',{
        title : '盒子布局',
        width : 300,
        height : 150,
        frame : true,
        renderTo : 'myBox',
        layout : {
            type : 'hbox',
            align : 'stretch'//子面板高度充满父容器
        },
        items : [{
            title : '子面板一',
            flex : 1,
            html : '1/4宽一'
        },{
            title : '子面板二',
            flex : 1,
            html : '1/4宽二'
        },{
            title : '子面板三',
            flex : 2,
            html : '1/2宽三'
        }]
    });
    
});


转载于:https://my.oschina.net/u/1773772/blog/617537

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值