|
锁定老帖子 主题：Extjs笔记一:窗口和对话框
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2012-02-29
窗口和对话框 1.窗口的基本使用:对应的类是Ext.Window,继承自panel,包含了浮动,
拖动,可关闭,最大化,最小化等特性. 2.窗口是分组经行管理的,可以对一组窗口进行操作,默认在组
Ext.WindowMgr中,窗口分组由类Ext.WindowGroup定义,包括
bringToFront,getActive,hideAll,sendToBack来对窗口经行操纵. 3.对话框,Ext.Msg,可以自定义对话框. 布局 1.布局就是容器组件中子元素的分布排列组合方式.Ext的所有容器组
件都支持布局操作,每一个容器都对应一个布局,布局负责管理容器组
件中子元素的排列组合以及渲染方式等.基类为
Ext.layout.ContainerLayout,其它布局都是继承类,Extjs中的容器组
件包含一个layout以及layoutConfig配置属性,这两个属性指定容器使
用的布局以及布局的详细配置信息,如果没有指定容器组件的layout,
则默认使用ContainerLayout作为布局,该布局只是把元素简单放到容
器中. Ext的一些容器都已经指定了所使用的布局,比如tabPanel使用的card
布局,FormPanel使用的form布局,GridPanel使用的column布局,我们在
使用这些容器的时候不能再指定另外的布局了. 2.Border布局 由Ext.layout.BorderLayout定义,名称为border,该布局把容器分成东
南西北中五个区域,分别由east,south,west,north,center来标识,往
容器中添加子元素的时候需要指定所在的位置. 3.column列布局 由Ext.layout.ColumnLayout类来定义,名称为column,该布局把整个容
器的组件看成是一列,然后往里面放入子元素的时候,可以通过在子元
素中指定使用的columnWidth或者width来指定子元素所占的列宽度,一
个使用的百分比,另外一个使用具体的数字.使用的时候可以混合使用. 4.fit布局 由Ext.layout.fitLayout类来定义,名称为fit,这是包含单个项布局的
基类,这种布局会在容器中自动铺开以填充整个容器,及时容器中指定
了多个面板,也只会渲染第一个面板. 5.Form布局 由类Ext.layout.FormLayout类来定义,名称为form,是一种专门用来管
理表单中输入字段的布局. 6.Accordion布局 由Ext.layout.Accordion类来定义,名称为accordion,表示可折叠的布
局,也就是说使用该布局的容器组件中的子元素是可折叠的形式. 7.Table布局 由类Ext.layout.TableLayout定义,名称为table,该布局负责把容器中的子元素按照类似于html标签布局.
下面附上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>布局</title> <link rel="Stylesheet" href="Ext/resources/css/ext-all.css"/> <script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="Ext/ext-all.js"></script> </head> <script type="text/javascript"> function fn(){ var panel=new Ext.Panel({ renderTo:"lifc", title:"lifc", width:600, height:500, layout:"column", items:[ {title:"面板一",width:300,height:400,html:"<h1>你好</h1>"}, {title:"面板一",columnWidth:0.5,html:"<h1>你好</h1>"}, {title:"面板一",columnWidth:0.5,html:"<h1>你好</h1>"}] }); } function fit(){ var panel=new Ext.Panel({ renderTo:"lifc", height:700, width:600, title:"fit 面板", layout:"fit", items:[{title:"第一个子元素",height:600,html:"<h1>这是第一个子元素</h1>"}, {title:"第二个子元素",height:100,html:"<h1>这是第二个子元素</h1>"}] }); } function form(){ new Ext.Panel({ renderTo:"lifc", title:"登录", layout:"form", height:400, width:300, hideLabels:false, labelAlign:"center", defaultType:"textfield", items:[ {fieldLabel:"请输入姓名",name:"name"}, {fieldLabel:"请输入年龄",name:"age"}, {fieldLabel:"请输入性别",name:"sex"}, ] }); } function accrodion(){ new Ext.Panel({ renderTo:"lifc", title:"层叠面板", layout:"accordion", layoutConfig:{animate:true}, height:900, width:600, items:[ {title:"子元素一",html:"我爱你"}, {title:"子元素二",html:"我爱你"}, {title:"子元素三",html:"我爱你"} ] }); }
function table(){ new Ext.Panel({ title:"table布局", applyTo:"lifc", height:500, width:400, layout:"table", layoutConfig:{columns:3}, items:[{title:"我是一",html:"你好",rowspan:2,height:150},{title:"我是二",html:"你好",colspan:2,height:50},{title:"我是三",html:"你好",height:100},{title:"我是四",html:"你好",height:100}] }); } Ext.onReady(table); </script> <body> <div id="lifc"></div> </body> </html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
浏览 2035 次
