ExtJS中layout的12种布局风格

来源：互联网发布：mac air摄像头打不开编辑：程序博客网时间：2024/05/22 14:06

· absolute 顾名思义，在容器内部，根据指定的坐标定位显示

layout: 'absolute',items:[{    title: 'Panel 1',    x: 50,    y: 50,    html: 'Positioned at x:50, y:50'}]

· accordion 这个是最容易记的，手风琴效果

<!DOCTYPE html><html>  <head>    <title>hello-extjs</title>        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <!-- 引入extjs样式文件 -->    <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />    <!-- 引入extjs库文件，底层驱动 -->    <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>    <!-- 引入extjs-all -->    <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>    <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->    <script type="text/javascript">        Ext.onReady(function(){              var panel=new Ext.Panel(//Ext.formPanel 就是Panel中用了form布局                    {                     renderTo:'paneldiv',                     title:'容器组件',                     layout:'accordion',                            width:500,                     height:200,                     layoutConfig:{animate:false},                     items:[                      {title:'元素1',html:''},                      {title:'元素2',html:''},                      {title:'元素3',html:''},                      {title:'元素4',html:''}                     ]                    }                   );              });      </script>  </head>    <body>    This is my HTML page. <br>     <div id="paneldiv"></div>  </body></html>

· anchor 这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，

2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值

<!DOCTYPE html><html>  <head>    <title>hello-extjs</title>        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <!-- 引入extjs样式文件 -->    <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />    <!-- 引入extjs库文件，底层驱动 -->    <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>    <!-- 引入extjs-all -->    <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>    <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->    <script type="text/javascript">        Ext.onReady(function() {           var panel1 = new Ext.Panel({                title: "panel1",               height: 100,               anchor: '-50',                html: "高度等于100，宽度=容器宽度-50"            });        var panel2 = new Ext.Panel({             title: "panel2",             height: 100,             anchor: '50%',                html: "高度等于100,宽度=容器宽度的50%"           });              var panel3 = new Ext.Panel({               title: "panel3",               anchor: '-10, -250',               html: "宽度=容器宽度-10,高度=容器宽度-250"           });                var win = new Ext.Window({                title: "Anchor Layout",                height: 400,              width: 400,                plain: true,                                    layout: 'anchor',                items: [panel1, panel2,panel3]                        });            win.show();                });     </script>  </head>    <body>    This is my HTML page. <br>     <div id="paneldiv"></div>  </body></html>

· border 将容器分为五个区域:east东(右),south南(下),west西(左),north北(上),center中

layout:'border',defaults: {    collapsible: true,    split: true,    bodyStyle: 'padding:15px'},items: [{    title: 'Footer',    region: 'south',    height: 150,    minSize: 75,    maxSize: 250,    cmargins: '5 0 0 0'},{    title: 'Navigation',    region:'west',    margins: '5 0 0 0',    cmargins: '5 5 0 0',    width: 175,    minSize: 100,    maxSize: 250},{    title: 'Main Content',    collapsible: false,    region:'center',    margins: '5 0 0 0'}]

· card (TabPanel)

<!DOCTYPE html><html>  <head>    <title>hello-extjs</title>        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <!-- 引入extjs样式文件 -->    <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />    <!-- 引入extjs库文件，底层驱动 -->    <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>    <!-- 引入extjs-all -->    <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>    <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->    <script type="text/javascript">        Ext.onReady(function() {                var button = Ext.get('show-btn');           var win;         button.on('click', function() {               //创建TabPanel               var tabs = new Ext.TabPanel({                    region: 'center', //border 布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间                    margins: '3 3 3 0',                    activeTab: 0,                    defaults: {                       autoScroll: true                    },                   items: [{                        title: 'Bogus Tab',                        html: "第一个Tab的内容."                    }, {                        title: 'Another Tab',                        html: "我是另一个Tab"                    }, {                        title: 'Closable Tab',                        html: "这是一个可以关闭的Tab",                        closable: true                       }]               });                       //定义一个Panel                   var nav = new Ext.Panel({                       title: 'Navigation',                        region: 'west', //放在西边，即左侧                        split: true,                        width: 200,                        collapsible: true, //允许伸缩                        margins: '3 0 3 3',                        cmargins: '3 3 3 3'                    });                        //如果窗口第一次被打开时才创建                    if (!win) {                        win = new Ext.Window({                            title: 'Layout Window',                            closable: true,                            width: 600,                            height: 350,                            border : false,                            plain: true,                            layout: 'border',                            closeAction:'hide',                            items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局                        });                    }                    win.show(button);            });           });      </script>  </head>    <body>    This is my HTML page. <br>     <button id="show-btn">button</button>  </body></html>

· card (Wizard)

您可以使用一张卡片布局来创建您自己的自定义向导式界面。布局是一个标准的CardLayout底部工具栏,和开发人员必须提供导航功能,实现了向导的业务逻辑(参见代码基础。js)。

layout:'card',activeItem: 0, // index or idbbar: ['->', {    id: 'card-prev',    text: '&laquo; Previous'},{    id: 'card-next',    text: 'Next &raquo;'}],items: [{    id: 'card-0',    html: 'Step 1'},{    id: 'card-1',    html: 'Step 2'},{    id: 'card-2',    html: 'Step 3'}]

· column 把整个容器看成一列,然后向容器放入子元素时

layout:'column',items: [{    title: 'Width = 25%',    columnWidth: .25,    html: 'Content'},{    title: 'Width = 75%',    columnWidth: .75,    html: 'Content'},{    title: 'Width = 250px',    width: 250,    html: 'Content'}]

· fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

layout:'fit',items: {    title: 'Fit Panel',    html: 'Content',    border: false}

· form 是一种专门用于管理表单中输入字段的布局

<!DOCTYPE html><html>  <head>    <title>hello-extjs</title>        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <!-- 引入extjs样式文件 -->    <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />    <!-- 引入extjs库文件，底层驱动 -->    <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>    <!-- 引入extjs-all -->    <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>    <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->    <script type="text/javascript">        Ext.onReady(function() {              var win = new Ext.Window({                 title: "form Layout",                height: 150,                width: 230,                 plain: true,                 bodyStyle: 'padding:15px',                 items:                  {                     xtype: "form",                    labelWidth: 30,                    defaultType: "textfield",                     frame:true,                    items:                     [                        {                             fieldLabel:"姓名",                            name:"username",                            allowBlank:false                         },                        {                             fieldLabel:"呢称",                            name:"nickname"                         },                        {                             fieldLabel: "生日",                            xtype:'datefield',                            name: "birthday",                             width:127                         }                    ]                }            });            win.show();         });       </script>  </head>    <body>    This is my HTML page. <br>  </body></html>

· table 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

<!DOCTYPE html><html>  <head>    <title>hello-extjs</title>        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <!-- 引入extjs样式文件 -->    <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />    <!-- 引入extjs库文件，底层驱动 -->    <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>    <!-- 引入extjs-all -->    <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>    <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->    <script type="text/javascript">        Ext.onReady(function(){                    var panel=new Ext.Panel(                     {                      renderTo:'paneldiv',                      title:'容器组件',                      layout:'table',                             width:500,                      height:200,                      layoutConfig:{columns:3},//将父容器分成3列                      items:[                       {title:'元素1',html:'ssssssssss',rowspan:2,height:100},                      {title:'元素2',html:'dfffsddsdfsdf',colspan:2},                       {title:'元素3',html:'sdfsdfsdf'},                       {title:'元素4',html:''}                         ]                     });               });     </script>  </head>    <body>    This is my HTML page. <br>    <div id="paneldiv"><div>  </body></html>

VBox

布局,允许子元素的垂直和水平拉伸,就像集装箱布局与规模管理。

layout: {    type: 'vbox'    align : 'stretch',    pack  : 'start',},items: [    {html:'panel 1', flex:1},    {html:'panel 2', height:150},    {html:'panel 3', flex:2}]

HBox

布局,允许子元素的垂直和水平拉伸,就像列布局,但垂直延伸项目。

layout: {    type: 'hbox',    pack: 'start',    align: 'stretch'},items: [    {html:'panel 1', flex:1},    {html:'panel 2', width:150},    {html:'panel 3', flex:2}]

0 0