ExtJS中九布局方式.docVIP

１、布局概述 　　容器中可以放置各种各样的元素，这些元素在容器怎么排放，是从左到右，还是从上到下，这些是容器自身所不知道的。容器中的子元素如何排放，在Ext中由布局来处理。　　 　　所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。 　　Ext提供了一套功能强大的布局系统，通过这些布局的应用，可以满足应用程序中各种复杂的用户界面布局处理，下面我们将对ExtJS中的布局作介绍。Ext中的每一个布局类都有一个简短的布局名称，在使用布局的时候直接使用布局名称即可。 　　布局主要应用于容器组件，在Container类中，提供了一个layout配置选项，该项可以是一个预定义布局名称（字符串），也可以是一个布局对象。比如下面是两种使用布局的方式： ?? new?Ext.Panel({ ??renderTo:test, ??width:400, ??height:100, ??layout:new?Ext.layout.ColumnLayout(), ??items:[{columnWidth:.5,?title:面板1}, ??????{columnWidth:.5,?title:面板2}] ??}); ??new?Ext.Panel({ ??renderTo:test, ??width:400, ??height:100, ??layout:column, ??items:[{columnWidth:.5,?title:面板1}, ??????{columnWidth:.5,?title:面板2}] ??}); 　　Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。 ２、通过Examples看常用布局示例, 　　Ext Layout Browser、Border Layout示例； ３、Border布局，把容器分成东西南北中几大区域，容器中的元素可以通过region属性来指定子元素放置在容器中的什么位置。 ４、Column布局，把子元素按列排放，通过columnWidth及width属性来指定子元素的所占的列宽度。 ５、Form布局，容器中的元素包括标题及组件内容两项值。 ６、Fit布局，子元素填充整个容器区域。 ７、Accordion布局，折叠布局。 extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。? absolute 顾名思义，在容器内部，根据指定的坐标定位显示? accordion 这个是最容易记的，手风琴效果? 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必须为字符串值? Ext.onReady(function()?{?? ????????var?panel1?=?new?Ext.Panel({?? ????????????title:?panel1,?? ????????????height:?100,?? ????????????anchor:?-50,?? ????????????html:?高