总览

extjs的容器组件都可以设置它的显示风格，它的有效值有 1. absolute,2. accordion, 3. anchor, 4. border, 5. card, 6. column, 7. fit,8.  form 9.table.  一共9种。

另外几种见：  http://www.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html  里面有详细的例子。

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

This is a simple layout style that allows you to position items within a container using CSS-style absolute positioning via XY coordinates.

Sample Config:

  1. layout: 'absolute',
  2. items:[{
  3.     title: 'Panel 1',
  4.     x: 50,
  5.     y: 50,
  6.     html: 'Positioned at x:50, y:50'
  7. }]

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

Displays one panel at a time in a stacked layout. No special config properties are required other than the layout — all panels added to the container will be converted to accordion panels.

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>hello-extjs</title>
  5.  
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.  
  10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11.     <!-- 引入extjs样式文件 -->
  12.     <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
  13.     <!-- 引入extjs库文件，底层驱动 -->
  14.     <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
  15.     <!-- 引入extjs-all -->
  16.     <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
  17.     <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
  18.     <script type="text/javascript">
  19.         Ext.onReady(function(){
  20.             var panel=new Ext.Panel(//Ext.formPanel 就是Panel中用了form布局
  21.                   {
  22.                    renderTo:'paneldiv',
  23.                    title:'容器组件',
  24.                    layout:'accordion',
  25.                    width:500,
  26.                    height:200,
  27.                    layoutConfig:{animate:false},
  28.                    items:[
  29.                     {title:'元素1',html:''},
  30.                     {title:'元素2',html:''},
  31.                     {title:'元素3',html:''},
  32.                     {title:'元素4',html:''}
  33.                    ]
  34.                   }
  35.                  );
  36.             });
  37.     </script>
  38.   </head>
  39.  
  40.   <body>
  41.     This is my HTML page. <br>
  42.      <div id="paneldiv"></div>
  43.   </body>
  44. </html>

3. anchor 这个效果具体还不知道有什么用，就是知道注意一下

1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，

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

Provides anchoring of contained items to the container's edges. This type of layout is most commonly seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the container without hard-coding their dimensions.

In this example, panels are anchored for example purposes so that you can easily see the effect. If you resize the browser window, the anchored panels will automatically resize to maintain the same relative dimensions.

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>hello-extjs</title>
  5.  
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.  
  10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11.     <!-- 引入extjs样式文件 -->
  12.     <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
  13.     <!-- 引入extjs库文件，底层驱动 -->
  14.     <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
  15.     <!-- 引入extjs-all -->
  16.     <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
  17.     <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
  18.     <script type="text/javascript">
  19.         Ext.onReady(function() {
  20.         var panel1 = new Ext.Panel({
  21.              title: "panel1",
  22.              height: 100,
  23.             anchor: '-50',
  24.             html: "高度等于100，宽度=容器宽度-50"
  25.         });
  26.         var panel2 = new Ext.Panel({
  27.              title: "panel2",
  28.              height: 100,
  29.              anchor: '50%',
  30.              html: "高度等于100,宽度=容器宽度的50%"
  31.         });
  32.         var panel3 = new Ext.Panel({
  33.             title: "panel3",
  34.             anchor: '-10, -250',
  35.             html: "宽度=容器宽度-10,高度=容器宽度-250"
  36.         });
  37.          var win = new Ext.Window({
  38.              title: "Anchor Layout",
  39.              height: 400,
  40.              width: 400,
  41.              plain: true,
  42.              layout: 'anchor',
  43.              items: [panel1, panel2,panel3]
  44.          });
  45.          win.show();
  46.              });
  47.     </script>
  48.   </head>
  49.  
  50.   <body>
  51.     This is my HTML page. <br>
  52.      <div id="paneldiv"></div>
  53.   </body>
  54. </html>

4. border 将容器分为五个区域:east,south,west,north,center

This Layout Browser page is already a border layout, and this example shows a separate border layout nested within a region of the page's border layout. Border layouts can be nested with just about any level of complexity that you might need.

Every border layout must at least have a center region. All other regions are optional.

