Extjs学习笔记(9)-布局

绝对布局（absolute）
由(x, y)坐标确定位置

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function () {
          Ext.create('Ext.container.Container', { //注意第一个container第一个字母小写，第二个大写
            renderTo: Ext.getBody(),
            layout: 'absolute',
            items: [{
              title: 'Panel 1',
              x: 10,
              y: 10,
              html: 'Positioned at x:10, y: 10',
              width: 500,
              height: 100
            },{
              title: 'Panel 2',
              x: 30,
              y:100,
              html: 'Positioned at x:50, y: 100',
              width: 500,
              height: 100
            }]
          })
       });
      </script>
   </head>
   <body>
   </body>
</html>

运行结果：

手风琴布局（accordion）
这种布局允许将所有项目以堆叠方式（一个在另一个之上）放在容器内。

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function () {
          Ext.create('Ext.container.Container', { //注意第一个container第一个字母小写，第二个大写
            renderTo: Ext.getBody(),
            layout: 'accordion',
            width: 600,
            items: [{
              title: 'Panel 1',
              html: 'panel 1'
            },{
              title: 'Panel 2',
              html: 'Panel 2',
            },{
              title: 'Panel 3',
              html: 'Panel 3',
            },{
              title: 'Panel 4',
              html: 'Panel 4',
            },{
              title: 'Panel 5',
              html: 'Panel 5',
            }]
          })
       });
      </script>
   </head>
   <body>
   </body>
</html>

运行结果：

锚点布局（anchor）
此布局给予用户给出每个元素相对于容器大小的大小的特权。

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function () {
          Ext.create('Ext.container.Container', { //注意第一个container第一个字母小写，第二个大写
            renderTo: Ext.getBody(),
            layout: 'anchor',
            width: 600,
            items: [{
              title: 'Panel 1',
              html: 'panel 1',
              height: 100,
              anchor: '50%'
            },{
              title: 'Panel 2',
              html: 'Panel 2',
              height: 100,
              anchor: '100%'
            },{
              title: 'Panel 3',
              html: 'Panel 3',
              height: 100,
              anchor: '-100' //从底部开始定位
            },{
              title: 'Panel 4',
              html: 'Panel 4',
              anchor: '-70, 500' //500是最小宽度
            }]
          })//几个面板不会重叠
       });
      </script>
   </head>
   <body>
   </body>
</html>

运行结果：

边框布局
该布局包含多个字面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是east, south, west, north, center, 加入到容器中的子面板需要指定region配置项来告知容器需要加入到哪个部分，并且该布局还内建了对面板分割栏的支持。

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function () {
          Ext.create('Ext.panel.Panel', { 
            renderTo: Ext.getBody(),
            layout: 'border',
            width: 600,
            height: 300,
            default: {
              collapsible: true,//可折叠
              split: true, //可分割
              bodyStyle: 'padding: 15px' //内部样式
            },
            items: [{
              title: 'Panel 1',
              region: 'west',
              html: 'this is Panel 1'
            },{
              title: 'Panel 2',
              html: 'this is Panel 2',
              region: 'center'
            },{
              title: 'Panel 3',
              html: 'this is Panel 3',
              region: 'south'
            },{
              title: 'Panel 4',
              html: 'this is Panel 4',
              region: 'east'
            },{
              title: 'Panel 5',
              html: 'this is Panel 5',
              region: 'north'
            }]
          })//几个面板不会重叠
       });
      </script>
   </head>
   <body>
   </body>
</html>

运行结果：

自动布局（auto）
根据元素的数量自动布局

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function () {
          Ext.create('Ext.container.Container', { 
            renderTo: Ext.getBody(),
            layout: 'auto',
            width: 600,
            items: [{
              title: 'Panel 1',
              html: 'this is Panel 1'
            },{
              title: 'Panel 2',
              html: 'this is Panel 2',
            },{
              title: 'Panel 3',
              html: 'this is Panel 3',
            },{
              title: 'Panel 4',
              html: 'this is Panel 4',
            },{
              title: 'Panel 5',
              html: 'this is Panel 5',
            }]
          })
       });
      </script>
   </head>
   <body>
   </body>
</html>

运行结果：

card_wizard布局
这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。

<!DOCTYPE html>
<html>
<head>
    <link href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
    <script type="text/javascript">
    Ext.application({
      name: 'HelloExt',
      launch: function() {
        var navigate = function(panel, direction) {
          var layout = panel.getLayout()
          layout[direction]()
          Ext.getCmp('move-prev').setDisabled(!layout.getPrev())
          Ext.getCmp('move-next').setDisabled(!layout.getNext())
        }
        Ext.create('Ext.panel.Panel', {
          title: 'Card layout',
          width: 200,
          height: 202,
          layout: 'card',
          activeItem: 0,
          x: 30,
          y: 60,
          bodyStyle: 'padding: 15px',
          defaults: {border: false},
          bbar: [{
            id: 'move-prev',
            text: '上一步',
            handler: function(btn) {
              navigate(btn.up('panel'), 'prev')
            },
            disabled: true
          },
          '->',
          {
            id: 'move-next',
            text: '下一步',
            handler: function(btn) {
              navigate(btn.up('panel'), 'next')
            }
          }],
          items: [{
            id: 'card-0',
            html: '<h1>第一步</h1>'
          },{
            id: 'card-1',
            html: '<h1>第二步</h1>'
          },{
            id: 'card-2',
            html: '<h1>第三步</h1>'
          }],
          renderTo: Ext.getBody()
        })
      }
    })
  </script>
</head>
<body>
</body>
</html>

运行结果：

列布局（column）
此布局用于在容器中显示多个列。可以定义列的固定宽度或百分比宽度。百分比宽度将基于容器的完整大小计算。

