ExtJs-格局

ExtJs----布局

????????
????在EXT中，所有的布局都是从Ext.Container开始的，Ext.Container的父类是Ext.BoxComponent。Ext.BoxComponent是一个盒子组件，可以定义宽度，高度和位置等属性。作为子类，Ext.Container也继承了这些功能，更重要的是，Ext.Container可以使用layout和items属性未作内部的子组件进行布局。
????事实上，我们经常用来设置布局的子类也只有几个，比如用Ext.Viewport进行页面的整体布局，使用Ext.Panel和Ext.Window进行各种嵌套布局，使用Ext.form.FieldSet和Ext.form.FormPanel为表单进行布局。其余的子类都使用默认的渲染形式，很少进行内部布局。
????与Ext.Container相似，所有的布局类也有一个共同的超类Ext.layout.ContainerLayout。凡是继承该超类的子类都可以对Ext.Container和它的子类进行布局定义，这两颗继承树结合在一起便构成了EXT中完整的布局系统。

最简单的布局FitLayout
????
1var?viewport?=?new?Ext.Viewport({
2????layout:'fit',
3????items:[grid]
4})
????它可以自动适应页面大小的变化，填充整个页面。但如果在items中放入两个控件，会发现第二个控件没有任何效果。即FitLayout布局每次只能使用一个子组件。

常用的边框布局BorderLayout?

?????它将整个布局区域分成了东、西、南、北、中5个部分，除了中间区域以外，其他的区域又都是可以省略的。

var?viewport?=?new?Ext.Viewport({
????layout:'border',
????items:[
????????{region:'north',html:'north'},
????????{region:'south',html:'south'},
????????{region:'east',html:'east'},
????????{region:'west',html:'west'},
????????{region:'center',html:'center'}
????]
});
????重复一遍，center是绝对不能省的，否则会报错导致程序中断。
??? 在此布局中，north和south可以通过设置height来设置高度(也只能设置高度)；west和east部分可以通过设置width来设置宽度(也只能设置宽度)；同时，我们可以使用split来允许用户自行拖放以改变某一个区域的大小。如：

1var?viewport?=?new?Ext.Viewport({
2????layout:'border',
3????items:[
4????????{region:'north',html:'north'},
5????????{region:'west',html:'west',width:100,split:true},
6????????{region:'center',html:'center'}
7????]
8})
????当然，在使用split属性时，我们也可以搭配minSize和MaxSize属性来控制最小高度和最大高度。
????使用collapsible:true激活了区域的折叠功能，这需要搭配title参数一起使用。

制作伸缩菜单的布局----Accordion???
????1var?viewport?=?new?Ext.Viewport({
?2????layout:'border',
?3????items:[{
?4????????region:'west',
?5????????width:200,
?6????????layout:'accordion',
?7????????layoutConfig:{
?8????????????titleCollapse:true,
?9????????????animate:true,
10????????????activeOnTop:false
11????????},
12????????items:[{
13????????????title:'第一栏',
14????????????html:'第一栏'
15????????},{
16????????????title:'第二栏',
17????????????html:'第二栏'
18????????},{
19????????????title:'第三栏',
20????????????html:'第三栏'
21????????}]
22????},{
23????????region:'center',
24????????split:true,
25????????border:true
26????}]
27});????
实现操作向导的布局----CardLayout
????
??? CardLayout可以看做是一叠卡片，从上面看起来就像是一张卡片，可以把中间的卡片抽出来，放到最上面，可以每次只能看到一张卡片。
?1var?viewport?=?new?Ext.Viewport({
?2????layout:'border',
?3????items:[{
?4????????region:'west',
?5????????id:'wizard',
?6????????width:200,
?7????????title:'某某向导',
?8????????layout:'card',
?9????????activeItem:0,
10????????bodyStyle:'padding:15px',
11????????defaults:{
12????????????border:false
13????????},
14????????bbar:[{
15????????????id:'move-prev',
16????????????text:'上一步',
17????????????handler:navHandler.createDelegate(this,[-1]),
18????????????disalbed:true
19????????},'->',{
20????????????id:'move-next',
21????????????text:'下一步',
22????????????handler:navHandler.createDelegate(this,[1])
23????????}],
24????????items:[{
25????????????id:'card-0',
26????????????html:'<h1>哈哈！<br/>欢迎用咱的向导。</h1><p>第一步，一共三步</p>'
27????????},{
28????????????id:'card-1',
29????????????html:'<p>第二步，一共三步</p>'
30????????},{
31????????????id:'card-2',
32????????????html:'<h1>恭喜恭喜，完成了</p>'
33????????}]
34????},{
35????????region:'center',
36????????split:true,
37????????border:true
38????}]
39});
40
????示例代码实现了大致的逻辑，但控制上下页翻页的代码(handler)未详细给出。