Sample Config:

  1. layout:'border',
  2. defaults: {
  3.     collapsible: true,
  4.     split: true,
  5.     bodyStyle: 'padding:15px'
  6. },
  7. items: [{
  8.     title: 'Footer',
  9.     region: 'south',
  10.     height: 150,
  11.     minSize: 75,
  12.     maxSize: 250,
  13.     cmargins: '5 0 0 0'
  14. },{
  15.     title: 'Navigation',
  16.     region:'west',
  17.     margins: '5 0 0 0',
  18.     cmargins: '5 5 0 0',
  19.     width: 175,
  20.     minSize: 100,
  21.     maxSize: 250
  22. },{
  23.     title: 'Main Content',
  24.     collapsible: false,
  25.     region:'center',
  26.     margins: '5 0 0 0'
  27. }]

5. card (TabPanel)

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>hello-extjs</title>
  5.  
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.  
  10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11.     <!-- 引入extjs样式文件 -->
  12.     <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
  13.     <!-- 引入extjs库文件，底层驱动 -->
  14.     <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
  15.     <!-- 引入extjs-all -->
  16.     <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
  17.     <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
  18.     <script type="text/javascript">
  19.         Ext.onReady(function() {
  20.         var button = Ext.get('show-btn');
  21.         var win;
  22.          button.on('click', function() {
  23.             //创建TabPanel
  24.             var tabs = new Ext.TabPanel({
  25.                  region: 'center', //border 布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
  26.                  margins: '3 3 3 0',
  27.                  activeTab: 0,
  28.                  defaults: {
  29.                     autoScroll: true
  30.                  },
  31.                  items: [{
  32.                      title: 'Bogus Tab',
  33.                      html: "第一个Tab的内容."
  34.                  }, {
  35.                      title: 'Another Tab',
  36.                      html: "我是另一个Tab"
  37.                  }, {
  38.                      title: 'Closable Tab',
  39.                      html: "这是一个可以关闭的Tab",
  40.                      closable: true
  41.                     }]
  42.             });   
  43.  
  44.                  //定义一个Panel
  45.                 var nav = new Ext.Panel({
  46.                     title: 'Navigation',
  47.                      region: 'west', //放在西边，即左侧
  48.                      split: true,
  49.                      width: 200,
  50.                      collapsible: true, //允许伸缩
  51.                      margins: '3 0 3 3',
  52.                      cmargins: '3 3 3 3'
  53.                  });   
  54.  
  55.                  //如果窗口第一次被打开时才创建
  56.                  if (!win) {
  57.                      win = new Ext.Window({
  58.                          title: 'Layout Window',
  59.                          closable: true,
  60.                          width: 600,
  61.                          height: 350,
  62.                          border : false,
  63.                          plain: true,
  64.                          layout: 'border',
  65.                          closeAction:'hide',
  66.                          items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
  67.                      });
  68.                  }
  69.                  win.show(button);
  70.          });
  71.         });
  72.     </script>
  73.   </head>
  74.  
  75.   <body>
  76.     This is my HTML page. <br>
  77.      <button id="show-btn">button</button>
  78.   </body>
  79. </html>

· card (Wizard)

You can use a Card layout to create your own custom wizard-style screen. The layout is a standard CardLayout with a Toolbar at the bottom, and the developer must supply the navigation function that implements the wizard's business logic (see the code in basic.js for details).

Sample Config:

  1. layout:'card',
  2. activeItem: 0, // index or id
  3. bbar: ['->', {
  4.     id: 'card-prev',
  5.     text: '&laquo; Previous'
  6. },{
  7.     id: 'card-next',
  8.     text: 'Next &raquo;'
  9. }],
  10. items: [{
  11.     id: 'card-0',
  12.     html: 'Step 1'
  13. },{
  14.     id: 'card-1',
  15.     html: 'Step 2'
  16. },{
  17.     id: 'card-2',
  18.     html: 'Step 3'
  19. }]

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

This is a useful layout style when you need multiple columns that can have varying content height. Any fixed-width column widths are calculated first, then any percentage-width columns specified using the columnWidth config will be calculated based on remaining container width. Percentages should add up to 1 (100%) in order to fill the container.

Sample Config:

  1. layout:'column',
  2. items: [{
  3.     title: 'Width = 25%',
  4.     columnWidth: .25,
  5.     html: 'Content'
  6. },{
  7.     title: 'Width = 75%',
  8.     columnWidth: .75,
  9.     html: 'Content'
  10. },{
  11.     title: 'Width = 250px',
  12.     width: 250,
  13.     html: 'Content'
  14. }]

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

