extjs格局（转）

extjs布局（转）

? ? 周末两天又要去参加婚礼，但是同学带的本科生居然系统没通过，叫我帮写一个。都怪自己，在帮他们调试的时候，

说自己在以前也写过两个项目，给本科生。系统要写两个的，一个打算用java?swing写桌面的，一个打算用Struts2 + extjs + json+hibernate+mysql写web端。周2要交？两个晚上加一天+一个上午，天啊，挑战下自己也好吧。

?

?

下面是转来的，extjs做web的桌面，我喜欢extjs这么风格的，方便。

ExtJS学习笔记 layout的9种样式风格总结博客分类：?

JSEXTHTMLextjs的容器组件都可以设置它的显示风格，它的有效值有 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:'paneldiv',??
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:'paneldiv',??
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:'paneldiv',??
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. });