关闭

Ext2.0布局类初探

7486人阅读 评论(6) 收藏 举报

Ext2.0正式版虽然还没出来,但是官网上的例程还是令人兴奋不已。内存泄漏的问题应该是解决了,布局类更新了,增加了新的东西,grid的功能更加强大,tabs也增加了循环按钮,还增加了类似delphi action manageraction类,在反映速度上也有一定的提升,这些新功能确实很令人振奋,可惜正式版还没出来,API也还没出来,所以想立刻使用2.0版做开发的,会有一定的困难。本文的目的就是和大家一起探讨一下2.0版的布局类,希望在API没有出来之前对大家的开发有所帮助,还有就是希望大家提供一些反馈意见,以便完善这篇文章。多谢!

Ext2.0版的布局类,最大的改动是:

1、           取消了内容面板contentPanel类,代替的是panel类的。panel类中,会根据layout的定义不同自动生成布局样式,这样就不需要自己再去定义布局了,只要在panel定义中加入布局的定义就可以实现布局了。panel类派生出formpanelgirdpaneltabpaneltreepanel等子类,各子类中已根据自己的需要固定了不同的布局类型,例如在创建formpanel时会创建formlayout

2、           增加Container类,并派生出viewpoint类作为全局布局的接口。

3、           取消了layoutManger类,增加了ContainerLayout类,而borderLayout类的父类也修改为ContainerLayout

4、           BasicLayoutRegion类也取消了,因此它的子类LayoutRegion以及LayoutRegion类的子类SplitLayoutRegion都取消了。代替的是在borderLayout类下增加了Region类和SplitRegion类。

5、           在区域内再划分区域的NestedLayoutPanel类也根据框架的改变而取消了。至于如何再划分区域,请继续阅读本文。

6、           增加了AccordianLayoutAnchorLayoutCardLayoutCoulmnLayoutFitLayoutFormLayoutTableLayout等新的类。

7、           原有的用contentPanel可以做出的tab效果,现在则需要使用tabpanel实现。

随着类的继承关系的改变,布局的创建方法也做了很大的变动。我的看法是做这样大的框架的修改主要原因解决内存泄漏的问题。

我们先来了解一下新的布局类的继承关系:

 

从图中我们可以看出Layout类独立出来了,不再象1.1版那样继承自Observable类了。估计这样修改是未来避免内存泄漏的(猜的,水平有限,所以请多见谅)。

下面我们来看看各个类的情况:

1、Observable

Observable类和1.1版的相同,没有修改,是一个抽象基类,为发布事件提供一个公共接口,其子类可通过addEvents方法增加事件。API可以直接参考1.1API

 

2、Component

Component类和1.1版的相同,没有修改,是Ext组件的主要基类。API可以直接参考1.1API

 

3、BoxComponent

BoxComponent类和1.1版的相同,没有改变,是需要使用盒子容器的可视化Ext组件的基类。API可以直接参考1.1API

 

4、Container

Container类是新增加的一个基类。其主要作用是管理容器里的布局对象,负责布局对象的创建与摧毁。它通过一个JSON结构(Ext.Container.LAYOUTS={})来保存布局对象,通过layout属性值和itemsJSON定义自动创建这些布局对象,并通过一个JSON结构记录这些布局对象,这样就可在面板对象生命周期内对其进行管理,防止布局中面板关闭时发生内存泄漏。Container类设置了布局中默认面板为panel,如果需要使用其它panel,则需要在items中进行定义。

 

5、Viewport

Viewport类也是新增的一个类,是Container类的子类。Viewport类其实就是将页面body作为一个Ext对象,然后通过该对象管理body上的布局对象。Viewprot类的默认面板是panel面板,因为panel并没有指定特定的布局,所以要通过layout属性指定布局,并在items中定义的面板对象定义中加入该布局的定义。Layout属性可选的范围值为containeranchorformbordercolumnfitaccordioncardtable

 

6、Panel

Panel类是新增的面板基类。其基本的属性、方法和事件与1.1版的contentPanel相似,API可参考contentPanelAPIPanel类和contentPanel类最大的不同是可以根据layout属性自动生成相应的布局,而不是和1.1版那样定义布局,然后加入contentPanel对象。