A very simple layout that simply fills the container with a single panel. This is usually the best default layout choice when you have no other specific layout requirements.

Sample Config:

  1. layout:'fit',
  2. items: {
  3.     title: 'Fit Panel',
  4.     html: 'Content',
  5.     border: false
  6. }

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>hello-extjs</title>
  5.  
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.  
  10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11.     <!-- 引入extjs样式文件 -->
  12.     <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
  13.     <!-- 引入extjs库文件，底层驱动 -->
  14.     <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
  15.     <!-- 引入extjs-all -->
  16.     <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
  17.     <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
  18.     <script type="text/javascript">
  19.         Ext.onReady(function() {
  20.           var win = new Ext.Window({
  21.               title: "form Layout",
  22.              height: 150,
  23.              width: 230,
  24.               plain: true,
  25.              bodyStyle: 'padding:15px',
  26.              items:
  27.               {
  28.                  xtype: "form",
  29.                  labelWidth: 30,
  30.                  defaultType: "textfield",
  31.                  frame:true,
  32.                  items:
  33.                  [
  34.                      {
  35.                          fieldLabel:"姓名",
  36.                          name:"username",
  37.                          allowBlank:false
  38.                      },
  39.                      {
  40.                          fieldLabel:"呢称",
  41.                          name:"nickname"
  42.                      },
  43.                      {
  44.                          fieldLabel: "生日",
  45.                          xtype:'datefield',
  46.                          name: "birthday",
  47.                          width:127
  48.                      }
  49.                  ]
  50.              }
  51.          });
  52.          win.show();
  53.      });
  54.     </script>
  55.   </head>
  56.  
  57.   <body>
  58.     This is my HTML page. <br>
  59.   </body>
  60. </html>

9.table 按照普通表格的方法布局子元素

用layoutConfig:{columns:3},//将父容器分成3列

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>hello-extjs</title>
  5.  
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.  
  10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11.     <!-- 引入extjs样式文件 -->
  12.     <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
  13.     <!-- 引入extjs库文件，底层驱动 -->
  14.     <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
  15.     <!-- 引入extjs-all -->
  16.     <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
  17.     <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
  18.     <script type="text/javascript">
  19.         Ext.onReady(function(){
  20.                 var panel=new Ext.Panel(
  21.                   {
  22.                    renderTo:'paneldiv',
  23.                    title:'容器组件',
  24.                    layout:'table',
  25.                    width:500,
  26.                    height:200,
  27.                    layoutConfig:{columns:3},//将父容器分成3列
  28.                    items:[
  29.                     {title:'元素1',html:'ssssssssss',rowspan:2,height:100},
  30.                    {title:'元素2',html:'dfffsddsdfsdf',colspan:2},
  31.                     {title:'元素3',html:'sdfsdfsdf'},
  32.                     {title:'元素4',html:''}
  33.                       ]
  34.                   });
  35.             });
  36.     </script>
  37.   </head>
  38.  
  39.   <body>
  40.     This is my HTML page. <br>
  41.     <div id="paneldiv"><div>
  42.   </body>
  43. </html>

VBox

A layout that allows for the vertical and horizontal stretching of child items, much like the container layout with size management.

Sample Config:

  1. layout: {
  2.     type: 'vbox'
  3.     align : 'stretch',
  4.     pack  : 'start',
  5. },
  6. items: [
  7.     {html:'panel 1', flex:1},
  8.     {html:'panel 2', height:150},
  9.     {html:'panel 3', flex:2}
  10. ]

HBox

A layout that allows for the vertical and horizontal stretching of child items, much like the column layout but can stretch items vertically.

Sample Config:

  1. layout: {
  2.     type: 'hbox',
  3.     pack: 'start',
  4.     align: 'stretch'
  5. },
  6. items: [
  7.     {html:'panel 1', flex:1},
  8.     {html:'panel 2', width:150},
  9.     {html:'panel 3', flex:2}
  10. ]

转自：https://www.cnblogs.com/mingforyou

