extjs的容器組件都可以設置它的顯示風格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9種。簡單總結一下，幫助記憶。
[list]
• absolute 顧名思義，在容器內部，根據指定的坐標定位顯示
• accordion 這個是最容易記的，手風琴效果
Java代碼
1. Ext.OnReady(function(){
2. var panel=new Ext.Panel(//Ext.formPanel就是Panel中用瞭form佈局
3. {
4. renderTo:'panelp',
5. title:'容器組件',
6. layout:'accordion',
7. width:500,
8. height:200,
9. layoutConfig:{animate:false},
10. items:[
11. {title:'元素1',html:''},
12. {title:'元素2',html:''},
13. {title:'元素3',html:''},
14. {title:'元素4',html:''}
15. ]
16. }
17. );
18. });
• anchor 這個效果具體還不知道有什麼用，就是知道註意一下
1.容器內的組件要麼指定寬度，要麼在anchor中同時指定高/寬，
2.anchor值通常隻能為負值(指非百分比值)，正值沒有意義，
3.anchor必須為字符串值
Java代碼
1. Ext.onReady(function() {
2. var panel1 = new Ext.Panel({
3. title: "panel1",
4. height: 100,
5. anchor: '-50',
6. html: "高度等於100，寬度=容器寬度-50"
7. });
8.
9. var panel2 = new Ext.Panel({
10. title: "panel2",
11. height: 100,
12. anchor: '50%',
13. html: "高度等於100,寬度=容器寬度的50%"
14.
15. });
16.
17. var panel3 = new Ext.Panel({
18. title: "panel3",
19. anchor: '-10, -250',
20. html: "寬度=容器寬度-10,高度=容器寬度-250"
21.
22. });
23.
24. var win = new Ext.Window({
25. title: "Anchor Layout",
26. height: 400,
27. width: 400,
28. plain: true,
29. layout: 'anchor',
30. items: [panel1, panel2,panel3]
31. });
32. win.show();
33. });
• border 將容器分為五個區域:east,south,west,north,center
Java代碼
1. Ext.onReady(function() {
2.
3. var button = Ext.get('show-btn');
4. var win;
5.
6. button.on('click', function() {
7.
8. //創建TabPanel
9. var tabs = new Ext.TabPanel({
10. region: 'center', //border佈局，將頁面分成東，南，西，北，中五部分，這裡表示TabPanel放在中間
11. margins: '3 3 3 0',
12. activeTab: 0,
13. defaults: {
14. autoScroll: true
15. },
16. items: [{
17. title: 'Bogus Tab',
18. html: "第一個Tab的內容."
19. }, {
20. title: 'Another Tab',
21. html: "我是另一個Tab"
22. }, {
23. title: 'Closable Tab',
24. html: "這是一個可以關閉的Tab",
25. closable: true
26. }]
27. });
28.
29. //定義一個Panel
30. var nav = new Ext.Panel({
31. title: 'Navigation',
32. region: 'west', //放在西邊，即左側
33. split: true,
34. width: 200,
35. collapsible: true, //允許伸縮
36. margins: '3 0 3 3',
37. cmargins: '3 3 3 3'
38. });
39.
40. //如果窗口第一次被打開時才創建
41. if (!win) {
42. win = new Ext.Window({
43. title: 'Layout Window',
44. closable: true,
45. width: 600,
46. height: 350,
47. border : false,
48. plain: true,
49. layout: 'border',
50. closeAction:'hide',
51. items: [nav, tabs]//把上面創建的panel和TabPanel放在window中，並采用border方式佈局
52. });
53. }
54. win.show(button);
55. });
56. });
• card 像安裝向導一樣，一張一張顯示
Java代碼
1. Ext.onReady(function() {
2.
3. var i = 0;
4.
5. var navHandler = function(direction) {
6. if (direction == -1) {
7. i–;
8. if (i < 0) { i = 0; }
9. }
10.
11. if (direction == 1) {
12. i++;
13. if (i > 2) { i = 2; return false; }
14. }
15.
16.
17. var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
18. var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
19.
20. if (i == 0) {
21. btnBack.disabled = true;
22. }
23. else {
24. btnBack.disabled = false;
25. }
26.
27. if (i == 2) {
28. btnNext.value = "完成";
29. btnNext.disabled = true;
30. }
31. else {
32. btnNext.value = "下一步";
33. btnNext.disabled = false;
34. }
35.
36. card.getLayout().setActiveItem(i);
37.
38. };
39.
40.
41. var card = new Ext.Panel({
42. width: 200,
43. height: 200,
44. title: '註冊向導',
45. layout: 'card',
46. activeItem: 0, // make sure the active item is set on the container config!
47. bodyStyle: 'padding:15px',
48. defaults: {
49. border: false
50. },
51. bbar: [
52. {
53. id: 'move-prev',
54. text: '上一步',
55. handler: navHandler.createDelegate(this, [-1])
56. },
57. '->',
58. {
59. id: 'move-next',
60. text: '下一步',
61. handler: navHandler.createDelegate(this, [1])
62. }
63. ],
64.
65. items: [{
66. id: 'card-0',
67. html: '<h1>歡迎來到註冊向導!</h1><p>Step 1 of 3</p>'
68. }, {
69. id: 'card-1',
70. html: '<h1>請填寫註冊資料!</h1><p>Step 2 of 3</p>'
71. }, {
72. id: 'card-2',
73. html: '<h1>註冊成功!</h1><p>Step 3 of 3 – Complete</p>'
74. }],
75.
76. renderTo: "container"
77. });
78.
79.
80.
81. });
• column 把整個容器看成一列,然後向容器放入子元素時
Java代碼
1. Ext.onReady(function() {
2. var win = new Ext.Window({
3. title: "Column Layout",
4. height: 300,
5. width: 400,
6. plain: true,
7. layout: 'column',
8. items: [{
9. title:"width=50%",
10. columnWidth:0.5,
11. html:"width=(容器寬度-容器內其它組件固定寬度)*50%",
12. height:200
13. },
14. {
15. title:"width=250px",
16. width: 200,
17. height:100,
18. html:"固定寬度為250px"
19. }
20. ]
21. });
22. win.show();
23. });
• fit 一個子元素將充滿整個容器（如果多個子元素則隻有一個元素充滿整個容器）
Java代碼
1. Ext.OnReady(function(){
2. var panel=new Ext.Panel(
3. {
4. renderTo:'panelp',
5. title:'容器組件',
6. layout:'fit',
7. width:500,
8. height:100,
9. items:[
10. {title:'子元素1'},
11. {title:'子元素2'},
12. {title:'子元素3'},
13. {title:'子元素4'},
14. {title:'子元素5'}
15. ]
16. }
17. );
18. });
• form 是一種專門用於管理表單中輸入字段的佈局
Java代碼
1. Ext.onReady(function() {
2. var win = new Ext.Window({
3. title: "form Layout",
4. height: 150,
5. width: 230,
6. plain: true,
7. bodyStyle: 'padding:15px',
8. items:
9. {
10. xtype: "form",
11. labelWidth: 30,
12. defaultType: "textfield",
13. frame:true,
14. items:
15. [
16. {
17. fieldLabel:"姓名",
18. name:"username",
19. allowBlank:false
20. },
21. {
22. fieldLabel:"呢稱",
23. name:"nickname"
24. },
25. {
26. fieldLabel: "生日",
27. xtype:'datefield',
28. name: "birthday",
29. width:127
30. }
31. ]
32. }
33. });
34. win.show();
35. });
• table 按照普通表格的方法佈局子元素，用layoutConfig:{columns:3},//將父容器分成3列
Java代碼
1. Ext.onReady(function(){
2. var panel=new Ext.Panel(
3. {
4. renderTo:'panelp',
5. title:'容器組件',
6. layout:'table',
7. width:500,
8. height:200,
9. layoutConfig:{columns:3},//將父容器分成3列
10. items:[
11. {title:'元素1',html:'ssssssssss',rowspan:2,height:100},
12. {title:'元素2',html:'dfffsddsdfsdf',colspan:2},
13. {title:'元素3',html:'sdfsdfsdf'},
14. {title:'元素4',html:''}
15. ]
16. }
17. );
18. });
[/list] .
摘自 VirgooooS