博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

ext js 布局心得

Posted on 2011-11-08 22:44  linFen  阅读(1032)  评论(0编辑  收藏  举报

首先先上一个Ext布局类型的继承图:

Ext.layout.ContainerLayout

Ext.layout.AnchorLayout

Ext.layout.AbsoluteLayout

Ext.layout.FormLayout

Ext.layout.BorderLayout

Ext.layout.ColumnLayout

Ext.layout.FitLayout

Ext.layout.Accordion

Ext.layout.CardLayout

         Ext.layout.TableLayout

         再上一个Ext.Container及其子类继承图:

Ext.Container

         Ext.Viewport

         Ext.Panel

                   Ext.TabPanel

                   Ext.Tip

                   Ext.Window

                   Ext.form.FieldSet

                   Ext.form.FormPanel

                   Ext.tree.TreePanel

                   Ext.grid.GridPanel

                            Ext.grid.EditorGridPanel

                            Ext.grid.PropertyGrid

         以上两棵继承树结合在一起便构成了EXT中完成的布局系统。只要Container子类都可以使用layout对内部items进行布局。

         下面是一些分类整理:

FitLayout

         可以自动适应页面大小变化,填充整个页面。

注意几点:

1,使用了laytou:’fit’组件的items只能放一个子组件,如果放了多了子组件,那么也只有第一个子组件会起作用。

2items中子组件里不能使用autoHeight:true参数,这个参数会重新计算子组件的高度,使得FitLayout失效,最后得到的结构将无法填充整个页面。

BorderLayout

         它将整个布局区域分为东、西、南、北、中五个部分,除了中间区域以外其他区域都是可以省略的。如果items缺少了region:’center’就会报错,程序中断子组件页面上无法显示。

其中northsouth分为位于页面的最上方和最下方,只能设置高度;同理westeast只能设置宽度;center的大小是在其他四个部分设置好以后自动计算出来的,唯一不可省略的部分。

Accordion

         将与布局有关的配置项写在layoutConfig中,随后在进行布局时会自动赋给对应的layout实例,并产生作用。

         titleCollapse:默认true,单击标题就可以折叠子面板;如果设置为false,就只能够单击标题右边的图标折叠子面板。

         animate:展开和折叠时是否使用动画效果。

         activeontop:默认false,执行展开和折叠操作后,子面板的顺序不会改变;如果设置为true,展开的子面板总是放在最上面。

CardLayout

         这种布局可以看作是一叠卡片,可以把中间的卡片抽出来放到最上面,可是每次只能看到一张卡片。这种布局一般用来实现操作向导。

AnchorLayout

         既可以为items中每个组件指定与总体布局大小的差值,也可以设置一个比例使子组件可以根据整体自行计算本身的大小。提供三种配置方式:

         1 使用百分比设置组件组件占整体长宽比例。

         2 直接设置与右侧和底部的边距。

         3 Side方式,前提是父组件和子组件都没有设置好width,heightanchorSize属性。AnchorLayout会记录布局整体和子组件在大小上的差值,为以后的调整布局提供依据。此方法很少用到。

AbsoluteLayout

         此布局继承自AnchorLayout,解决了Anchor不能对组件进行直接绝对定位的问题。

FormLayout

         此布局也继承自AnchorLayoutExt.form.FormPanel使用它作为默认的布局方式。

ColumnLayout

         Items中每个子组件的columnWidth参数是01之间的小数,表示每个组件在整体中所占的百分比,总和是1,否则页面会出现没有填满或者混论的情况。

TableLayout

         此布局并没有特殊功能,只是提供了一种将传统的表格布局方式与Ext布局方式相结合的方法。