Ext2.0版的布局类,最大的改动是:
1、取消了内容面板contentPanel类,代替的是panel类的。在panel类中,会根据layout的定义不同自动生成布局样式,这样就不需要自己再去定义布局了,只要在panel定义中加入布局的定义就可以实现布局了。由panel类派生出formpanel、girdpanel、tabpanel、treepanel等子类,各子类中已根据自己的需要固定了不同的布局类型,例如在创建formpanel时会创建formlayout。
2、增加Container类,并派生出viewpoint类作为全局布局的接口。
3、取消了layoutManger类,增加了ContainerLayout类,而borderLayout类的父类也修改为ContainerLayout。
4、BasicLayoutRegion类也取消了,因此它的子类LayoutRegion以及LayoutRegion类的子类SplitLayoutRegion都取消了。代替的是在borderLayout类下增加了Region类和SplitRegion类。
5、在区域内再划分区域的NestedLayoutPanel类也根据框架的改变而取消了。至于如何再划分区域,请继续阅读本文。
6、增加了AccordianLayout、AnchorLayout、CardLayout、CoulmnLayout、FitLayout、FormLayout、TableLayout等新的类。
7、原有的用contentPanel可以做出的tab效果,现在则需要使用tabpanel实现。
随着类的继承关系的改变,布局的创建方法也做了很大的变动。我的看法是做这样大的框架的修改主要原因解决内存泄漏的问题。
我们先来了解一下新的布局类的继承关系:
从图中我们可以看出Layout类独立出来了,不再象1.1版那样继承自Observable类了。估计这样修改是未来避免内存泄漏的(猜的,水平有限,所以请多见谅)。
下面我们来看看各个类的情况:
1、Observable类
Observable类和1.1版的相同,没有修改,是一个抽象基类,为发布事件提供一个公共接口,其子类可通过addEvents方法增加事件。API可以直接参考1.1的API。
2、Component类
Component类和1.1版的相同,没有修改,是Ext组件的主要基类。API可以直接参考1.1的API。
3、BoxComponent类
BoxComponent类和1.1版的相同,没有改变,是需要使用盒子容器的可视化Ext组件的基类。API可以直接参考1.1的API。
4、Container类
Container类是新增加的一个基类。其主要作用是管理容器里的布局对象,负责布局对象的创建与摧毁。它通过一个JSON结构(Ext.Container.LAYOUTS={})来保存布局对象,通过layout属性值和items的JSON定义自动创建这些布局对象,并通过一个JSON结构记录这些布局对象,这样就可在面板对象生命周期内对其进行管理,防止布局中面板关闭时发生内存泄漏。Container类设置了布局中默认面板为panel,如果需要使用其它panel,则需要在items中进行定义。
5、Viewport类
Viewport类也是新增的一个类,是Container类的子类。Viewport类其实就是将页面body作为一个Ext对象,然后通过该对象管理body上的布局对象。Viewprot类的默认面板是panel面板,因为panel并没有指定特定的布局,所以要通过layout属性指定布局,并在items中定义的面板对象定义中加入该布局的定义。Layout属性可选的范围值为container、anchor、form、border、column、fit、accordion、card和table。
6、Panel类
Panel类是新增的面板基类。其基本的属性、方法和事件与1.1版的contentPanel相似,API可参考contentPanel的API。Panel类和contentPanel类最大的不同是可以根据layout属性自动生成相应的布局,而不是和1.1版那样定义布局,然后加入contentPanel对象。
在panel类中增加了一个很好的功能,就是工具栏定义不再是contentPanel的toolbar了,而是划分成了tbar和bbar,tbar就是top bar,在面板顶部的工具栏,babr是bottom bar,在面板底部的工具栏,这样就不用再为toolbar的位置犯难了,呵呵。
panel类也不再象contentPanel那样本身就是一个tab面板,如果需要tab方式的面板,则需要用到新的tabPanel来定义。
7、ContainerLayout类
ContainerLayout类是新增的一个容器布局类,是其它布局的类的基类,其作用主要是为子类提供基本的属性、方法和事件:monitorResize(是否检测窗口大小的改变)、activeItem(当前活动的对象)、layout(子布局的类型)、onLayout(显示布局事件)、isValidParent(是否有有效的父节点)、renderAll(输出内容)、renderItem(输出某个子对象)、onResize(大小改变时间)、setContainer(设置容器)和parseMargins(取消外补丁)。
8、BorderLayout类
BorderLayout类保持了1.1版的属性、事件和方法,只是其继承对象变成了ContainerLayout类。虽然其内部运作方法不同,但是还是可以根据1.1版的API去定义BorderLayout对象。
9、anchorLayout类和formLayout类
anchorLayout类是新增的类,它的源代码很简单,主要功能就是定义一个显示内容的空白区域。具体的应用看layout下的anchor.html文件看不出有什么特点,呵呵。
formLayout也是新增的类,继承于anchorLayout,主要是为formPanle服务,创建formPanel时创建该布局,主要属性为labelSeparator(标题分隔符)。
10、 ColumnLayout类
ColumnLayout类是新增的类,替代1.1版的Ext.form.Column。代码书写方式比以前更简单更方便。
11、 FitLayout类、Accordion类和CardLayout类
FitLayout也是新增的类,主要是创建一个适应容器大小的布局区域。没什么特殊的属性和方法。
Accordion类是FitLayoutd类的子类,主要是创建类似outlook bar的效果,这是一个令人相当兴奋的功能,很多人估计早就盼望有这东西了。比使用Ext.ux.Accordion会方便很多。
CardLayoyt也是一个新增的类,但是没有例子,所以不知道主要效果是什么。
12、 tableLayout类
tableLayout类也是新增的类,主要目的是通过一个表格的形式划分区域。
其主要定义是通过“layoutConfig: {columns:3}”设置列数,通过“defaults: {frame:true, width:200, height: 200}”来设置每个Item的宽度和高度。每个item可通过类似td定义的方式设置设置格式,例如设置rowspan合并行,colspan合并列等。
Ext 2.0版要实现一个布局的主要代码就是通过layout设置布局的类型,然后定义items的面板对象,如果在内部再划分布局,实现1.1版NestedLayoutPanel的功能,只要在内部在面板内部再定义items就行了,比以前的代码书写方式更方便,更直观了。下面我们来分析一下complex.html这例子的定义。
例子首先创建了一个Ext.Viewport进行全界面布局,布局使用的是bordeLayout(layout:'border')。在界面中总共划分了north、south、wese、east和center五个大区域。
north区域使用了一个Ext.BoxComponent组件作为该区域的面板,它的html元件是id为“north”的div(el: 'north'),高度是32(height:32)。 new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),{
south区域使用了panel作为区域的面板,因为Viewprot的默认面板类型为panel,所以不用new Ext.Panel的方式创建面板,直接书写定义代码就行了。在代码中,定义了内容的html元件是id为“south”的div( contentEl: 'south'),带分隔控制条(split:true),初始高度是100(height: 100,不再使用以前的initialSize),移动改变的尺寸最小高度为100(minSize: 100),最大高度为200(maxSize: 200),允许折叠(collapsible: true),标题栏显示‘South’(title:'South'),内补丁为(margins:'0 0 0 0')。 }),{
region:'south',
contentEl: 'south',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'South',
margins:'0 0 0 0'
}, {
east区域同样也是用panel作为其面板,标题为“East Side”,允许折叠,有分隔控制条,初始宽度是225,最小宽度为175,最大宽度为400,内补丁为“0 5 0 0”。在该区域还划分了一个用fitLayout作为布局的区域(layout:'fit'),这里就不再象1.1版那样用NestedLayoutPanel再划分区域会出现的问题了。在fitLayout里放置了一个tabpanel的面板,面板的没有边,当前激活的tab是第2个(注意tab的index是从0开始的),tab标签放置在底部,该tab定义了两个标签页。 }, {
region:'east',
title: 'East Side',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:1,
tabPosition:'bottom',
items:[{
html:'<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll:true
},
new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
}
})]
})
},{
west区域也是用panel作为面板,html元件为“west-panel”,显示标题为“West”,有分隔控制条,初始宽度为200,最小宽度为175,最大宽度为400,允许折叠,内补丁为“0 0 0 5”,在区域内部又使用accordion布局划分两个区域。这个内部布局变动会显示动画(layoutConfig:{animate:true})。 },{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
title:'Navigation',
border:false,
iconCls:'nav'
},{
title:'Settings',
html:'<p>Some settings in here.</p>',
border:false,
iconCls:'settings'
}]
},
center区域和1.1版的一样,是必需使用。在这里center区域不再使用默认的panel作为面板了,而是使用tab面板作为其面板(new Ext.TabPanel)。在代码里定义了两个标签页,激活的是第1个标签页。 new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true
},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
}]
})
以上是我关于2.0版的布局类的一些理解和分析,因水平有限,难免会有错漏和偏差,希望大家原谅,多谢!