ExtJS中layout的12种布局风格的更多相关文章

  1. 【转载】Python编程中常用的12种基础知识总结

    Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时间对象操作,命令行参数解析(getopt),print 格式化输出,进 ...

  2. Python编程中常用的12种基础知识总结

    原地址:http://blog.jobbole.com/48541/ Python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序.去重,字典排序,字典.列表.字符串互转,时 ...

  3. JavaScript 中的常用12种循环遍历（数组或对象）的方法

    1.for 循环 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 ...

  4. Android 常用UI控件之TabHost(1)TabHost的两种布局方式

    TabHost是Android中的tab组件. TabHost布局文件的基本结构 TabHost下有个layout,这个layout中有TabWidget与FrameLayout.TabWidget是 ...

  5. android五种布局模式

    Android布局是应用界面开发的重要一环,在Android中,共有五种布局方式,分别是:LinearLayout (线性布局),FrameLayout(框架布局),AbsoluteLayout(绝对 ...

  6. Android学习笔记_3_四种布局

    Android布局是应用界面开发的重要一环,在Android中,共有四种布局方式, 分别是:FrameLayout( 帧布局 ).LinearLayout (线性布局).TableLayout(表格布 ...

  7. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  8. html5中的几种布局简单比较

    html中的布局主要由静态布局.自适应布局.流式布局以及响应式布局几类,简单比较以下这几种布局的区别和特点. 一 静态布局(Static Layout) 表现:在传统web设计中,不管浏览器尺寸具体大 ...

  9. JavaScript 中的12种循环遍历方法

    原文:JavaScript 中的12种循环遍历方法 题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];f ...

随机推荐

  1. 逆向实战干货,植物大战僵尸快速定位自动捡阳光Call,或者标志

    逆向实战干货,快速定位自动捡阳光Call,或者标志 注意: 关于CE和OD的使用,这里不再多说,快速定位,默认大家已经有了CE基础,或者OD基础. 第一种方法,找Call 第一步,打开CE,搜索阳光值 ...

  2. python bytes和bytearray、编码和解码

    str.bytes和bytearray简介 str是字符数据,bytes和bytearray是字节数据.它们都是序列,可以进行迭代遍历.str和bytes是不可变序列,bytearray是可变序列,可 ...

  3. 完美实现 Windows 下网络通信

    编译环境:DEV C++ 配置编译器 Windows 下 实现 Socket 编译需要 ws2_32.lib 这个库的支撑,所以我们编译前应该配置下编译器,具体配置步骤如下: Tools -> ...

  4. [转]win10中安装JDK8以及环境配置

    本文转自:https://blog.csdn.net/yangsummer2426/article/details/80499775 1.      首先下载jdk,网址如下: http://www. ...

  5. 第一册：lesson twenty seven。

    原文 :Mrs.smith's living room. Mrs.smith's living room is large. There is a television in the room. Th ...

  6. 【转载】C#将图片以二进制流的方式存入数据库

    在C#开发应用程序的过程中,图片一般会存放在文件系统中,当然图片也可以二进制的方式存放到数据库中,不过一般不建议存放在数据库中,因为图片占用的空间还是挺大的,特殊情况下可以考虑将图片存在数据.此文将介 ...

  7. .Net NPOI 根据excel模板导出excel、直接生成excel

    一.根据Excel模板导出excel 1.导入NPOI.dll  2.DAL中添加类ExportExcel.cs using NPOI.SS.UserModel; using System; usin ...

  8. 开发谷歌浏览器插件会上瘾，搞了一个JSONViewer，一个页面格式化多条JSON，提升工作效率

    最近写了一个谷歌浏览器插件(Chrome extension),拿出来分享下,希望能提升大家的工作效率. 一.背景 先说痛点:日常开发中,经常需要不停的把接口输出的JSON拷贝到在线JSON格式化页面 ...

  9. 从零开始学安全(三)●黑客常用的windows端口

    端口可选1-65536 1-1024 预保留端口 留给windows系统服务的 下面是常见的端口对应的服务 1 TCP Port Service Multiplexer 传输控制协议端口服务多路开关选 ...

  10. json字符串和json对象的相互转化

    开发经常要用到json字符串和json对象的相互转化,这里总结常用的两个函数.JSON.parse('字符串'),JSON.stringify('json对象') <script type=&q ...