<!DOCTYPE html>
<html>
<head>
    <link href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
    <script type="text/javascript">
      Ext.onReady(function() {
        Ext.create('Ext.panel.Panel', {
          renderTo: Ext.getBody(),
          layout: 'column',
          xtype: 'layout-column',//这行其实是多余的，因为layout属性已经指定了布局类型。xtype通常用于组件的实例化，但在这里它并不改变布局行为。
          requires: ['Ext.layout.container.Column'], //不影响布局，只是为了加载这个类
          width: 600,
          items: [{
            title: 'First Component width 30%',
            html: 'This is First Component',
            columnWidth: 0.30 //列宽比例
          },{
            title: 'Second Component width 40%',
            html: 'This is Second Component',
            columnWidth: 0.40
          },{
            title: 'Third Component width 30%',
            html: 'This is Third Component',
            columnWidth: 0.30
          }]
        })
      })
    
  </script>
</head>
<body>
</body>
</html>

运行结果：

自适应布局（fit）
在此布局中，容器用单个面板填充，当没有与布局相关的特定要求时，则使用此布局。

<!DOCTYPE html>
<html>
<head>
    <link href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
    <script type="text/javascript">
      Ext.onReady(function() {
        Ext.create('Ext.container.Container', {
          renderTo: Ext.getBody(),
          layout: 'fit',
          width: 600,
          default: {
            bodyPadding: 15
          },
          items: [{
            title: 'Panel 1',
            html: 'This is First Panel 1'
          },{
            title: 'Panel 2',
            html: 'This is Second Panel 2'
          },{
            title: 'Panel 3',
            html: 'This is Third Panel 3'
          }]
        })
      })
    
  </script>
</head>
<body>
</body>
</html>

运行结果：

表格布局（table）
以HTML表格式在容器中排列组件。

<!DOCTYPE html>
<html>
<head>
    <link href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
    <script type="text/javascript">
      Ext.onReady(function() {
        Ext.create('Ext.container.Container', {
          renderTo: Ext.getBody(),
          layout: {
            type: 'table',
            columns: 3,
            tableAttrs: {
              style: {
                width: '100%'
              }
            }
          },
          width: 600,
          height: 200,
          items: [{
            title: 'Panel 1',
            html: 'This is First Panel 1',
            colspan: 2
          },{
            title: 'Panel 2',
            html: 'This is Second Panel 2',
            rowspan: 2
          },{
            title: 'Panel 3',
            html: 'This is Third Panel 3'
          },{
            title: 'Panel 4',
            html: 'This is Third Panel 4'
          },{
            title: 'Panel 4',
            html: 'This is Third Panel 4'
          },{
            title: 'Panel 4',
            html: 'This is Third Panel 4'
          }]
        })
      })
    
  </script>
</head>
<body>
</body>
</html>

运行结果：

垂直布局（vbox）
此布局允许元素以垂直方式分布。这是最常用的布局之一。

<!DOCTYPE html>
<html>
<head>
    <link href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
    <script type="text/javascript">
      Ext.onReady(function() {
        Ext.create('Ext.panel.Panel', {
          renderTo: Ext.getBody(),
          layout: {
            type: 'vbox',
            align: 'stretch'
          },
          width: 600,
          height: 400,
          frame: true,//在面板周围添加一个装饰性的框架。
          items: [{
            title: 'Panel 1',
            html: 'Panel with flex 1',
            margin: '0 0 10 0',
            flex: 3 //flex属性决定了子元素如何根据容器的大小变化来分配额外空间。
          },{
            title: 'Panel 2',
            html: 'Panel with flex 2',
            margin: '0 0 10 0',
            flex: 1
          },{
            title: 'Panel 3',
            html: 'Panel with flex 3',
            margin: '0 0 10 0',
            flex: 2
          },{
            title: 'Panel 4',
            html: 'Panel with flex 4',
            margin: '0 0 10 0',
            flex: 1
          }]
        })
      })
    
  </script>
</head>
<body>
</body>
</html>

运行结果：

水平布局（hbox）
允许元素以水平方式分布。

<!DOCTYPE html>
<html>
<head>
    <link href="./ext-6.0.0-gpl/ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0-gpl/ext-6.0.0/build/ext-all.js"></script>
    <script type="text/javascript">
      Ext.onReady(function() {
        Ext.create('Ext.panel.Panel', {
          renderTo: Ext.getBody(),
          layout: {
            type: 'hbox',
          },
          width: 600,
          frame: true,//在面板周围添加一个装饰性的框架。
          items: [{
            title: 'Panel 1',
            html: 'Panel with flex 1',
            flex: 1 //flex属性决定了子元素如何根据容器的大小变化来分配额外空间。
          },{
            title: 'Panel 2',
            html: 'Panel with flex 2',
            flex: 2
          },{
            title: 'Panel 3',
            html: 'Panel with flex 3',
            width: 150
          },{
            title: 'Panel 4',
            html: 'Panel with flex 4',
            flex: 1
          }]
        })
      })
    
  </script>
</head>
<body>
</body>
</html>

运行结果：

Extjs学习笔记(9)-布局

零号

引用和评论

vue3报错：只能有一个根元素【已解决】

CSS团队协作规范

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

100个React最佳实践小技巧

CSS 现在终于支持高度 auto 过渡动画了

开发插件集合

Extjs学习笔记(9)-布局

零号

引用和评论

vue3报错： 只能有一个根元素 【已解决】

CSS团队协作规范

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

100个React最佳实践小技巧

CSS 现在终于支持高度 auto 过渡动画了

开发插件集合

vue3报错：只能有一个根元素【已解决】