Ext.js 布局

最新推荐文章于 2019-07-02 20:51:53 发布

转载最新推荐文章于 2019-07-02 20:51:53 发布 · 356 阅读

文章标签：

#前端框架 #extjs #布局

前端框架同时被 2 个专栏收录

24 篇文章

订阅专栏

extjs

18 篇文章

订阅专栏

本文深入探讨了ExtJS框架中各种布局的使用方法，包括绝对布局、手风琴布局、锚点布局、边框布局等，通过实例展示了每种布局的特点和应用场景。

布局是元素在容器中排列的方式。这可以是水平的，垂直的或任何其他。 Ext JS在其库中定义了不同的布局，但我们也可以编写自定义布局。

编号	布局和描述
1	Absolute 此布局允许使用容器中的XY坐标定位项目。
2	Accordion 此布局允许将所有项目以堆栈方式（一个在另一个之上）放在容器内。
3	Anchor 此布局为用户提供了相对于容器大小给出每个元素的大小的特权。
4	Border 在此布局中，各种面板嵌套并由边界分隔。
5	Auto 这是默认布局决定元素的布局，基于元素的数量。
6	Card(TabPanel) 此布局以制表符方式排列不同的组件。选项卡将显示在容器的顶部。每次只有一个选项卡可见，每个选项卡被视为不同的组件。
7	Card(Wizard) 在这个布局中，每次元素来到完整的容器空间。向导中将有一个底部工具栏用于导航。
8	Column 此布局是要在容器中显示多个列。我们可以定义列的固定宽度或百分比宽度。百分比宽度将基于容器的完整大小计算。
9	Fit 在此布局中，容器用单个面板填充，并且当没有与布局相关的特定要求时，则使用该布局。
10	Table 由于名称意味着此布局以HTML表格式在容器中排列组件。
11	vBox 这种布局允许元素以垂直方式分布。这是最常用的布局之一。
12	hBox 这种布局允许元素以水平方式分布。

1.Ext.js 绝对布局

描述

绝对：此布局允许使用容器中的XY坐标定位项目。

语法

这里是使用绝对布局的简单语法

 layout: 'absolute'

例

下面是一个简单的例子显示绝对布局的使用

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            layout: 'absolute' ,
            items: [{
               title: 'Panel 1',
               x: 50,
               y: 50,
               html: 'Positioned at x:50, y:50',
               width: 500,
               height: 100
            },{
               title: 'Panel 2',
               x: 100,
               y: 95,
               html: 'Positioned at x:100, y:95',
               width: 500,
               height: 100
            }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

这将产生以下结果

2.Ext.js 手风琴布局

描述

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

语法

这里是使用手风琴布局的简单语法：

 layout: 'accordion'

例

以下是一个简单的示例，显示了Accordion布局的用法

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

这将产生以下结果

Ext.js - 手风琴布局

3.Ext.js 锚点布局

描述

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

语法

这里是使用Anchor布局的简单语法：

 layout: 'anchor'

例

下面是一个简单的例子，显示了Anchor布局的用法

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.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'
            }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

4.Ext.js 边框布局

描述

边框：在此布局中，各种面板嵌套并由边框分隔。

语法

这里是使用边框布局的简单语法。

 layout: 'border'

例

下面是一个简单的例子显示了Border布局的用法

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            height: 300,
            width: 600,
            layout:'border',
            defaults: {
               collapsible: true,
               split: true,
               bodyStyle: 'padding:15px'
            },
            items: [{
               title: 'Panel1',
               region:'west',
               html: 'This is Panel 1'
            },{
               title: 'Panel2',
               region:'center',
               html: 'This is Panel 2'
            },{
               title: 'Panel3',
               region: 'south',
               html: 'This is Panel 3'
            },{
               title: 'Panel4',
               region: 'east',
               html: 'This is Panel 4'
            },{
               title: 'Panel5',
               region: 'north',
               html: 'This is Panel 5'
            }]
         });
      });
   </script>
</head>
<body>
</body>
</html>