ExtJS中laout的12种布局风格.docVIP

ExtJS中layout的12种布局风格extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。另外几种见：/deploy/dev/examples/layout-browser/layout-browser.html里面有详细的例子。 absolute 顾名思义，在容器内部，根据指定的坐标定位显示 accordion 这个是最容易记的，手风琴效果 Java 代码 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:}?? ???????]?? ??????}?? ?????);?? });?? anchor 这个效果具体还不知道有什么用，就是知道注意一下1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，2.anchor值通常只能为负值(指非百分比值)，正值没有意义，3.anchor必须为字符串值 Java 代码 Ext.onReady(function()?{?? ????????var?panel1?=?new?Ext.Panel({?? ????????????title:?panel1,?? ????????????height:?100,?? ????????????anchor:?-50,?? ????????????html:?高度等于100，宽度=容器宽度-50?? ????????});?? ?? ????????var?panel2?=?new?Ext.Panel({?? ????????????title:?panel2,?? ????????????height:?100,?? ????????????anchor:?50%,?? ????????????html:?高度等于100,宽度=容器宽度的50%?? ?? ????????});?? ?? ????????var?panel3?=?new?Ext.Panel({?? ????????????title:?panel3,?? ????????????anchor:?-10,?-250,?? ????????????html:?宽度=容器宽度-10,高度=容器宽度-250?? ?? ????????});?? ?? ????????var?win?=?new?Ext.Window({?? ????????????title:?Anchor?Layout,?? ????????????height:?400,?? ????????????width:?400,?? ????????????plain:?true,?????????????????????? ????????????layout:?anchor,?? ????????????items:?[panel1,?panel2,panel3]?????????????? ????????});?? ????????win.show();?? ????});?? border 将容器分为五个区域:east,south,west,north,center Java 代码 ?Ext.onReady(function()?{??????? ?? ????????var?button?=?Ext.get(show-btn);?? ????????var?win;?? ?????????? ????????button.on(click,?function()?{?? ?? ????????????//创建TabPanel?? ????????????var?tabs?=?new?Ext.TabPanel({?? ????????????????region:?center,?//border 布局，将页面分成