Extjs中常用表单介绍与应用


Posted in Javascript onJune 07, 2010

目标:
知道表单面板如何创建
了解表单面板中xtype的类型的应用
知道表单面板如何验证,绑定,取值
综合应用表单面板(玩转它)
内容:
首先我们要理解的是FormPanel也是继承panel组件的。所以它有着panel的属性
要创建一个表单面板其实很简单 var MyformPanel=new Ext.form.formpanel();
表单面板和面板一样只是作为一个容器出现的,需要我们使用items加入各控件元素来丰富我们的表单面板,
defaults:{},此属性提取了items中各组件项的共同属性

对于xtype:在表单面板中非常有用,没有必要每次都用new 来创建一个组件,它定义了组件的类型,同时让组件在加载后渲染。

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

对于表单验证,Extjs提供了非常强大的支持,在后面的实例中大家可以发现

实例分析讲解:

一,创建表单面板

function Read2() { 
Ext.QuickTips.init(); 
var MyForm=new Ext.form.FormPanel({ 
title:'表单应用', 
width:300, 
x:300, 
y:50, 
floating:true, 
tools:[{id:'close'}], 
frame:true, 
bodyStyle:'padding:10px 0px 1px 1px', 
labelSeparator:':', 
labelAlign:'right', 
renderTo:Ext.getBody(),//为什么这里不可以用'id1' 
defaults:{xtype:'textfield',width:150,allowBlank:false,msgTarget:'side'},//提取共同属性 
items:[ 
{ 
fieldLabel:'用户名称', 
name:'username', 
id:'user', 
emptyText:'请输入用户名', 
blankText:'请输入用户名' 
}, 
{ 
fieldLabel:'用户密码', 
name:'userpassword', 
id:'password', 
inputType:'password',//它还包括 radiocheck text(默认) filepassword等等 
blankText:'请输入密码' } 
], 
buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件!");}}], 
buttonAlign:'center' 
}); 
}

Extjs中常用表单介绍与应用

注意:renderTo:'id1' 这个时候表单面板显示失效 想来很久不知道是怎么一回事

二,基本表单组建的应用于说明 (通常情况下我们都是利用xtype来说明 items中组件的类型)
fieldset的应用

function Read3() { 
var MyformPanel=new Ext.form.FormPanel({ 
title:'fieldset的应用', 
renderTo:Ext.getBody(), 
frame:true, 
width:350, 
x:400, 
y:50, 
floating:true, 
items:[ 
{ 
xtype:'fieldset', 
title:'用户信息', 
collapsible:true, 
autoHeight:true, 
autoWidth:true, 
defaults:{width:150,allowBlank:false,xtype:'textfield'}, 
items:[ 
{ 
fieldLabel:'用户名称', 
emptyText:'陈建强', 
blankText:'请输入用户名称' 
}, 
{ 
fieldLabel:'用户密码', 
inputType:'password', 
blankText:'请输入用户密码' 
} 
] 
} 
] 
}); 
}

Extjs中常用表单介绍与应用 
表单面板中基本组件的介绍
function Read3() { 
2 Ext.QuickTips.init();//初始化tips 
3 Ext.apply(Ext.form.VTypes,{ 
4 password:function(val,field){//val指这里的文本框值,field指这个文本框组件,大家要明白这个意思 
5 if(field.confirmTo){//confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值 
6 var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值 
7 return (val==pwd.getValue()); 
8 } 
9 return true; 
} 
}); 
var MyformPanel=new Ext.form.FormPanel({ 
title:'fieldset的应用', 
renderTo:Ext.getBody(), 
frame:true, 
width:550, 
x:400, 
y:50, 
draggable:{ 
insertProxy: false,//拖动时不虚线显示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//获取拖动时panel的坐标 
var s = this.panel.getEl().shadow; 
if (s){ 
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
} 
}, 
endDrag : function(e){ 
this.panel.setPosition(this.x, this.y);//移动到最终位置 
} 
}, 
plain:true, 
floating:true, 
items:[ 
{ 
xtype:'fieldset', 
checkboxToggle:true, 
checkboxName:'user', 
title:'用户信息', 
collapsible:true, 
autoHeight:true, 
autoWidth:true, 
labelSeparator:':', 
labelAlign:'right', 
labelWidth:70, 
defaults:{width:150,allowBlank:false,xtype:'textfield'}, 
items:[ 
{ 
fieldLabel:'用户名称', 
emptyText:'陈建强', 
id:'user', 
name:'userName', 
blankText:'请输入用户名称', 
anchor:'95%' 
}, 
{ 
fieldLabel:'用户密码', 
inputType:'password',// password text checkbox rodio 
id:'password', 
name:'userpassword', 
value:'0717', 
blankText:'请输入用户密码', 
anchor:'95%' 
}, 
{ 
fieldLabel:'确认密码', 
id:'password2', 
name:'userpassword2', 
inputType:'password', 
vtype:'password', 
vtypeText:'两次输入的密码不一致', 
confirmTo:'userpassword', 
anchor:'95%' 
}, 
{ 
xtype:"datefield", 
fieldLabel:"出生日期", 
anchor:"95%" 
}, 
{ 
fieldLabel:'我的博客', 
value:'http://www.cnblogs.com/chenjq0717', 
vtype:'url', 
vtypeText:'不是有效的url', 
id1:'myblog', 
name:'myblog', 
anchor:'95%' 
}, 
{ 
//alpha 只能输入字母,无法输入其他(如数字,特殊符号等) 
//2.alphanum//只能输入字母和数字,无法输入其他 
//3.email//email验证,要求的格式是"langsin@gmail.com" 
//4.url//url格式验证,要求的格式是http://www.langsin.com 
fieldLabel:'电子邮箱', 
vtype:'email', 
vtypeText:'不是有效的邮箱', 
name:'email', 
anchor:'95%' 
}, 
{ 
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" 
}] 
}, 
{ 
xtype:"panel", 
layout:"column",//也可以是table,实现多列布局 
fieldLabel:'爱好', 
isFormField:true,//非常重要,否则panel默认不显示fieldLabel 
items:[{ 
columnWidth:.5,//宽度为50% 
xtype:"checkbox", 
boxLabel:"足球",//显示在复选框右边的文字 
name:"" 
},{ 
columnWidth:.5, 
xtype:"checkbox", 
boxLabel:"篮球", 
name:"" 
}] 
}, 
{ 
xtype:'combo', 
fieldLabel:'用户家乡', 
name:'family', 
store:<%=getfamilyData() %>,//调用后台变量 
emptyText:'请选择家乡' 
}, 
{ 
xtype:"htmleditor", 
id:"myinfo", 
fieldLabel:"个人说明", 
anchor:"99%" 
} 
] 
} 
] 
}); 
}

