Extjs札记一:窗口和对话框
日期：2014-05-16 浏览次数：20348 次
窗口和对话框
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,
?
