ExtJS layout的9种样式详解.doc

ExtJS layout的9种样式详解(一)xtJS学习笔记layout的9种样式风格extjs的容器组件都可以设置它的显示风格，它的有效值有absolute, accordion, anchor, border, card, column, fit, form and table.一共9种一、absolute顾名思义，在容器内部，根据指定的坐标定位显示二、accordion这个是最容易记的，手风琴效果，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式Js代码1. Ext.onReady(function()2. 3. varpanel=newExt.Panel(/Ext.formPanel就是Panel中用了form布局4. 5. renderTo:paneldiv,6. 7. title:容器组件,8. 9. layout:accordion,10. 11. width:500,12. 13. height:200,14. 15. layoutConfig:animate:false,/表示在执行展开折叠时是否应用动画效果16. 17. items:18. 19. title:元素1,html:,20. 21. title:元素2,html:,22. 23. title:元素3,html:,24. 25. title:元素4,html:26. 27. 28. 29. 30. 31. );32. 33. );上面的代码定义了一个容器组件，指定使用Accordion布局，该容器组件中包含三个子元素，在layoutConfig中指定布局配置参数animate为true，表示在执行展开折叠时是否应用动画效果。点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板执行结果将生成如下图所示的界面：-001-三、anchor这个效果具体还不知道有什么用，就是知道注意一下1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，2.anchor值通常只能为负值(指非百分比值)，正值没有意义，3.anchor必须为字符串值四、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：例一：Js代码1. Ext.onReady(function()2. 3. newExt.Viewport(4. 5. layout:border,6. 7. items:8. 9. region:north,10. 11. height:50,12. 13. title:顶部面板14. 15. ,16. 17. region:south,18. 19. height:50,20. 21. title:底部面板,22. 23. region:center,24. 25. title:中央面板,26. 27. region:west,28. 29. width:100,30. 31. title:左边面板,32. 33. region:east,34. 35. width:100,36. 37. title:右边面板38. 39. 40. 41. );42. 43. );-002-例二：Js代码1. Ext.onReady(function()2. 3. varb=newExt.Button(4. 5. id:show-btn,/定义按钮的ID6. 7. text:弹出按钮,/定义按钮的标题8. 9. renderTo:document.body/将弹出按钮渲染到窗体上10. 11. );12. 13. varbutton=Ext.get(show-btn);14. 15. varwin;16. 17. button.on(click,function()18. 19. /创建TabPanel20. 21. vartabs=newExt.TabPanel(22. 23. region:center,/border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间24. 25. margins:3330,26. 27. activeTab:0,/当前选项卡是第1个(从0开始)28. 29. defaults:30. 31. autoScroll:true32. 33. ,34. 35. items:36. 37. title:BogusTab,38. 39. html:第一个Tab的内容.40. 41. ,42. 43. title:AnotherTab,44. 45. html:我是另一个Tab46. 47. ,48. 49. title:ClosableTab,50. 51. html:这是一个可以关闭的Tab,52. 53. closable:true/显示关闭按钮54. 55. 56. 57. );58. 59. /定义一个Panel60. 61. varnav=newExt.Panel(62. 63. title:Navigation,64. 65. region:west,/放在西边，即左侧66. 67. split:true,/设置为分割68. 69. width:200,70. 71. collapsible:true,/允许伸缩72. 73. margins:3033,74. 75. cmargins:333376. 77. );78. 79. /如果窗口第一次被打开时才创建80. 81. if(!win)82. 83. win=newExt.Window(84. 85. title:LayoutWindow,86. 87. closable:true,/显示关闭按钮88. 89. width:600,90. 91. height:350,92. 93. border:false,94. 95. plain:true,96. 97. layout:border,98. 99. closeAction:hide,100. 101. items:nav,tabs/把上面创建的panel和TabPanel放在window中，并采用border方式布局102. 103. );104. 105. 106. 107. win.show(button);108. 109. );110. 111. );112. 113. );-003-五、card像安装向导一样，一张一张显示，布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。看下面的代码：例一：Js代码1. Ext.onReady(function()2. 3. varpanel=newExt.Panel(4. 5. renderTo:hello,6. 7. title:容器组件,8. 9. width:300,10. 11. height:200,12. 13. layout:card,14. 15. activeItem:0,16. 17. layoutConfig:18. 19. animate:true20. 21. ,22. 23. items:24. 25. title:子元素1,html:这是子元素1中的内容,26. 27. title:子元素2,html:这是子元素2中的内容,28. 29. title:子元素3,html:这是子元素3中的内容30. 31. ,32. 33. buttons:text:切换,handler:changeTab34. 35. );36. 37. vari=1;38. 39. functionchangeTab()40. 41. panel.getLayout().setActiveItem(i+);42. 43. if(i2)i=0;44. 45. 46. 47. );上面的代码创建了一个容器组件面板，面板中包含三个子面板元素，父容器包含一个“切换”按钮，点击该按钮将会执行changeTab函数，该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示：004点击一下“切换”按钮，结果如下图所示：005ExtJS layout的9种样式详解(二)例二：Js代码1. Ext.onReady(function()2. vari=0;3. varnavHandler=function(direction)4. if(direction=-1)5. i-;6. if(i2)i=2;returnfalse;11. 12. varbtnNext=Ext.get(move-next);13. varbtnBack=Ext.get(move-next);14. if(i=0)15. btnBack.disabled=true;16. else17. btnBack.disabled=false;18. 19. if(i=2)20. btnNext.value=完成;21. btnNext.disabled=true;22. else23. btnNext.value=下一步;24. btnNext.disabled=false;25. 26. card.getLayout().setActiveItem(i);27. ;28. varcard=newExt.Panel(29. width:200,30. height:200,31. title:注册向导,32. layout:card,33. activeItem:0,/makesuretheactiveitemissetonthecontainerconfig!34. bodyStyle:padding:15px,35. defaults:36. border:false37. ,38. bbar:39. 40. id:move-prev,41. text:上一步,42. handler:navHandler.createDelegate(this,-1)43. ,44. -,45. 46. id:move-next,47. text:下一步,48. handler:navHandler.createDelegate(this,1)49. 50. ,51. 52. items:53. id:card-0,54. html:欢迎来到注册向导!Step1of355. ,56. id:card-1,57. html:请填写注册资料!Step2of358. ,59. id:card-2,60. html:注册成功!Step3of3-Complete61. ,62. renderTo:container63. );64. );六、column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：例一：Js代码1. Ext.onReady(function()2. newExt.Panel(3. renderTo:hello,4. title:容器组件,5. layout:column,6. width:500,7. height:100,8. items:title:列1,width:100,9. title:列2,width:200,10. title:列3,width:100,11. title:列4,width:9512. 13. );14. );上面的代码在容器组件中放入了四个元素，在容器组件中形成4列，列的宽度分别为100,200,100及剩余宽度，执行结果如例二：columnWidth来定义子元素所占的列宽度(注意columnWidth的总和应该为1)Js代码1. Ext.onReady(function()2. newExt.Panel(3. renderTo:hello,4. title:容器组件,5. layout:column,6. width:500,7. height:100,8. items:title:列1,columnWidth:0.2,9. title:列2,columnWidth:0.3,10. title:列3,columnWidth:0.3,11. title:列4,columnWidth:0.212. 13. );14. );例三：column和columnWidth的混合使用Js代码1. Ext.onReady(function()2. newExt.Panel(3. renderTo:hello,4. title:容器组件,5. layout:column,6. width:500,7. height:100,8. items:title:列1,width:200,9. title:列2,columnWidth:0.3,10. title:列3,columnWidth:0.3,11. title:列4,columnWidth:0.412. 13. );14. );例四Js代码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. ,14. 15. title:width=250px,16. width:200,17. height:100,18. html:固定宽度为250px19. 20. 21. );22. win.show();ExtJS layout的9种样式详解(三)七、fit一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）例一：例二：如果容器组件中有多个子元素，则只会显示一个元素，如下面的代码：Js代码1. Ext.onReady(function()2. newExt.Panel(3. renderTo:hello,4. title:容器组件,5. layout:fit,6. width:500,7. height:100,8. items:title:子元素1,html:这是子元素1中的内容,9. title:子元素2,html:这是子元素2中的内容10. 11. );12. );例三：如果不使用布局Fit，代码如下：Js代码1. Ext.onReady(function()2. newExt.Panel(3. renderTo:hello,4. title:容器组件,5. width:500,6. height:200,7. items:title:子元素1,html:这是子元素1中的内容,8. title:子元素2,html:这是子元素2中的内容9. 10. );11. );八、form是一种专门用于管理表单中输入字段的布局Js代码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. xtype:form,10. labelWidth:30,11. defaultType:textfield,12. frame:true,13. items:14. 15. fieldLabel:姓名,16. name:username,17. allowBlank:false/必填项(