ExtJs4.2——佈局

時間 2019-11-17

標籤 extjs4.2 extjs 佈局简体版

原文原文鏈接

一、border佈局

border佈局是當前項目實現中常常使用到的一種佈局形式。這種佈局將整個頁面劃分爲五個部分，分別是上（north）、下（south）、左（west）、右（east）、中（center）。經過region這個屬性指定特定組件顯示在頁面中的特定位置，並能夠指定待顯示組件的寬度或高度。固然，寬度和高度的設置對於center中的組件是無效的，由於center中的組件默認佈局爲fit。html

對於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

/**
* 一、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（右）
        }]
    });
});

頁面效果：flex

二、fit佈局

fit佈局是一種較爲常見的佈局方式，使用fit佈局方式進行佈局時，子面板會100%充滿父面板。若是父面板中同時加載了多個子面板，則只會顯示第一個加載的子面板。spa

例：.net

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

/**
* 二、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()
   });
});

頁面效果：3d

三、vbox佈局

vbox佈局把呈如今這種佈局面板中的子元素按照縱向排成一列，能夠根據須要設置縱向排列的樣式。orm

示例：htm

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

頁面效果：blog

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

頁面效果：

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

頁面效果：

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

頁面效果：

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

頁面效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。