控制位置和大小的布局----AnchorLayout和AbsoluteLayout
??? AnchorLayout提供了一种灵活的布局方式，即可以为item中的每个组件指定与总体布局大小的差值，也可以设置一个比例使子组件可以根据整体自行计算本身的大小。它为我们提供给了三种配置方式。
??? 第一种方式是使用百分比进行配置，我们可以设置某一个子组件占整体长和宽的百分比。如：
?1????var?viewport?=?new?Ext.Viewport({
?2????????layout:'anchor',
?3????????items:[{
?4????????????title:'panel?1',
?5????????????html:'panel?1',
?6????????????anchor:'50%?50%'
?7????????},{
?8????????????title:'panel?2',
?9????????????html:'panel?2',
10????????????anchor:'80%'
11????????}]
12????});
????第二种方式是直接设置与右侧和底部的边距，如：
?1????var?viewport?=?new?Ext.Viewport({
?2????????layout:'anchor',
?3????????items:[{
?4????????????title:'panel?1',
?5????????????html:'panel?1',
?6????????????anchor:'-50?-200'
?7????????},{
?8????????????title:'panel?2',
?9????????????html:'panel?2',
10????????????anchor:'-100'
11????????}]
12????});
13});
??? 第三种方式称为side。使用它的前提是：为作为布局整体的父组件和布局内部的子组件都设置好width、height和anchorSize属性。AnchorLayout会记录布局整体与子组件的大小上的差值，为以后调整布局提供依据。

?1????var?viewport?=?new?Ext.Viewport({
?2????????layout:'anchor',
?3????????anchorSize:{width:400,height:300},?
?4????????items:[{
?5????????????title:'panel?1',
?6????????????html:'panel?1',
?7????????????width:200,
?8????????????height:100,
?9????????????anchor:'r?b'
10????????},{
11????????????title:'panel?2',
12????????????html:'panel?2',
13????????????width:100,
14????????????height:200,
15????????????anchor:'r?b'
16????????}]
17????});????
????我们为Viewport设置了anchorSize，这是一个包含宽度和高度信息的JSON对象，以此作为以后计算差值的基准。然后在panel 1和panel 2中设置宽度和高度的信息。anchor的设置只有anchor:'r b'一种，这是固定的写法，也可以写成anchor:'right buttom'，两种写法完全相同。
????AbsoluteLayout是AnchorLayout的一个子类，继承了AnchorLayout的所有特性。AnchorLayout布局下的子组件都是自上而下竖直排列的，不能控制每个组件的位置，而AbsolutLayout可以通过设置x，y参数达到控制子组件位置的效果。

表单专用的布局FormLayout
??? FormLayout也是AnchorLayout的一个子类，可以再它里面使用anchor设置宽和高的比例。但是它主要还是用于对表单进行布局。首先要明白一点，Ext.form.FormPanel使用它作为默认的布局方式。也正因为使用了FormLayout布局，我们设置的fieldLabel、boxLabel才能显示出来，而FormLayout里也提供给了一系列的参数来控制这些显示效果。
??? hideLabels：是否隐藏field的标签
??? itemCls：表单显示的样式
??? labelAlign：标签的对齐方式
??? labelPad：标签空白的像素值
??? labelWidth：标签宽度
??? clearCls：清除div渲染的CSS样式
??? fieldLabel：对应field的标签内容
??? hideLabel：是否隐藏标签
??? itemCls：Field的CSS样式
??? labelSeparator：标签和field之间的分隔，默认是：
??? labelStyle：标签的CSS样式

分列式的布局ColumnLayout
?1var?viewport?=?new?Ext.Viewport({
?2????layout:'column',
?3????items:[{
?4????????title:'Column?1',
?5????????columnWidth:.25
?6????},<span style