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（右）
        }]
    });
});

页面效果：

image

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()
   });
});

页面效果：

image

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()
     });
});

页面效果：

image

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>"
        }]
    }); 
});

页面效果：

image

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()
      });
});

页面效果：

image

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()
     });
});

页面效果：

image

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()
      });
});

页面效果：

image

posted @ 2016-03-28 22:23  无羁之风  阅读(1918)  评论(0)  编辑  收藏  举报