版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
北风网项目培训进阶篇(3)-ExtJs中的Window对象与FormPanel详解2讲师：风舞烟ExtJs版国讯教育通用智能OA办公平台目录Ext.Window类Ext.Window类实例Ext.FormPanel类Ext.FormPanel类实例类Ext.Window
包：Ext定义的文件Window.js类全称：Ext.Window
继承自于：Ext.Panel说明：一种专用于程序中的“视窗”（window）的特殊面板。Window默认下是可拖动的draggable、浮动的窗体。窗体可以最大化到整个视图、恢复原来的大小，还可以最小化minimize。
Windows既可关联到Ext.WindowGroup或籍由Ext.WindowManager来管理，提供分组（grouping），活动（activation），置前/置后（tofront/back）或其它应用程序特定的功能。
缺省状态下，窗体都渲染到document.body。要强制constrain窗体以某个元素为依托就要使用renderTo方法。
例：//html代码
<div
id="win"
class="x-hidden"></div>//js代码
var
w=new
Ext.Window({
el:"win",//主体显示的html元素
width:300,
height:200,
title:"标题"
});
w.show();参数介绍：
因为前面已经介绍了panel组件，下面只介绍window组件的几个其他特别的配置参数//几个前面没有介绍的window自己的配置参数
1.closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口hide,关闭后，只是hidden窗口
2.closable:true在右上角显示小叉叉的关闭按钮，默认为true
3.constrain：true则强制此window控制在viewport，默认为false
4.modal:true为模式窗口，后面的内容都不能操作，默认为false
5.plain：//true则主体背景透明，false则主体有小差别的背景色，默认为false//需要显示下show（）方法,默认的窗口是可拖动的，可关闭的，可拖动大小的
w.show（）实例介绍1.嵌套了tabpanel的windowvar
w=new
Ext.Window({
contentEl:"win",
width:300,
height:200,
items:new
Ext.TabPanel({
activeTab:0,//当前标签为第1个tab（从0开始索引）
border:false,
items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口中"}]//TabPanel中的标签页，以后再深入讨论
}),
plain:true,//true则主体背景透明，false则主体有小差别的背景色，默认为false
title:"标题"
});
w.show();添加工具栏//
bbar:[{text:“确定”},{text:“取消”,handler:function(){w.close();}}],//bottom部
buttons:[{text:“确定”},{text:“取消”,handler:function(){w.close();}}],//footer部
buttonAlign:“center”,//footer部按钮排列位置,这里是中间
//
collapsible:true,//右上角的收缩按钮其他与Panel一样！类：Ext.form.FormPanel
包：Extform定义的文件：Form.js类全称：Ext.form.FormPanel
继承自于：Ext.Panel
//查看源代码便知，两种方法是一样的
Ext.form.FormPanel
=
Ext.FormPanel;实例1<!--html代码-->
<body>
<div
id="form1"></div>
</body>//js代码
var
form1
=
new
Ext.form.FormPanel({
width:350,
frame:true,//圆角和浅蓝色背景
renderTo:"form1",//呈现
title:"FormPanel",
bodyStyle:"padding:5px
5px
0",
items:[
{
fieldLabel:"UserName",//文本框标题
xtype:"textfield",//表单文本框
name:"user",
id:"user",
width:200
},{
fieldLabel:"PassWord",
xtype:"textfield",
name:"pass",
id:"pass",
width:200
}
],
buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件！");}}]
});关于inputType,参数如下：//input的常用几种类型radio
check
text(默认)
file
password等等关于FormPanel的配置参数，请主要参考panel的参数，这里列举另外两个：1.labelAlign:fieldlabel的排列位置，默认为"left"，其他两个枚举值是"center","right"
2.labelWidth:fieldlabel的占位宽
3.method:"get"或"post"
4.url："提交的地址"
5.submit:提交函数
//稍后我们一起详细分析
实例2.FormPanel的fieldset应用//把前面代码重写items属性
items:[
{
xtype:'fieldset',
title:
'个人信息',
collapsible:
true,
autoHeight:true,
width:330,
defaults:
{width:
150},
defaultType:
'textfield',items
:[{
fieldLabel:
'爱好',
name:
'hobby',
value:
''
},{
xtype:"combo",
name:
'sex',
store:["男","女","保密"],//数据源为一数组
fieldLabel:"性别",
emptyText:'请选择性别.'
}]
}
]关于xtype的类型，在extjs的form表单（其他的请参考api）中已经定义的有：Form
components
---------------------------------------
form
Ext.FormPanel
checkbox
Ext.form.Checkbox
combo
Ext.form.ComboBox
datefield
Ext.form.DateField
field
Ext.form.Field
fieldset
Ext.form.FieldSet
hidden
Ext.form.Hidden
htmleditor
Ext.form.HtmlEditor
label
Ext.form.Label
numberfield
Ext.form.NumberField
radio
Ext.form.Radio
textarea
Ext.form.TextArea
textfield
Ext.form.TextField
timefield
Ext.form.TimeField
trigger
Ext.form.TriggerField实例3:可选的fieldset实例
//因为觉得这个参数特别，特举一例以说明
1.checkboxToggle:true//true则呈现一个带checkbox的fieldset，选中则展开，否则相反，默认为false
2.checkboxName:string//当上面为true时，作为checkbox的name，方便表单操作js核心代码贴出来//在上一节的基础代码的items里面添加如下配置
{
xtype:"fieldset",
checkboxToggle:true,//关键参数，其他和以前的一样
checkboxName:"dfdf",
title:"选填信息",
defaultType:'textfield',
width:330,
autoHeight:true,//使自适应展开排版
items:[{
fieldLabel:“UserName”,
name:“user”,
anchor:“95%”//330px-labelWidth剩下的宽度的95%，留下5%作为后面提到的验证错误提示
},
{
fieldLabel:"PassWord",
inputType:"password",//密码文本
name:"pass",
anchor:"95%"
}]
}实例4.表单验证实例（空验证，密码确认验证，email验证）
我们可以用单独的js写表单验证，但是extjs已经为我们想到了（自己单独写反而不方便）。
在验证之前，我不得不提两个小知识点：//大家在很多的extjs代码中都看到了这两个，他们都起提示作用的
Ext.QuickTips.init();//支持tips提示
Ext.form.Ftotype.msgTarget='side';//提示的方式，枚举值为"qtip","title","under","side",id(元素id)
//side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示，其他的我就不介绍了，可自行验证
//大家可以分别去掉这两行代码，看效果就会明白他们的作用，（放在onReady的function（）{}中）4-1.我们看一个最简单的例子：空验证//空验证的两个参数
1.allowBlank:false//false则不能为空，默认为true
2.blankText:string//当为空时的错误提示信息js代码为：var
form1
=
new
Ext.form.FormPanel({
width:350,
frame:true,
renderTo:"form1",
labelWidth:80,
title:"FormPanel",
bodyStyle:"padding:5px
5px
0",
defaults:{width:150,xtype:"textfield",inputType:"password"},
items:[
{fieldLabel:"不能为空",
allowBlank:false,//不允许为空
blankText:"不能为空，请填写",//错误提示信息，默认为This
field
is
required!
id:"blanktest",
anchor:"90%"
}
]
});4-2:用vtype格式进行简单的验证。
在此举邮件验证的例子，重写上面代码的items配置:items:[
{fieldLabel:"不能为空",
vtype:"email",//email格式验证
vtypeText:"不是有效的邮箱地址",//
id:"blanktest",
anchor:"90%"
}你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证：//form验证中vtype的默认支持类型
1.alpha
//只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum//只能输入字母和数字，无法输入其他
3.email//email验证，要求的格式是“langsin@”
4.url//url格式验证，要求的格式类似于
4-3.确认密码验证（高级自定义验证）
前面的验证都是extjs已经提供的验证，我们也可以自定义验证函数，比上面要复杂点了。我们一起做一个密码确认的例子。我们修改前面的代码：//先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字）
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val指这里的文本框值，field指这个文本框组件，大家要明白这个意思
if(field.confirmTo){//confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
var
pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
return
(val==pwd.getValue());
}
return
true;
}
});//配置items参数
items:[{fieldLabel:"密码",
id:"pass1",
anchor:"90%"
},{
fieldLabel:"确认密码",
id:"pass2",
vtype:"password",//自定义的验证类型
vtypeText:"两次密码不一致！",
confirmTo:"pass1",//要比较的另外一个的组件的id
anchor:"90%"
}ExtJs中其他组件示例Checkbox简单示例js代码：Ext.onReady(function(){
//Ext.QuickTips.init();
var
myform=new
Ext.FormPanel({
frame:true,
width:330,
layout:"form",
labelWidth:30,
title:"checkbox简单示例",
labelAlign:"left",
renderTo:Ext.getBody(),
items:[{
xtype:"panel",
layout:"column",//也可以是table,实现多列布局
fieldLabel:'爱好',
isFormField:true,//非常重要,否则panel默认不显示fieldLabelitems:[{
columnWidth:.5,//宽度为50%
xtype:"checkbox",
boxLabel:"足球",//显示在复选框右边的文字
name:""
},{
columnWidth:.5,
xtype:"checkbox",
boxLabel:"篮球",
name:""
}]
}]
});
});//其他几个参数
1.checked：true//true则选中，默认为false
2.name:"**"//name值
3.value:""//初始化值，默认为undefineradio简单示例
代码：//基本同上，不做过多解释
Ext.onReady(function(){
Ext.QuickTips.init();
var
myform=new
Ext.FormPanel({
frame:true,
width:330,
layout:"form",
labelWidth:30,
title:"radio简单示例",
labelAlign:"left",
renderTo:Ext.getBody(),
items:[{
xtype:"panel",
layout:"column",
fieldLabel:'性别',
isFormField:true,
items:[{
columnWidth:.5,
xtype:"radio",
boxLabel:"男",
name:"sex"
//inputValue
},{
columnWidth:.5,
checked:true,
xtype:"radio",
boxLabel:"女",
name:"sex"
}]
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年智能交通系统专业资格考试试卷及答案
- 2025年职业生涯规划与发展考试试题及答案
- 2025年特殊教育服务与支持考试试题及答案
- 2025年广告与市场传播专业考生模拟考试试题及答案
- 2025年互联网金融专业试卷及答案
- 2025年公共关系与危机管理考试题及答案
- 2025年法律硕士考试试题及答案
- 2025年护士资格认证考试试题及答案
- 养殖合同协议书找谁弄
- 2025年多协议通信适配器合作协议书
- 《齐齐哈尔烤肉制作工艺与服务规范》（征求意见稿）
- 垃圾焚烧发电厂污水处理检修规程
- 个人借条电子版模板
- 国宝大熊猫的资料三年级下册
- 护理文书书写质量监管制度
- 2023年广东省中考物理试卷分析
- 2023中小学德育工作指南德育工作实施方案
- 团体体检报告格式模板范文
- 汉heidenhain itnc用户手册探测循环
- 学习领会《在二十届中央政治局第四次集体学习时的讲话》心得
- 水稻联合收割机使用与维护
评论
0/150
提交评论