panel类中增加了一个很好的功能,就是工具栏定义不再是contentPaneltoolbar了,而是划分成了tbarbbartbar就是top bar,在面板顶部的工具栏,babrbottom 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.1NestedLayoutPanel的功能,只要在内部在面板内部再定义items就行了,比以前的代码书写方式更方便,更直观了。下面我们来分析一下complex.html这例子的定义。

    例子首先创建了一个Ext.Viewport进行全界面布局,布局使用的是bordeLayoutlayout:'border')。在界面中总共划分了northsouthweseeastcenter五个大区域。

   north区域使用了一个Ext.BoxComponent组件作为该区域的面板,它的html元件是id为“north”的divel: 'north'),高度是32height: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),初始高度是100height: 100,不再使用以前的initialSize),移动改变的尺寸最小高度为100minSize: 100),最大高度为200maxSize: 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个(注意tabindex是从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版的布局类的一些理解和分析,因水平有限,难免会有错漏和偏差,希望大家原谅,多谢!

 

 
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

ext2.0中layout布局(6)

1.ExtJS一共包含十种布局,常用的布局有border、column、fit、form、card、tabel等布局 column布局: Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", width:4...
  • u011518709
  • u011518709
  • 2013-10-25 16:46
  • 867

修改Ext.ux.GroupTabPanel让它支持延迟渲染

在Ext JS包示例目录的ux目录下有一个Ext.ux.GroupTabPanel组件,可实现左侧分组显示菜单。这个组件有个小问题,就是在第一次渲染的时候,会把所有标签页都渲染了。这对有很多标签页的应用程序很不利,第一渲染的时间成本太高。在Ext.ux.GroupTabPanel内部是使用卡片(Ca...
  • tianxiaode
  • tianxiaode
  • 2013-04-02 14:34
  • 4206

QT中的布局类

给你的窗口部件一个好的布局的最好的方法是使用这些布局窗口部件:QHBox,QVBox和QGrid。一个布局窗口部件自已自动地把它们的子窗口部件按照它们被构造地顺序进行布局。为了生成更复杂的布局,你可以嵌入一个布局窗口部件到其它的。 1 一个QHBox把它的子窗口部件从左到右排列在一个水平的行中...
  • qq_27312943
  • qq_27312943
  • 2016-04-06 20:41
  • 468

C++对象的内存布局

本文介绍一个C++ struct/class在内存中的布局是什么样的,包括数据成员和方法成员,静态成员,非静态成员,虚拟成员在内存中的位置;本文不涉及(多)继承情况下对象内存布局的细节。
  • giantpoplar
  • giantpoplar
  • 2015-08-14 12:16
  • 2102

Android布局的继承层次

View类 1、View代表了用户界面的一块可绘制的区域。每个View在屏幕上占据一个矩形区域。在这个区域内,View对象负责图形绘制和事件处理。 2、View是小控件widgets和ViewGroup的父类。  ViewGroup类 1、ViewGroup对象是一...
  • blueangle17
  • blueangle17
  • 2014-05-16 18:13
  • 1011

Android百分比布局初探

标题:Android百分比布局初探 依赖库:——com.android.support:percent 实现原理: 在这个包里面有两个新的容器类 1、PercentRelativeLayout 2、PercentFrameLayout 在此看来,这两个类很显然是继承自 FrameLay...
  • u010046908
  • u010046908
  • 2015-09-29 09:56
  • 553

Bootstrap的常用类(CSS和布局组件)的总结

Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签网格选项row :行col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数])col-*-offset-* :列偏移(第一个*和上面一样,第二...
  • u012519228
  • u012519228
  • 2016-05-30 13:23
  • 5133

初探页面布局

学习网页布局,参考网站:http://www.xjtj.gov.cn/,第一次学习,理解不对之处还望指教。     前记:第一次写div+css可能是2年前刚毕业的时候,现在2年后再回头来看看div+css,还是太菜,但是个不错的开始,因为成长还在继续。  ...
  • shi_longyan
  • shi_longyan
  • 2014-12-05 10:28
  • 627

MongoDB初探系列之一:MongoDB安装及建议配置

想必第一次听说MongoDB的各位小伙伴,一定是听到他的诸多很N的地方才决定来学习一下这个东东的。不管你是出于什么目的开始踏上这段学习之旅,但是同样作为菜鸟的我很乐意和各位一起成长。废话不多说了,各种简介在这里就不写了,只留下干货。想看简介的各位可以找度娘自行解决。 1、第一次接触新东西,当然要去...
  • zhaoguoshuai91
  • zhaoguoshuai91
  • 2015-07-11 21:26
  • 976

概率DP入门题

概率dp入门题目
  • u013790563
  • u013790563
  • 2014-10-20 18:18
  • 755
    个人资料
    • 访问:1573487次
    • 积分:17838
    • 等级:
    • 排名:第618名
    • 原创:164篇
    • 转载:28篇
    • 译文:101篇
    • 评论:2192条
    交流QQ群
    391747779
    193238033
    博客专栏
    《Ext JS 6.2实战》
    《Ext JS权威指南》
    《Sencha Touch实战》
    《Ext JS 4.2 实战》
    文章分类
    最新评论