ExtJS lyout的9种样式详解.doc

ExtJS layout的9种样式详解(一) xtJS学习笔记?layout的9种样式风格 extjs的容器组件都可以设置它的显示风格，它的有效值有?absolute, accordion, anchor, border, card, column, fit, form and table.?一共9种 一、??absolute?顾名思义，在容器内部，根据指定的坐标定位显示 二、??accordion?这个是最容易记的，手风琴效果?，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式 Js代码?? ???Ext.onReady(function(){????? ?? ???var?panel=new?Ext.Panel(?{//Ext.formPanel就是Panel中用了form布局????????????? ?? ??????????renderTo:paneldiv,????? ?? ??????????title:容器组件,????? ?? ??????????layout:accordion,???????????? ?? ??????????width:500,????? ?? ??????????height:200,????? ?? ??????????layoutConfig:{animate:false},?//?表示在执行展开折叠时是否应用动画效果?? ?? ??????????items:[????? ?? ????????{title:元素1,html:},????? ?? ????????{title:元素2,html:},????? ?? ????????{title:元素3,html:},????? ?? ????????{title:元素4,html:}????? ?? ???????]????? ?? ??????}????? ?? ?????);????? ?? });??? ? ? ? 上面的代码定义了一个容器组件，指定使用Accordion布局，该容器组件中包含三个子元素，在layoutConfig中指定布局配置参数animate为true，表示在执行展开折叠时是否应用动画效果。点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板执行结果将生成如下图所示的界面：----001---- ?? 三、anchor?这个效果具体还不知道有什么用，就是知道注意一下 1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，?2.anchor值通常只能为负值(指非百分比值)，正值没有意义，?3.anchor必须为字符串值 ?? ? 四、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。 ????????????????????该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码： 例一： Js代码?? Ext.onReady(function(){??? ?? ????????????????????new?Ext.Viewport({?? ?? ????????????????????????????????????????layout:border,?? ?? ????????????????????????????????????????items:[{?? ?? ????????????????????????????????????????????????????????????region:north,?? ?? ????????????????????????????????????????????????????????????height:50,?? ?? ????????????????????????????????????????????????????????????title:顶部面板?? ?? ????????????????????????????????????????},?? ?? ????????????????????????????????????????{region:south,?? ?? ????????????????????????????????????????height:50,?? ?? ????????????????????????????????????????title:底部面板},?? ?? ???????????????????????????