中layout的种布局风格

1、ExtJS中layout的12种布局风格extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。另外几种见：里面有详细的例子。 absolute 顾名思义，在容器内部，根据指定的坐标定位显示 accordion 这个是最容易记的，手风琴效果Java 代码1. Ext.onReady(function()2. varpanel=newExt.Panel(/Ext.formPanel 就是Panel中用了form布局3. 4. renderTo

2、: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、值没有意义，3.anchor必须为字符串值Java 代码1. Ext.onReady(function()2. varpanel1=newExt.Panel(3. title:panel1,4. height:100,5. anchor:-50,6. html:高度等于100，宽度=容器宽度-507. );8. 9. varpanel2=newExt.Panel(10. title:panel2,11. height:100,12. anchor:50%,13. html:高度等于100,宽度=容器宽度的50%14. 15. );16. 17. varpanel3=newExt.Panel(1

4、8. title:panel3,19. anchor:-10,-250,20. html:宽度=容器宽度-10,高度=容器宽度-25021. 22. );23. 24. varwin=newExt.Window(25. title:AnchorLayout,26. height:400,27. width:400,28. plain:true,29. layout:anchor,30. items:panel1,panel2,panel331. );32. win.show();33. ); border 将容器分为五个区域:east,south,west,north,centerJava 代

5、码1. Ext.onReady(function()2. 3. varbutton=Ext.get(show-btn);4. varwin;5. 6. button.on(click,function()7. 8. /创建TabPanel9. vartabs=newExt.TabPanel(10. region:center,/border 布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间11. margins:3330,12. activeTab:0,13. defaults:14. autoScroll:true15. ,16. items:17. title:B

6、ogusTab,18. html:第一个Tab的内容.19. ,20. title:AnotherTab,21. html:我是另一个Tab22. ,23. title:ClosableTab,24. html:这是一个可以关闭的Tab,25. closable:true26. 27. );28. 29. /定义一个Panel30. varnav=newExt.Panel(31. title:Navigation,32. region:west,/放在西 边，即左侧33. split:true,34. width:200,35. collapsible:true,/允许伸缩36. margin

7、s:3033,37. cmargins:333338. );39. 40. /如果窗口第一次被打开时才创建41. if(!win)42. win=newExt.Window(43. title:LayoutWindow,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.

8、54. win.show(button);55. );56. ); card 像安装向导一样，一张一张显示Java 代码1. Ext.onReady(function()2. 3. vari=0;4. 5. varnavHandler=function(direction)6. if(direction=-1)7. i-;8. if(i2)i=2;returnfalse;14. 15. 16. 17. varbtnNext=Ext.get(move-next).dom.document.getElementsByTagName_r(button)1;18. varbtnBack=Ext.get

9、(move-next).dom.document.getElementsByTagName_r(button)0;19. 20. if(i=0)21. btnBack.disabled=true;22. 23. else24. btnBack.disabled=false;25. 26. 27. if(i=2)28. btnNext.value=完成;29. btnNext.disabled=true;30. 31. else32. btnNext.value=下一步;33. btnNext.disabled=false;34. 35. 36. card.getLayout().setActi

10、veItem(i);37. 38. ;39. 40. 41. varcard=newExt.Panel(42. width:200,43. height:200,44. title:注册向导,45. layout:card,46. activeItem:0,/makesuretheactiveitemissetonthecontainerconfig!47. bodyStyle:padding:15px,48. defaults:49. border:false50. ,51. bbar:52. 53. id:move-prev,54. text:上一步,55. handler:navHand

11、ler.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:欢迎来到注册向导!Step1of368. ,69. id:card-1,70. html:请填写注册资料!Step2of371. ,72. id:card-2,73. html:注册成 功!Step3of3-Complete74. ,75. 76. renderTo:con

12、tainer77. );78. 79. 80. 81. ); column 把整个容器看成一列,然后向容器放入子元素时Java 代码1. Ext.onReady(function()2. varwin=newExt.Window(3. title:ColumnLayout,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:20013. ,

13、14. 15. title:width=250px,16. width:200,17. height:100,18. html:固定宽度为250px19. 20. 21. );22. win.show();23. ); fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）Java 代码1. Ext.onReady(function()2. varpanel=newExt.Panel(3. 4. renderTo:paneldiv,5. title:容器组件,6. layout:fit,7. width:500,8. height:100,9. items:10. tit

14、le:子元素1,11. title:子元素2,12. title:子元素3,13. title:子元素4,14. title:子元素515. 16. 17. );18. ); form 是一种专门用于管理表单中输入字段的布局Java 代码1. Ext.onReady(function()2. varwin=newExt.Window(3. title:formLayout,4. height:150,5. width:230,6. plain:true,7. bodyStyle:padding:15px,8. items:9. 10. xtype:form,11. labelWidth:30,

15、12. defaultType:textfield,13. frame:true,14. items:15. 16. 17. fieldLabel:姓名,18. name:username,19. allowBlank:false20. ,21. 22. fieldLabel:呢称,23. name:nickname24. ,25. 26. fieldLabel:生日,27. xtype:datefield,28. name:birthday,29. width:12730. 31. 32. 33. );34. win.show();35. ); table 按照普通表格的方法布局子元素，用layoutConfig:columns:3,/将父容器分成3列Java 代码1. Ext.onReady(function()2. varpanel=newExt.Panel(3. 4. renderTo:paneldiv,5. title:容器组件,6. layo