- 浏览: 34343 次
- 性别:
- 来自: 广州
文章分类
最新评论
5.1、ExtJS的布局管理器及其继承关系
从图中可以看出:Ext.layout.ContainerLayout是ExtJS所有布局类的根,它也是容器组件的缺省布局类:在容器中一个接一个地安排组件的显示,通常也称它为流式布局。一个使用Ext.layout.ContainerLayout布局的简单例子:
var childPnl1 = { frame : true, height : 50, html : 'My First Child Panel', title : 'First children are fun' } var childPnl2 = { xtype : 'panel', width : 150, html : 'Second child', title : 'Second children have all the fun!' } var myWin = new Ext.Window({ height : 300, width : 300, title : 'A window with a container layout', autoScroll : true, items : [ childPnl1, childPnl2 ], tbar : [ { text : 'Add child', handler : function() { var numItems = myWin.items.getCount() + 1; myWin.add({ title : 'Child number ' + numItems, height : 60, frame : true, collapsible : true, collapsed : true, html : 'Yay, another child!' }); myWin.doLayout(); } } ] }); myWin.show();
运行结果:
<!--[endif]-->
在对ExtJS的容器进行布局时,使用Ext.Container的”layout”属性指定布局管理,使用Ext.Container的”layoutConfig”属性来对布局管理器的特定属性进行配置。各个布局管理器可以被配置的属性在ExtJS的API的各个布局管理器的Config Options中。
5.2、Ext.layout.AnchorLayout布局
Ext.layout.AnchorLayout与流式布局类似,只是在使用Ext.layout.AnchorLayout布局时可以在容器的items属性所指定的各个组件中使用:
anchor: “width, height”
来指定各个组件相对于容器的宽度和高度:%及整数类型的值均可以,其中”%”就是子组件相对于容器的百分比,而”整数值”就是子组件的大小等于容器的大小加上这个整数值。同时,对于使用Ext.layout.AnchorLayout进行布局管理的容器来说,可以在容器的配置属性中使用:
anchorSize: {width:宽度, height:高度},
来指定容器的布局宽度和布局高度,注意,这里的” 布局宽度和布局高度”与容器实际的宽度和高度无关。一个使用Ext.layout.AnchorLayout进行布局的例子:
var myWin = new Ext.Window({ height : 300, width : 300, layout : 'anchor', autoScroll : true, border : false, anchorSize : {width:400, height:300}, items : [ { title : 'Panel1', anchor : '100%, 25%', frame : true }, { title : 'Panel2', anchor : ‘100%, 50%', frame : true }, { title : 'Panel3', anchor : '50%, 25%', frame : true } ] }); myWin.show();
运行结果:
<!--[endif]-->
5.4、Ext.layout.FormLayout布局
FormLayout是AnchorLayout的子类,因此,AnchorLayout中相关配置属性,例如anchor、anchorSize同样适用于FormLayout。
使用FormLayout进行布局管理的容器可以在容器配置中使用如下这些FormLayout相关配置属性来对容器进行配置:
- hideLabels
- labelAlign
- labelPad
- labelSeparator
- labelWidth
这些配置属性的含义不言而喻。同时,对于采用FormLayout进行布局管理的容器,该容器中的组件则可以使用如下的FormLayout相关的属性进行配置:
- anchor
- clearCls
- fieldLabel
- hideLabel
- itemCls
- labelSeparator
- labelStyle
这些配置属性的含义不言而喻的。一个采用FormLayout布局的例子:
var myWin = new Ext.Window({ height : 220, width : 230, bodyStyle : 'padding: 5px', layout : 'form', labelWidth : 50, defaultType : 'field', items : [ { fieldLabel : 'Name', anchor : '-4' }, { fieldLabel : 'Age', width : 25 }, { xtype : 'combo', fieldLabel : 'Location', anchor : '-4', store : [ 'Here', 'There', 'Anywhere' ] }, { xtype : 'textarea', fieldLabel : 'Bio', anchor : '-4, -135' }, { xtype : 'panel', fieldLabel : ' ', labelSeparator : '', frame : true, title : 'Instructions', html : 'Please fill in the form', anchor : '-4', } ] }); myWin.show();
运行结果:
5.5、Ext.layout.AbsoluteLayout布局
采用绝对位置和大小对组件进行布局。在容器的组件中可以使用”x、y”属性来指明组件在容器中的位置,及可以使用”width、height”属性来指明组件的大小,如此而已。一个例子:
var myWin = new Ext.Window({ height : 300, width : 300, layout : 'absolute', autoScroll : true, id : 'myWin', border : false, items : [ { title : 'Panel1', x : 50, y : 50, height : 100, width : 100, html : 'x: 50, y:100', frame : true }, { title : 'Panel2', x : 90, y : 120, height : 75, width : 77, html : 'x: 90, y: 120', frame : true } ] }); myWin.show();
5.6、Ext.layout.FitLayout布局
容器的items中只有一个组件,并且这个组件将占据容器的全部显示空间,这就是就是fit布局。fit布局没有为容器或组件添加任何其他的配置属性。一个fit布局的例子:
var myWin = new Ext.Window({ height : 200, width : 200, layout : 'fit', autoScroll : true, border : false, items : [ { title : 'Panel1', html : 'I fit in my parent!', frame : true } ] }); myWin.show();
5.7、Ext.layout.AccordionLayout布局
AccordionLayout是FitLayout的直接子类。AccordionLayout布局以垂直堆叠的方式显示组件,并且,在任何一个时刻,只有一个item是展开的。一个AccordionLayout布局的例子:
var myWin = new Ext.Window({ height : 200, width : 300, border : false, title : 'A Window with an accordion layout', layout : 'accordion', layoutConfig : { animate : true }, items : [ { xtype : 'form', title : 'General info', bodyStyle : 'padding: 5px', defaultType : 'field', labelWidth : 50, items : [ { fieldLabel : 'Name', anchor : '-10', }, { xtype : 'numberfield', fieldLabel : 'Age', width : 30 }, { xtype : 'combo', fieldLabel : 'Location', anchor : '-10', store : [ 'Here', 'There', 'Anywhere' ] } ] }, { xtype : 'panel', autoEl : {}, title : 'Bio', layout : 'fit', items : { xtype : 'textarea', value : 'Tell us about yourself' } }, { title : 'Instructions', html : 'Please enter information.', tools : [ {id : 'gear'}, {id:'help'} ] } ] }); myWin.show();
运行实例:
发表评论
-
Panels、Windows和TabPanel
2011-08-16 09:40 15414、Panels、Windows和TabPanel ... -
Event、Component and Container
2011-08-16 09:35 14663、Event、Component and Cont ... -
Ext.Element
2011-08-15 13:44 18272、ExtJS的Heart—Ext.E ... -
Ext入门
2011-08-15 13:22 16911、ExtJS入门 1.1 ... -
Ext.decode 和 Ext.encode
2011-08-07 09:31 1678在述说这个例子之前,我假想 ... -
二级联动(省份城市)
2011-07-15 08:46 1149<!DOCTYPE HTML PUBLIC " ...
相关推荐
实现了一个MFC的盒子布局管理器类CBoxLayout
一个MFC布局管理的例子,类似于Java和Qt的布局管理功能
提供与Win32窗口句柄相关的界面的布局管理,可以兼容SDK、MFC、ATL等能获取窗口句柄的界面库。 模块只有一个头文件LayoutManager.h,移植非常方便。代码附带测试工程。 资源为原创作品,可以应用于任何产品,不收取...
自行设计程序,创建一个标题为“计算器”的框架。要求有菜单项,文本框、按钮等控件。采用BorderLayout或者GridLayout布局管理器。
DesignGridLayout 一个简单易用的Swing布局管理器。
-- 声明一个 LinearLayout 布局,并设置其属性 --> 9 10 android:text="@string/add" 11 android:id="@+id/Button01" 12 android:layout_width="wrap_content" 13 android:layout_height="wrap_content"> 14 ...
swing 组件的各种布局管理器,每一个都有实例,不明白的时候可以查查
用来做了一个后台管理平台的JQUERY UI布局
this.setTitle("使用流布局管理器"); //设置窗口名称 jp.setLayout(new FlowLayout()); //设置面板的布局为流布局 jp.add(jb1); //将按钮添加到面板中 jp.add(jb2); jp.add(jb3); jp.add...
公司最近要做一个标签管理,标签可删除,可添加,长按可以拖动。网上很多流式布局的列子,大部分都不能满足需求,大部分都不能拖动,有的可以拖动但是都是GridView式布局所以不能满足流式布局的基本要求,所以自己...
NULL 博文链接:https://alog2012.iteye.com/blog/1613294
NULL 博文链接:https://floger.iteye.com/blog/369448
FrameLayout 帧布局、框架布局 创建一个空白区域, 一个区域成为一帧 TableLayout 表格布局 采用 行, 列 形式管理子组件,添加TableRow 和 组件 就可以控制表格的行数和列数 GridLayout 网格布局 设置行列来装填控件 ...
一个用于MFC窗口布局管理器的资料,share
就是一个很简单的layout布局,在编程书上很常见的那种,还没有什么高档的技术,
此次系统的开发设计主要是是包括了三种权限的设计,一个是学生权限,一个是教师,还有一个是管理员,我们主要通过这个三方面来介绍系统的功能: 学生主要具有以下功能: 可以留言 可以修改个人信息 教师主要具有以下...
自己瞎写的一两个java布局的程序,完全是打发时间
因为经常做后台管理系统,时不时都要去下一些框架,然而有时候仅仅只是需要一个页面框架布局,却需要引入一大堆文件,于是,自己用css弹性盒子(flex)简单做了一个管理系统布局,代码简单,下载即用。不是说人家...
java是目前应用最为广泛的程序设计语言之一。在用java进行软件开发时,要想做出漂亮友好的系统界面,界面布局管理是...文章介绍了进行java GUI界面布局管理的三种方法,包括使用布局管理器、空布局及自定义布局管理器。
iOS 布局管理器 RKLayout ,RKLayout 是 iOS 上一个简单的布局管理器