Ext学习5
来源:互联网 发布:声卡内部录音软件 编辑:程序博客网 时间:2024/06/07 23:43
EXtT的布局(Layout)
Layout的含意是划分好一些预定的区域。可用的区域分别有south, east, west, north,和center。每一个BorderLayout对象都提供这些区域但只有center要求必须使用的。如果你在单独一个区域中包含多个面板,你可通过NestedLayoutPanel 类套嵌到BorderLayout 实例中。
面板(Panel)是区域管理(region management)的另外一个组件。面板提供了这么一个地方,可为您的EXT器件(widget)、加载的HTML,嵌入的IFrames、或者是你日常在HTML页面上摆放的随便一样东西。NestedLayoutPanel也是一个面板,只不过用于链接多个BorderLayout的区域,其它的面板包括内容面板 ContentPanel,Grid面板 GridPanel,和Tree面板 TreePanel。
简单的例子
下面的layout包含 north, south, east, west,和center的区域,而且每个区域包含一个ContentPanel,各区域之间使用得了分隔条分割开。
var mainLayout = new Ext.BorderLayout(document.body,
{ north:
{ split: true, initialSize: 50 },
south:
{ split: true, initialSize: 50 },
east:
{ split: true, initialSize: 100},
west:
{ split: true, initialSize: 100 },
center:
{ }
});
这是一个非常基本的layout,只是分配了东南西北中间的区域、分隔条、设置一下初始尺寸,并最迟定义中间区域。本例中, BorderLayout被绑定到"document.body"这个DOM元素,其实BorderLayout还可以绑定到任何一个封闭的DOM元素。定义好BorderLayout之后,我们加入ContentPanel对象(基于本例)。
mainLayout.beginUpdate();
mainLayout.add('north',
new Ext.ContentPanel('north-div',
{ fitToFrame: true, closable: false })
);
mainLayout.add('south',
new Ext.ContentPanel('south-div',
{ fitToFrame: true, closable: false })
);
mainLayout.add('east',
new Ext.ContentPanel('east-div',
{ fitToFrame: true, closable: false })
);
mainLayout.add('west',
new Ext.ContentPanel('west-div',
{ fitToFrame: true, closable: false })
);
mainLayout.add('center',
new Ext.ContentPanel('center-div',
{ fitToFrame: true })
);
mainLayout.endUpdate();
当前的例子是将ContentPanel加入到所有区域中。由调用mainLayout.beginUpdate()开始。beginUpdate ()告诉BorderLayout对象在执行endUpate()方法之前,先不要对加入的对象排版布局。这样的好处是避免了ContentPanel有对象加入时,导致UI的刷新,改进了整体的用户体验。执行beginUpdate()之后,加入五个ContentPanel对象到区域。所有的 ContentPanel对象(除中间的那个外),都设置是可关闭的(closbale)。所有的ContentPanel对象也都设置为自动适配它们的父元素。最后执行endUpdate()渲染layout。
- Ext学习5
- Ext 学习
- Ext学习
- 学习 ext
- ext学习
- 学习EXT
- ext学习
- Ext 学习
- EXT学习
- Ext学习
- ext 学习
- ext学习
- Ext 学习
- EXT学习
- ExtJs学习系列(5)--Ext.TabPanel
- Ext学习笔记5-window窗体
- Ext学习笔记(5):DrawComponent使用 Demo
- ext 学习笔记
- ubuntu10.04下安装文件/目录比较和同步工具meld
- OnPreInit,OnInit ,OnInitComplete ,OnPreLoad ,Page_Load等执行顺序
- VC6.0调试小结
- Java 学习笔记09:Spring搭建MVC WEB项目
- ASP.NET初学--.NET framework 简介--感慨
- Ext学习5
- Linux下RPM软件包的安装及卸载
- Android之AsyncTask介绍
- linux程序和进程入门了解
- Jni sample --- Plasma
- SEO真的可以做的很科学
- java.lang.IllegalStateException: getOutputStream() has already been called for this response
- TLD特征选择
- ubuntu dash shell and bash shelll