《ExtJS layout的9种样式详解》由会员分享，可在线阅读，更多相关《ExtJS layout的9种样式详解（17页珍藏版）》请在金锄头文库上搜索。
1、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
2、.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
3、. 29. 30. 31. );32. 33. );上面的代码定义了一个容器组件，指定使用Accordion布局，该容器组件中包含三个子元素，在layoutConfig中指定布局配置参数animate为true，表示在执行展开折叠时是否应用动画效果。点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板执行结果将生成如下图所示的界面：-001-三、anchor这个效果具体还不知道有什么用，就是知道注意一下1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，2.anchor值通常只能为负值(指非百分比值)，正值没有意义，3.anchor必须为字符串值四、B
4、order布局由类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. titl
5、e:顶部面板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. va
6、rb=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布局，将页面分成东，南，西，北，中五
7、部分，这里表示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
8、,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. c
