ExtJS——页面布局汇总_ext页面-优快云博客

本文链接：https://blog.youkuaiyun.com/u013127751/article/details/65443140
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
    var box1 = new Ext.Component({
        autoEl:{
            tag:'div',
            style:'background:red;width:300px;height:30px',
            html:'box1'
        }
    });
    var box2 = new Ext.Component({
        autoEl:{
            tag:'div',
            style:'background:yellow;width:300px;height:30px',
            html:'box2'
        }
    });
    var box3 = new Ext.Component({//生成一些组件,div p image...
        autoEl:{
            tag:'div',
            style:'background:blue;width:300px;height:30px;color:#fff',
            html:'box3'
        }
    });
    //垂直布局  Container
    var containerlayout = new Ext.Container({
        titile:'containerlayout',
      //  layout:'form',没有这个属性值
        items:[box1,box2,box3],
        renderTo:'ContainerLayout'//渲染body的组件，值为组件对应的id值
    });
    //表单布局 Panel
    var formlayout = new Ext.Panel({
        //layout:'form',
        title:'FormLayout',
        items:[
              new Ext.form.TextField({fieldLabel:'用户名'}),
              new Ext.form.TextField({fieldLabel:'密码'}),
              new Ext.form.TextField({fieldLabel:'重复密码'})
        ],
        renderTo:'FormLayout'
    });
    //列布局  Panel
    var ColumnLayout = new Ext.Panel({
        width:600,
        title:'ColumnLayout',
        layout:'column', //设置列布局的关键
        items:[
              new Ext.form.FormPanel({
                title:'第一列',columnWidth:.33,labelWidth:50,
                items:[new Ext.form.TextField({fieldLabel:'用户名'})]
              }),
               new Ext.form.FormPanel({
                title: '第二列', columnWidth: .33, labelWidth: 50, 
                items: [new Ext.form.TextField({ fieldLabel: '密码' })]
               }),
               new Ext.form.FormPanel({
                title: '第三列', columnWidth: .34, labelWidth: 80, 
                items: [new Ext.form.TextField({ fieldLabel: '重复密码' })]
               })
        ],
        renderTo: 'ColumnLayout'
    });
    //边框布局 Panel
    var BorderLayout = new Ext.Panel({
        title:'BorderLayout',
        layout:'border', //这是设置布局的关键
        width:1100,
        height:300,
        items:[
              new Ext.Panel({ title: '上北', region: 'north',//设置面板的所在位置 东南西北中
               html: '可以放个logo什么的' }),
              new Ext.Panel({ title: '下南', region: 'south', html: '版权信息？', autoEl: 'center' }),
              new Ext.Panel({ title: '中间', region: 'center', html: '主面板' }),
              new Ext.Panel({ title: '左东', region: 'west', html: '树型菜单或是手风琴' }),
              new Ext.Panel({ title: '右西', region: 'east', html: '常用功能或是去掉？' })
        ],
        renderTo:'BorderLayout'
    });
    //可折叠布局 Panel(类似于文件目录)
    var AccordionLayout = new Ext.Panel({
        title:'AccordionLayout',
        layout:'accordion',
        height:200,
        items:[
               new Ext.Panel({ title: '用户管理', items: [new Ext.Component({ autoEl: { tag: 'div', html: '用户管理'} })] }),
               new Ext.Panel({ title: '角色管理', items: [new Ext.Component({ autoEl: { tag: 'div', html: '角色管理'} })] }),
               new Ext.Panel({ title: '系统管理', items: [new Ext.Component({ autoEl: { tag: 'div', html: '系统管理'} })] })
        ],
        renderTo:'AccordionLayout'
    });
    //强迫子组件填充满容器布局
    var FitLayout = new Ext.Panel({
        title:'FitLayout',
        height:100,
        renderTo:'FitLayout',
        layout:'fit',//使用fit后只显示了items的第一项
        items:[
               new Ext.Panel({ bodyStyle: 'background:red', html: '使用了fit布局,填充满' }),
            new Ext.Panel({ bodyStyle: 'background:yellow', html: '这个panel不会显示，因为是fit布局' })
        ]
    });
    var NoFitLayout = new Ext.Panel({
        title:'NoFitLayout',
        height:100,
        renderTo:'NoFitLayout',
        items:[
              new Ext.Panel({ bodyStyle: 'background:yellow', html: '未使用了fit布局,没有填充满' })
        ]
    });
    //表格布局，含有行与列的概念
    var TableLayout = new Ext.Panel({
        title:'TableLayout',
        layout:'table',
        layoutConfig:{columns:3},
        defaults:{
            width:133,
            height:100,
            autoEl:'center'
        },
        defaultType:'panel',
        items:[
            {html:'行1列1'},
            {html:'行1列2'},
            {html:'行[1,2]列3', rowspan: 2, height: 180},//跨两行rowspan
            {html: '行2列[1,2]', colspan: 2, width: 266 }//跨两列colspan
        ],
        renderTo:'TableLayout'
    });

});
</script>
    <div id="ContainerLayout" style="float: left; width: 300px">
        ContainerLayout：垂直方式放置
    </div>
    <div id="FormLayout" style="float: left; width: 240px; padding-left: 10px;">
    </div>
    <div id="ColumnLayout" style="float: left; width: 700px; padding-left: 10px;">
    </div>
    <div id="BorderLayout" style="padding: 10px 0px; clear: both">
    </div>
    <div id="AccordionLayout" style="width: 300px; float: left; height: 200px">
    </div>
    <div id="FitLayout" style="width: 300px; float: left; height: 200px; padding-left: 10px;">
    </div>
    <div id="NoFitLayout" style="width: 300px; float: left; height: 200px; padding-left: 10px;">
    </div>
    <div id="TableLayout" style="width: 700px; float: left; padding-left: 10px;">
    </div> 
</body>
</html>