Extjs中常用表单介绍与应用
表单数据提交到服务器 submit

submit: function(){
this.getEl().dom.action = 'MyPages/GetForm.aspx', //提交后转向的页面
this.getEl().dom.method='POST',//提交方式
this.getEl().dom.submit();//执行提交
},

添加提交按钮

buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]

添加提交方法:

function login(){
MyformPanel.form.submit();//提交
}
function reset(){
MyformPanel.form.reset();//取消
}

Extjs中常用表单介绍与应用 
本课代码:
表单面板的综合应用

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext7.aspx.cs" Inherits="EXT1.Ext7" %> 
2 
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
4 
5 <html xmlns="http://www.w3.org/1999/xhtml" > 
6 <head runat="server"> 
7 <title>第七课,Extjs中常用表单介绍与应用</title> 
8 <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
9 <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script> 
<script src="ext-3.2.0/ext-all.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function Read1() { 
Ext.QuickTips.init(); 
var MyForm=new Ext.form.FormPanel({ 
title:'表单应用', 
width:300, 
height:200, 
x:300, 
y:50, 
floating:true, 
tools:[{id:'close'}], 
draggable:{ 
insertProxy: false,//拖动时不虚线显示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//获取拖动时panel的坐标 
var s = this.panel.getEl().shadow; 
if (s){ 
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
} 
}, 
endDrag : function(e){ 
this.panel.setPosition(this.x, this.y);//移动到最终位置 
} 
}, 
frame:true, 
labelSeparator:':', 
labelAlign:'right', 
renderTo:Ext.getBody(),//为什么这里不可以用'id1' 
items:[ 
new Ext.form.TextField({ 
fieldLabel:'用户名称', 
allowBlank:false, 
blankText:'请输入用户名', 
msgTarget:'side' 
}), 
new Ext.form.TextField({ 
fieldLabel:'用户密码', 
allowBlank:false, 
inputType:'password', 
blankText:'请输入密码', 
msgTarget:'side' 
}) 
] 
}); 
} 
function Read2() { 
Ext.QuickTips.init(); 
var MyForm=new Ext.form.FormPanel({ 
title:'表单应用', 
width:300, 
x:300, 
y:50, 
floating:true, 
tools:[{id:'close'}], 
frame:true, 
bodyStyle:'padding:10px 0px 1px 1px', 
labelSeparator:':', 
labelAlign:'right', 
draggable:{ 
insertProxy: false,//拖动时不虚线显示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//获取拖动时panel的坐标 
var s = this.panel.getEl().shadow; 
if (s){ 
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
} 
}, 
endDrag : function(e){ 
this.panel.setPosition(this.x, this.y);//移动到最终位置 
} 
}, 
renderTo:Ext.getBody(),//为什么这里不可以用'id1' 
defaults:{xtype:'textfield',width:150,allowBlank:false,msgTarget:'side'},//提取共同属性 
items:[ 
{ 
fieldLabel:'用户名称', 
name:'username', 
id:'user', 
emptyText:'请输入用户名', 
blankText:'请输入用户名' 
}, 
{ 
fieldLabel:'用户密码', 
name:'userpassword', 
id:'password', 
inputType:'password', 
blankText:'请输入密码' 
} 
], 
buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件!");}}], 
buttonAlign:'center' 
}); 
} 
function Read3() { 
Ext.QuickTips.init();//初始化tips 
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; 
} 
}); 
var MyformPanel=new Ext.form.FormPanel({ 
title:'fieldset的应用', 
renderTo:Ext.getBody(), 
frame:true, 
width:550, 
x:400, 
y:50, 
draggable:{ 
insertProxy: false,//拖动时不虚线显示原始位置 
onDrag : function(e){ 
var pel = this.proxy.getEl(); 
this.x = pel.getLeft(true); 
this.y = pel.getTop(true);//获取拖动时panel的坐标 
var s = this.panel.getEl().shadow; 
if (s){ 
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
} 
}, 
endDrag : function(e){ 
this.panel.setPosition(this.x, this.y);//移动到最终位置 
} 
}, 
submit: function(){ 
this.getEl().dom.action = 'MyPages/GetForm.aspx', 
this.getEl().dom.method='POST', 
this.getEl().dom.submit(); 
}, 
plain:true, 
floating:true, 
items:[ 
{ 
xtype:'fieldset', 
checkboxToggle:true, 
checkboxName:'user', 
title:'用户信息', 
collapsible:true, 
autoHeight:true, 
autoWidth:true, 
labelSeparator:':', 
labelAlign:'right', 
labelWidth:70, 
defaults:{width:150,allowBlank:false,xtype:'textfield'}, 
items:[ 
{ 
fieldLabel:'用户名称', 
//emptyText:'陈建强', 
id:'user', 
name:'userName', 
blankText:'请输入用户名称', 
anchor:'95%' 
}, 
{ 
fieldLabel:'用户密码', 
inputType:'password',// password text checkbox rodio 
id:'password', 
name:'userpassword', 
value:'0717', 
blankText:'请输入用户密码', 
anchor:'95%' 
}, 
{ 
fieldLabel:'确认密码', 
id:'password2', 
name:'userpassword2', 
inputType:'password', 
vtype:'password', 
vtypeText:'两次输入的密码不一致', 
confirmTo:'userpassword', 
anchor:'95%' 
}, 
{ 
xtype:"datefield", 
fieldLabel:"出生日期", 
anchor:"95%" 
}, 
{ 
fieldLabel:'我的博客', 
value:'http://www.cnblogs.com/chenjq0717', 
vtype:'url', 
vtypeText:'不是有效的url', 
id1:'myblog', 
name:'myblog', 
anchor:'95%' 
}, 
{ 
//alpha 只能输入字母,无法输入其他(如数字,特殊符号等) 
//2.alphanum//只能输入字母和数字,无法输入其他 
//3.email//email验证,要求的格式是"langsin@gmail.com" 
//4.url//url格式验证,要求的格式是http://www.langsin.com 
fieldLabel:'电子邮箱', 
vtype:'email', 
vtypeText:'不是有效的邮箱', 
name:'email', 
anchor:'95%' 
}, 
{ 
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" 
}] 
}, 
{ 
xtype:"panel", 
layout:"column",//也可以是table,实现多列布局 
fieldLabel:'爱好', 
isFormField:true,//非常重要,否则panel默认不显示fieldLabel 
items:[{ 
columnWidth:.5,//宽度为50% 
xtype:"checkbox", 
boxLabel:"足球",//显示在复选框右边的文字 
name:"" 
},{ 
columnWidth:.5, 
xtype:"checkbox", 
boxLabel:"篮球", 
name:"" 
}] 
}, 
{ 
xtype:'combo', 
fieldLabel:'用户家乡', 
name:'family', 
store:<%=getfamilyData() %>,//调用后台变量 
emptyText:'请选择家乡' 
}, 
{ 
xtype:"htmleditor", 
id:"myinfo", 
fieldLabel:"个人说明", 
anchor:"99%" 
} 
] 
} 
], 
buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}] 
}); 
function login(){ 
MyformPanel.form.submit();//提交 
} 
function reset(){ 
MyformPanel.form.reset();//取消 
} 
} 
Ext.onReady(Read3); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="id1"> 
</div> 
</form> 
</body> 
<script type="text/javascript"> 
</script> 
</html>
Javascript 相关文章推荐
JavaScript闭包详解
Feb 02 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
js实现翻牌小游戏
Jul 31 Javascript
vue解决跨域问题(推荐)
Nov 10 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
javascript调试说明
Jun 07 #Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 #Javascript
javascript下数值型比较难点说明
Jun 07 #Javascript
jQuery源码分析之Event事件分析
Jun 07 #Javascript
jQueryUI的Dialog的简单封装
Jun 07 #Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 #Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 #Javascript
You might like
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
javascript与webservice的通信实现代码
2010/12/25 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
python实现简单日期工具类
2019/04/24 Python
python集合常见运算案例解析
2019/10/17 Python
Python如何给函数库增加日志功能
2020/08/04 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
计算机通信专业推荐信
2014/02/22 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
联谊活动总结范文
2015/05/09 职场文书
工程进度款催款函
2015/06/24 职场文书
python读取mat文件生成h5文件的实现
2022/07/15 Python