ExtJs4.2——布局

1、border布局

border布局是当前项目实现中经常使用到的一种布局形式。这种布局将整个页面划分为五个部分，分别是上（north）、下（south）、左（west）、右（east）、中（center）。通过region这个属性指定特定组件显示在页面中的特定位置，并可以指定待显示组件的宽度或高度。当然，宽度和高度的设置对于center中的组件是无效的，因为center中的组件默认布局为fit。

对于border布局来说，上、下、左、右这四个部分的显示内容不是必须存在的，但是一个border布局中center部分必不可少。

例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/**
* 1、border布局：
* border布局是当前项目实现中经常使用到的一种布局形式。
* 这种布局将整个页面划分为五个部分，分别是上（north）、下（south）、左（west）、右（east）、中（center）。
* 通过region这个属性指定特定组件显示在页面中的特定位置，并可以指定待显示组件的宽度或高度。
* 宽度和高度的设置对于center中的组件是无效的，因为center中的组件默认布局为fit。
*
* Viewport:
* 1.Viewport渲染自身到网页的documet body区域，并自动将自己调整到适合浏览器窗口的大小，
* 在窗口大小发生改变时自动适应大小。一个页面中只能创建一个Viewport。
* 2.任何的Container容器都可以作为一个Viewport 的子组件，
* 开发者使用一个Viewport作为父容器配置布局layout，并管理他们的大小和位置。
* 3.Viewports一般使用border layout布局, 如果开发者需要的布局很简单,可以指定一个简单布局。
*
*/
Ext.onReady( function(){
     var panel= new Ext.Viewport({
        layout: "border",   //边界布局
        items:[{
             title: "north panel",
             html: "<div style='height:150px'>上面</div>",
             collapsible : true,
             region: "north" //指定子面板所在区域在north（上）
        },{
             title: "south panel",
             html: "<div style='height:150px'>下面</div>",
             collapsible : true,
             region: "south" //指定子面板所在区域在south（下）
        },{
             title: "west panel",
             html: "<div style='width:150px'>左面</div>",
             collapsible : true,
             region: "west" //指定子面板所在区域在west（左）
        },{
             title: "center panel",
             html: "中间",
             region: "center" //指定子面板所在区域在center（中）
        },{
             title: "east panel",
             html: "<div style='width:150px'>右面</div>",
             collapsible : true,
             region: "east" //指定子面板所在区域在east（右）
        }]
    });
});

页面效果：

2、fit布局

fit布局是一种较为常见的布局方式，使用fit布局方式进行布局时，子面板会100%充满父面板。如果父面板中同时加载了多个子面板，则只会显示第一个加载的子面板。

例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/**
* 2、fit布局
* fit布局是一种较为常见的布局方式，使用fit布局方式进行布局时，子面板会100%充满父面板。
* 如果父面板中同时加载了多个子面板，则只会显示第一个加载的子面板。
*/
Ext.onReady( function(){
    Ext.create( 'Ext.panel.Panel', {
    title: 'Fit Layout',
    width: 300,
    height: 150,
    layout: 'fit',
    items: {
        title: 'Inner Panel',
        html: 'This is the inner panel content',
        bodyPadding: 20,
        border: false
    },
    renderTo: Ext.getBody()
   });
});

页面效果：

3、vbox布局

vbox布局把呈现在这种布局面板中的子元素按照纵向排成一列，可以根据需要设置纵向排列的样式。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/**
* vbox布局
* vbox布局把呈现在这种布局面板中的子元素按照纵向排成一列，可以根据需要设置纵向排列的样式。
*/
Ext.onReady( function(){
     Ext.create( "Ext.Panel",{
         title: "容器面板",
         width: 400,
         height: 500,
         layout:{
             type: "vbox",
             pack: "center",    //控制子组件如何被打包在一起，start：左边（默认）；center：居中；end：右边
             align: "center"    //对齐方式 center、left、right：居中、左对齐、右对齐；stretch：延伸；stretchmax：以最大的元素为标准延伸
         },
         items:[{
            xtype: "button",
            text: "小按钮",
            flex: 1,
            width: 150
         },{
            xtype: "tbspacer",   //插入的空填充
            flex: 3        //表示当前子元素尺寸所占的均分的份数
         },{
            xtype: "button",
            text: "中按钮",
            width: 250
         },{
            xtype: "button",
            text: "大按钮",
            flex: 1,
            width: 350
         }],
         renderTo:Ext.getBody()
     });
});

页面效果：

4、hbox布局

hbox布局与vbox布局类似，把呈现在这种布局面板中的子元素按照横向排成一行，可以根据需要设置纵向排列的样式。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

