周末两天又要去参加婚礼，但是同学带的本科生居然系统没通过，叫我帮写一个。都怪自己，在帮他们调试的时候，
说自己在以前也写过两个项目，给本科生。系统要写两个的，一个打算用java swing写桌面的，一个打算用Struts2 + extjs + json+hibernate+mysql写web端。周2要交？两个晚上加一天+一个上午，天啊，挑战下自己也好吧。
下面是转来的，extjs做web的桌面，我喜欢extjs这么风格的，方便。
extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。
[list]
absolute 顾名思义，在容器内部，根据指定的坐标定位显示
accordion 这个是最容易记的，手风琴效果
1. Ext.OnReady(function(){
2. var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
3. {
4. 'paneldiv',
5. '容器组件',
6. 'accordion',
7. 500,
8. 200,
9. false},
10. items:[
11. '元素1',html:''},
12. '元素2',html:''},
13. '元素3',html:''},
14. '元素4',html:''}
15. ]
16. }
17. );
18. });
anchor 这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
Java代码
1. Ext.onReady(function() {
2. new
3. "panel1",
4. 100,
5. '-50',
6. "高度等于100，宽度=容器宽度-50"
7. });
8.
9. new
10. "panel2",
11. 100,
12. '50%',
13. "高度等于100,宽度=容器宽度的50%"
14.
15. });
16.
17. new
18. "panel3",
19. '-10, -250',
20. "宽度=容器宽度-10,高度=容器宽度-250"
21.
22. });
23.
24. new
25. "Anchor Layout",
26. 400,
27. 400,
28. true,
29. 'anchor',
30. items: [panel1, panel2,panel3]
31. });
32. win.show();
33. });
border 将容器分为五个区域:east,south,west,north,center
1. Ext.onReady(function() {
2.
3. 'show-btn');
4. var win;
5.
6. 'click', function() {
7.
8. //创建TabPanel
9. new
10. 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
11. '3 3 3 0',
12. 0,
13. defaults: {
14. true
15. },
16. items: [{
17. 'Bogus Tab',
18. "第一个Tab的内容."
19. }, {
20. 'Another Tab',
21. "我是另一个Tab"
22. }, {
23. 'Closable Tab',
24. "这是一个可以关闭的Tab",
25. true
26. }]
27. });
28.
29. //定义一个Panel
30. new
31. 'Navigation',
32. 'west', //放在西边，即左侧
33. true,
34. 200,
35. true, //允许伸缩
36. '3 0 3 3',
37. '3 3 3 3'
38. });
39.
40. //如果窗口第一次被打开时才创建
41. if
42. new
43. 'Layout Window',
44. true,
45. 600,
46. 350,
47. false,
48. true,
49. 'border',
50. 'hide',
51. //把上面创建的panel和TabPanel放在window中，并采用border方式布局
52. });
53. }
54. win.show(button);
55. });
56. });
card 像安装向导一样，一张一张显示
1. Ext.onReady(function() {
2.
3. 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. "move-next").dom.document.getElementsByTagName("button")[1];
18. "move-next").dom.document.getElementsByTagName("button")[0];
19.
20. if (i == 0) {
21. true;
22. }
23. else
24. false;
25. }
26.
27. if (i == 2) {
28. "完成";
29. true;
30. }
31. else
32. "下一步";
33. false;
34. }
35.
36. card.getLayout().setActiveItem(i);
37.
38. };
39.
40.
41. new
42. 200,
43. 200,
44. '注册向导',
45. 'card',
46. 0, // make sure the active item is set on the container config!
47. 'padding:15px',
48. defaults: {
49. false
50. },
51. bbar: [
52. {
53. 'move-prev',
54. '上一步',
55. this, [-1])
56. },
57. '->',
58. {
59. 'move-next',
60. '下一步',
61. this, [1])
62. }
63. ],
64.
65. items: [{
66. 'card-0',
67. '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
68. }, {
69. 'card-1',
70. '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
71. }, {
72. 'card-2',
73. '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
74. }],
75.
76. "container"
77. });
78.
79.
80.
81. });
column 把整个容器看成一列,然后向容器放入子元素时
Java代码
1. Ext.onReady(function() {
2. new
3. "Column Layout",
4. 300,
5. 400,
6. true,
7. 'column',
8. items: [{
9. "width=50%",
10. 0.5,
11. "width=(容器宽度-容器内其它组件固定宽度)*50%",
12. 200
13. },
14. {
15. "width=250px",
16. 200,
17. 100,
18. "固定宽度为250px"
19. }
20. ]
21. });
22. win.show();
23. });
fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
1. Ext.OnReady(function(){
2. var panel=new
3. {
4. 'paneldiv',
5. '容器组件',
6. 'fit',
7. 500,
8. 100,
9. items:[
10. '子元素1'},
11. '子元素2'},
12. '子元素3'},
13. '子元素4'},
14. '子元素5'}
15. ]
16. }
17. );
18. });
form 是一种专门用于管理表单中输入字段的布局
1. Ext.onReady(function() {
2. new
3. "form Layout",
4. 150,
5. 230,
6. true,
7. 'padding:15px',
8. items:
9. {
10. "form",
11. 30,
12. "textfield",
13. true,
14. items:
15. [
16. {
17. "姓名",
18. "username",
19. false
20. },
21. {
22. "呢称",
23. "nickname"
24. },
25. {
26. "生日",
27. 'datefield',
28. "birthday",
29. 127
30. }
31. ]
32. }
33. });
34. win.show();
35. });
table 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列
1. Ext.onReady(function(){
2. var panel=new
3. {
4. 'paneldiv',
5. '容器组件',
6. 'table',
7. 500,
8. 200,
9. 3},//将父容器分成3列
10. items:[
11. '元素1',html:'ssssssssss',rowspan:2,height:100},
12. '元素2',html:'dfffsddsdfsdf',colspan:2},
13. '元素3',html:'sdfsdfsdf'},
14. '元素4',html:''}
15. ]
16. }
17. );
18. });