/**
*hbox布局
*hbox布局与vbox布局类似，把呈现在这种布局面板中的子元素按照横向排成一行，可以根据需要设置纵向排列的样式。
*/
Ext.onReady( function(){
    Ext.create( "Ext.Panel",{
        title: "容器面板",
        height: 500,
        width: 800,
        renderTo:Ext.getBody(),
        layout:{
           type: "hbox",
            /*
            * algin:控制子组件在容器中的对齐方式
            * top : 默认值各子组件在容器顶部水平对齐.
            * middle : 各子组件在容器中间水平对齐.
            * stretch : 各子组件的高度拉伸至与容器的高度相等.
            * stretchmax : 各子组件的高度拉伸至与最高的子组件的高度相等.
            */
           align: "top",
             /*
            * pack:控制子组件如何被打包在一起
            * start - 子组件被包在一起放在容器的左边 (默认)
            * center - 子组件被包在一起放在容器里居中
            * end - 子组件被包在一起放在容器的右边
            */
           pack: "center"
        },
        items:[{
           type: "panel",
           title: "panel1",
           width: 150,
           height: 200
        },{
           type: "panel",
           title: "panel2",
           width: 150,
           height: 300
        },{
           type: "panel",
           title: "panel3",
           width: 150,
           height: 400
        },{
           type: "panel",
           title: "panel4",
           width: 150,
           height: 500,
           html: "<h3>Panel4 Content</h3>"
        }]
    });
});

页面效果：

5、table布局

table表格布局允许开发人员像绘制表格一样去绘制展示的页面，可以根据需要自由地设置页面的列和行，从而使页面展示的子元素有序的组织在一起，常用的属性有rowspan和colspan。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

/**
* table布局
* table表格布局允许开发人员像绘制表格一样去绘制展示的页面，可以根据需要自由地设置页面的列和行，
* 从而使页面展示的子元素有序的组织在一起，常用的属性有rowspan(跨行)和colspan(跨列)。
*/
Ext.onReady( function(){
      Ext.create( "Ext.Panel",{
          title: "table布局",
          width: 500,
          height: 400,
          layout:{
             type: "table",
             columns: 4
          },
          frame: true,     //渲染面板
          defaults : { //设置默认属性
              bodyStyle: 'background-color:#FFFFFF;', //设置面板体的背景色
              frame : true
          },
          items:[{
             title: "子面板一",
             width: 300,
             height: 100,
             colspan: 3 //设置跨列
          },{
             title: "子面板二",
             height: 200,
             width: 100,
             rowspan: 2 //设置跨行
          },{
             width: 100,
             height: 100,
             title: "子面板三"

          },{
             width: 100,
             height: 100,
             title: "子面板四"
          },{
             width: 100,
             height: 100,
             title: "子面板五"
          }],
          renderTo:Ext.getBody()
      });
});

页面效果：

6、accordion 布局

Accordion布局称为折叠布局，又被称为手风琴式的布局，点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板。打开页面时，默认会打开第一个面板。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**
* Accordion布局
* Accordion布局称为折叠布局，又被称为手风琴式的布局，点击每一个子元素的头部名称或右边的按钮，
* 则会展开该面板，并收缩其它已经展开的面板。打开页面时，默认会打开第一个面板。
*/
Ext.onReady( function(){
     Ext.create( "Ext.Panel",{
         width: 400,
         height: 500,
         title: "Accordion布局示例",
         frame: true,
         layout:{
             type: "accordion",
             fill: true   //子面板充满父面板空间
         },
         items:[{
             title: "子面板一"
         },{
             title: "子面板二"
         },{
             title: "子面板三"
         }],
         renderTo:Ext.getBody()
     });
});

页面效果：

7、card布局

card卡片布局允许在一个页面中实现多个子页面内容的展示，tabPanel面板默认的布局方式即为卡片布局。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/**
* card布局
* card卡片布局允许在一个页面中实现多个子页面内容的展示
*/
Ext.onReady( function(){
      var panel= new Ext.Panel({
          title: "card布局示例",
          width: 600,
          height: 500,
          layout: "card",
          activeItem: 0,   //默认显示第一个子面板
          frame: true,
          items:[{
             title: "子面板一",
             html: "<h3>子面板一 Content</h3>"
          },{
             title: "子面板二",
             html: "<h3>子面板二 Content</h3>"
          }],
          buttons:[{
             text: "显示子面板一",
             handler: function(){
                       panel.layout.setActiveItem( 0);
             }
          },{
             text: "显示子面板二",
             handler: function(){
                       panel.layout.setActiveItem( 1);
             }
          }],
          renderTo:Ext.getBody()
      });
});

页面效果：

1、border布局

2、fit布局

3、vbox布局

4、hbox布局

5、table布局

6、accordion 布局

7、card布局

猜你喜欢