ExtJS4学习笔记二－－表单控件相关
2014-05-08 16:23
399 查看
二、表单部分相关
Html代码
<HTML>
<HEAD>
<TITLE>提示信息</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();//初始化信息提示功能
var form = new Ext.form.Panel({
title:'表单',//表单标题
height:120,//表单高度
width:200,//表单宽度
frame:true,//是否渲染表单
renderTo :'form',
defaults:{//统一设置表单字段默认属性
//autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 150,//字段宽度
allowBlank : false,//是否允许为空
blankText : '不允许为空',
labelAlign : 'left',//标签对齐方式
msgTarget :'qtip' //显示一个浮动的提示信息
//msgTarget :'title' //显示一个浏览器原始的浮动提示信息
//msgTarget :'under' //在字段下方显示一个提示信息
//msgTarget :'side' //在字段的右边显示一个提示信息
//msgTarget :'none' //不显示提示信息
//msgTarget :'errorMsg' //在errorMsg元素内显示提示信息
},
items:[{
xtype : 'textfield',
fieldLabel : '姓名'//标签内容
},{
xtype : 'numberfield',
fieldLabel : '年龄'
}]
});
});
</script>
</HEAD>
<BODY STYLE="margin: 10px">
<div id='form'></div>
<!-- 错误信息展示元素 -->
<div id='errorMsg'></div>
</BODY>
</HTML>
Html代码
<div id='form'></div>
Javascript代码
Ext.QuickTips.init();
var loginForm = Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Text示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:120,
width:200,
renderTo :'form',
defaultType: 'textfield',//设置表单字段的默认类型
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 150,//字段宽度
allowBlank : false,//是否允许为空
labelAlign : 'left',//标签对齐方式
msgTarget :'side' //在字段的右边显示一个提示信息
},
items:[{
fieldLabel : '用户名',
name : 'userName',
selectOnFocus : true,//得到焦点时自动选择文本
//验证电子邮件格式的正则表达式
regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
regexText:'格式错误'//验证错误之后的提示信息,
},{
name : 'password',
fieldLabel : '密码',
inputType : 'password'//设置输入类型为password
}
],
buttons:[{
text : '登陆',
handler : function(){
loginForm.form.setValues({userName:'user@com',password:'123456'});
}
}]
});
Javascript代码
Ext.QuickTips.init();
var testForm = Ext.create('Ext.form.Panel',{
title:'Ext.form.field.TextArea示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:150,
width:250,
renderTo :'form', //<div id='form'></div>
items:[{
xtype : 'textarea',
fieldLabel : '备注',
id:'memo',//字段组件id
labelSeparator :'：',//分隔符
labelWidth : 60,//标签宽度
width:200
}],
buttons:[{text:'确定',handler:showValue}]
})
function showValue(){
var memo = testForm.getForm().findField('memo');//取得输入控件
alert(memo.getValue());//取得控件值
}
Javascript代码
//Ext.form.field.Number示例
Ext.QuickTips.init();
var form = Ext.create('Ext.form.FormPanel',{
title:'Ext.form.field.Number示例',
bodyStyle:'padding:5 5 5 5',//表单边距
renderTo :'form', //<div id='form'></div>
frame : true,
height:150,
width:250,
defaultType: 'numberfield',//设置表单字段的默认类型
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
width : 200,//字段宽度
labelAlign : 'left',//标签对齐方式
msgTarget :'side' //在字段的右边显示一个提示信息
},
items:[{
fieldLabel:'整数',
hideTrigger : true,//隐藏微调按钮
allowDecimals : false,//不允许输入小数
nanText :'请输入有效的整数'//无效数字提示
},{
fieldLabel:'小数',
decimalPrecision : 2,//精确到小数点后两位
allowDecimals : true,//允许输入小数
nanText :'请输入有效的小数'//无效数字提示
},{
fieldLabel:'数字限制',
baseChars :'12345'//输入数字范围
},{
fieldLabel:'数值限制',
maxValue : 100,//最大值
minValue : 50//最小值
}]
});
触发字段：
Javascript代码
//Ext.form.field.Trigger示例
var testForm = Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Trigger示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:100,
width:270,
renderTo :'form',
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 70,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:[{
xtype : 'triggerfield',
id:'memo',
fieldLabel:'触发字段',
hideTrigger : false,//不隐藏触发按钮
onTriggerClick : function(){
var memo = testForm.getForm().findField('memo');//取得输入控件
alert(memo.getValue());//取得控件值
Ext.getCmp('memo').setValue('test');
}
}]
});
微调字段
Javascript代码
//Ext.form.field.Spinner示例
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Spinner示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:70,
width:250,
renderTo :'form',
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 70,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:[{
xtype : 'spinnerfield',
fieldLabel:'微调字段',
id : 'salary',//组件id
value : 100,//初始化字段值
onSpinUp : function(){
var salaryCmp = Ext.getCmp('salary');//通过组件id获取组件对象
//增加默认值
salaryCmp.setValue(Number(salaryCmp.getValue()) + 1);
},
onSpinDown : function(){
var salaryCmp = Ext.getCmp('salary');
//减小默认值
salaryCmp.setValue(Number(salaryCmp.getValue()) - 1);
}
}]
});
ComboBox本地数据源示例
Javascript代码
//Ext.form.field.ComboBox本地数据源示例
//创建数据模型
Ext.regModel('PostInfo', {
fields: [{name: 'province'},{name: 'post'}]
});
//定义组合框中显示的数据源
var postStore = Ext.create('Ext.data.Store',{
model : 'PostInfo',
data : [
{province:'北京',post:'100000'},
{province:'通县',post:'101100'},
{province:'昌平',post:'102200'},
{province:'大兴',post:'102600'},
{province:'密云',post:'101500'},
{province:'延庆',post:'102100'},
{province:'顺义',post:'101300'},
{province:'怀柔',post:'101400'}
]
});
//创建表单
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.ComboBox本地数据源示例',
renderTo: Ext.getBody(),
bodyPadding: 5,
frame : true,
height:100,
width:270,
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 70,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:[{
xtype : 'combo',
listConfig : {
emptyText : '未找到匹配值',//当值不在列表是的提示信息
maxHeight : 60//设置下拉列表的最大高度为60像素
},
name:'post',
autoSelect : true,
fieldLabel:'邮政编码',
triggerAction: 'all',//单击触发按钮显示全部数据
store : postStore,//设置数据源
displayField:'province',//定义要显示的字段
valueField:'post',//定义值字段
queryMode: 'local',//本地模式
forceSelection : true,//要求输入值必须在列表中存在
typeAhead : true,//允许自动选择匹配的剩余部分文本
value:'102600'//默认选择大兴
}]
});
Ext.form.field.Time示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Time示例',
renderTo: Ext.getBody(),
bodyPadding: 5,
frame : true,
height:100,
width:300,
items:[{
fieldLabel:'时间选择框',
xtype : 'timefield',
width : 220,
labelSeparator :'：',//分隔符
msgTarget :'side',//在字段的右边显示一个提示信息
autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
maxValue : '18:00',//最大时间
maxText : '时间应小于{0}',//大于最大时间的提示信息
minValue : '10:00',//最小时间
minText : '时间应大于{0}',//小于最小时间的提示信息
pickerMaxHeight : 70,//下拉列表的最大高度
increment : 60,//时间间隔为60分钟
format : 'G时i分s秒 ',//G标示为24时计时法
invalidText :'时间格式无效'
}]
});
Ext.form.field.Date示例：
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
maxValue: new Date() // limited to the current date or prior
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
value: new Date() // defaults to today
}]
});
Ext.form.field.Hidden示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Hidden示例',
frame : true,
height:100,
width:300,
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',//设置表单字段的默认类型
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 70,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:[{
name:'userName',
fieldLabel:'姓名'
},{//隐藏域
name:'age',
xtype : 'hidden'
},{
name:'sex',
fieldLabel:'性别'
}]
});
Ext.form.field.HtmlEditor示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.HtmlEditor示例',
width : 630,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
items:[{
fieldLabel:'HTML字段',
xtype : 'htmleditor',
height:150,
width : 600,
value : 'ExtJS4登场',
labelWidth : 70,//标签宽度
labelSeparator :'：',//分隔符
createLinkText : '创建超链接',//创建连接的提示信息
defaultLinkValue : "http://www.",//连接的默认格式
enableAlignments : true,//起用左、中、右对齐按钮
enableColors : true,//起用前景色、背景色选择按钮
enableFont : true,//起用字体选择按钮
enableFontSize : true,//起用字体增大和缩写按钮
enableFormat : true,//起用粗体、斜体、下划线按钮
enableLinks : true,//起用创建连接按钮
enableLists : true,//起用列表按钮
enableSourceEdit : true,//起用源代码编辑按钮
fontFamilies:['宋体','隶书','黑体'],//字体列表
buttonTips :{
bold : {
title: 'Bold (Ctrl+B)',
text: '粗体'
},
italic : {
title: 'Italic (Ctrl+I)',
text: '斜体'
},
underline : {
title: 'Underline (Ctrl+U)',
text: '下划线'
},
increasefontsize : {
title: 'Grow Text',
text: '增大字体'
},
decreasefontsize : {
title: 'Shrink Text',
text: '缩小字体'
},
backcolor : {
title: 'Text Highlight Color',
text: '背景色'
},
forecolor : {
title: 'Font Color',
text: '前景色'
},
justifyleft : {
title: 'Align Text Left',
text: '左对齐'
},
justifycenter : {
title: 'Center Text',
text: '居中对齐'
},
justifyright : {
title: 'Align Text Right',
text: '右对齐'
},
insertunorderedlist : {
title: 'Bullet List',
text: '项目符号'
},
insertorderedlist : {
title: 'Numbered List',
text: '数字编号'
},
createlink : {
title: 'Hyperlink',
text: '超连接'
},
sourceedit : {
title: 'Source Edit',
text: '切换源代码编辑模式'
}
}
}]
});
Ext.form.field.Display示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Display示例',
width : 200,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
items:[{
fieldLabel:'展示字段',
xtype : 'displayfield',
value : '<b>ExtJS4登场</b>',
labelWidth : 70,//标签宽度
labelSeparator :'：'//分隔符
}]
});
Ext.form.Label示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.Label示例',
width : 200,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
items:[ {
xtype: 'label',
forId: 'userName',//关联inputId为userName的表单字段
text: '用户名'
},{
name:'userName',
xtype : 'textfield',
inputId : 'userName',
hideLabel : true //隐藏字段标签
}]
});
Ext.form.FieldSet示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.FieldSet示例',
labelWidth : 40,//标签宽度
width : 220,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
items:[{
title:'产品信息',
xtype : 'fieldset',
collapsible : true,//显示切换展开收缩状态的切换按钮
bodyPadding: 5,
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 160//字段宽度
},
defaultType: 'textfield',//设置表单字段的默认类型
items:[{
fieldLabel:'产地'
},{
fieldLabel:'售价'
}]
},{
title:'产品描述',
xtype : 'fieldset',
bodyPadding: 5,
checkboxToggle : true,//显示切换展开收缩状态的复选框
checkboxName : 'description',//提交数据时复选框对应的name
labelSeparator :'：',//分隔符
items:[{
fieldLabel:'简介',
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 160,//字段宽度
xtype : 'textarea'
}]
}]
});
Ext.form.FieldContainer示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.FieldContainer示例',
width : 300,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 60,//标签宽度
width : 260,//字段宽度
msgTarget : 'side'
},
defaultType: 'textfield',//设置表单字段的默认类型
items:[{
fieldLabel:'商品名称'
},{
xtype: 'fieldcontainer',
fieldLabel: '生产日期',
layout: {//设置容器字段布局
type: 'hbox',
align: 'middle'//垂直居中
},
combineErrors : true,//合并展示错误信息
fieldDefaults: {
hideLabel: true,//隐藏字段标签
allowBlank : false//设置字段值不允许为空
},
defaultType: 'textfield',//设置表单字段的默认类型
items: [{
fieldLabel: '年',
flex: 1,
inputId : 'yearId'
},{
xtype: 'label',
forId : 'yearId',
text: '年'
},{
fieldLabel: '月',
flex: 1,
inputId : 'monthId'
},{
xtype: 'label',
forId : 'monthId',
text: '月'
},{
fieldLabel: '日',
flex: 1,
inputId : 'dayId'
},{
xtype: 'label',
forId : 'dayId',
text: '日'
}]
},{
fieldLabel:'产地来源'
}]
});
vtype示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'vtype示例',
width : 300,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',//设置表单字段的默认类型
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
width : 270,//字段宽度
msgTarget : 'side'
},
items:[{
fieldLabel:'电子邮件',
vtype:'email'
},{
fieldLabel:'网址',
vtype:'url'
},{
fieldLabel:'字母',
vtype:'alpha'
},{
fieldLabel:'字母和数字',
vtype:'alphanum'
}]
});
自定义电话号码验证示例：
Javascript代码
//自定义电话号码的vtype验证
Ext.apply(Ext.form.field.VTypes, {
phone: function(v) {
//规则区号（3-4位数字）-电话号码（7-8位数字）
return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v);
},
phoneText: '请输入有效的电话号码',
phoneMask: /[\d-]/i//只允许输入数字和-号
});
Ext.QuickTips.init();
Ext.create('Ext.form.Panel',{
title:'自定义电话号码验证示例',
width : 300,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',//设置表单字段的默认类型
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
width : 270,//字段宽度
msgTarget : 'side'
},
items:[{
fieldLabel:'住宅号码',
vtype:'phone'//使用电话类型验证
},{
fieldLabel:'办公号码',
vtype:'phone'//使用电话类型验证
}]
});
自定义日期范围验证示例：
Javascript代码
//自定义VType类型，验证日期选择范围
Ext.apply(Ext.form.field.VTypes, {
//验证方法
dateRange : function(val, field) {
var beginDate = null,//开始日期
beginDateCmp = null,//开始日期组件
endDate = null,//结束日期
endDateCmp = null,//结束日期组件
validStatus = true;//验证状态
if(field.dateRange){
//获取开始时间
if(!Ext.isEmpty(field.dateRange.begin)){
beginDateCmp = Ext.getCmp(field.dateRange.begin);
beginDate = beginDateCmp.getValue();
}
//获取结束时间
if(!Ext.isEmpty(field.dateRange.end)){
endDateCmp = Ext.getCmp(field.dateRange.end);
endDate = endDateCmp.getValue();
}
}
//如果开始日期或结束日期有一个为空则校验通过
if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){
validStatus = beginDate <= endDate;
}
return validStatus;
},
//验证提示信息
dateRangeText : '开始日期不能大于结束日期，请重新选择。'
});
Ext.QuickTips.init();//初始化提示;
var dateForm = Ext.create('Ext.form.Panel',{
title:'自定义日期范围验证示例',
frame : true,
width:250,
renderTo: Ext.getBody(),
bodyPadding: 5,
fieldDefaults:{//统一设置表单字段默认属性
autoFitErrors : false,//不自动调整字段宽度
labelSeparator :'：',//分隔符
labelWidth : 90,//标签宽度
width : 210,//字段宽度
format:'Y年n月j日',//显示日期的格式
editable : false,//设置只读
allowBlank : false,//不允许为空
msgTarget : 'side'//设置提示信息展示位置
},
defaultType: 'datefield',//设置表单字段的默认类型
items:[{
id:'beginDate1',
fieldLabel:'入学开始日期',
dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
vtype:'dateRange'
},{
id:'endDate1',
fieldLabel:'入学结束日期',
dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
vtype:'dateRange'
},{
id:'beginDate2',
fieldLabel:'毕业开始日期',
dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange
vtype:'dateRange'
},{
id:'endDate2',
fieldLabel:'毕业结束日期',
dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange
vtype:'dateRange'
}]
});
Ajax模式的表单数据加载：
Html代码
<HTML>
<HEAD>
<TITLE>Ajax模式的表单数据加载</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs4/bootstrap.js"></script>
<script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();//初始化提示;
var productForm = Ext.create('Ext.form.Panel',{
title:'表单加载示例',
width : 300,
frame : true,
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
width : 200
},
renderTo: Ext.getBody(),
items:[{
fieldLabel:'产品名称',
xtype : 'textfield',
name : 'productName',
value:'U盘'//同步加载数据
},{
fieldLabel:'金额',
xtype : 'numberfield',
name : 'price',
value : 100//同步加载数据
},{
fieldLabel:'生产日期',
xtype : 'datefield',
format:'Y年m月d日',//显示日期的格式
name : 'date',
value : new Date()//同步加载数据
},{
xtype : 'hidden',
name : 'productId',
value:'001'//产品id
},{
fieldLabel:'产品简介',
name : 'introduction',
xtype : 'textarea'
}],
buttons:[{
text : '加载简介',
handler : loadIntroduction
}]
});
//表单加载数据的回调函数
function loadIntroduction(){
var params = productForm.getForm().getValues();
productForm.getForm().load({
params : params,//传递参数
url : 'productServer.jsp',//请求的url地址
method:'GET',//请求方式
success:function(form,action){//加载成功的处理函数
Ext.Msg.alert('提示','产品简介加载成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+action.result.errorMessage);
}
});
}
});
</script>
</HEAD>
<BODY STYLE="margin: 10px"></BODY>
</HTML>
Jsp代码
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
//获取产品id
String productId = request.getParameter("productId");
if("001".equals(productId)){
String msg = "{success:true,data:{introduction:'本产品美观实用，售后服务优秀。'}}";
response.getWriter().write(msg);
}else{
String msg = "{success:false,errorMessage:'数据不存在'}";
response.getWriter().write(msg);
}
%>
另外一种方式：
Java代码
public String getProductInfo(String productId)
{
String msg = "";
if("001".equals(productId)){
msg = "1本产品美观实用，售后服务优秀。";
}else{
msg = "0数据不存在";
}
return msg;
}
Javascript代码
//表单加载数据的回调函数
function loadIntroduction(){
var params = productForm.getForm().getValues();
testdwr.getProductInfo(params.productId,function(ret){
if(ret.substring(0,1) == '1')
{
Ext.getCmp('introduction').setValue(ret.substring(1,ret.length-1));
Ext.Msg.alert('提示','产品简介加载成功');
}
else
{
Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+ret.substring(1,ret.length-1));
}
});
}
登录简单处理：
Html代码
<HTML>
<HEAD>
<TITLE>Ajax模式的表单数据提交</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs4/bootstrap.js"></script>
<script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();//初始化提示;
var loginForm = Ext.create('Ext.form.Panel',{
title:'表单提交示例',
width : 230,
frame : true,
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
msgTarget : 'side',
width : 200
},
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',//设置表单字段的默认类型
items:[{
fieldLabel:'用户名',
name : 'userName',
allowBlank : false,
vtype:'email'
},{
fieldLabel:'密码',
name : 'password',
inputType : 'password',
allowBlank : false
}],
buttons:[{
text : '登陆',
handler : login
},{
text : '重置',
handler : reset
}]
});
function login(){//提交表单
loginForm.getForm().submit({
clientValidation:true,//进行客户端验证
url : 'loginServer.jsp',//请求的url地址
method:'GET',//请求方式
success:function(form,action){//加载成功的处理函数
Ext.Msg.alert('提示','系统登陆成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','系统登陆失败，原因：'+action.failureType);
}
});
}
function reset(){//重置表单
loginForm.form.reset();
}
});
</script>
</HEAD>
<BODY STYLE="margin: 10px"></BODY>
</HTML>
Jsp代码
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String password = request.getParameter("password");
String msg = "";
if(password.length() < 6){//密码不足6位验证失败
msg = "{success:false,errors:{password:'密码不得小于六位数字'}}";
}else{//验证成功
msg = "{success:true}";
}
response.getWriter().write(msg);
%>
Html代码
<HTML>
<HEAD>
<TITLE>提示信息</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();//初始化信息提示功能
var form = new Ext.form.Panel({
title:'表单',//表单标题
height:120,//表单高度
width:200,//表单宽度
frame:true,//是否渲染表单
renderTo :'form',
defaults:{//统一设置表单字段默认属性
//autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 150,//字段宽度
allowBlank : false,//是否允许为空
blankText : '不允许为空',
labelAlign : 'left',//标签对齐方式
msgTarget :'qtip' //显示一个浮动的提示信息
//msgTarget :'title' //显示一个浏览器原始的浮动提示信息
//msgTarget :'under' //在字段下方显示一个提示信息
//msgTarget :'side' //在字段的右边显示一个提示信息
//msgTarget :'none' //不显示提示信息
//msgTarget :'errorMsg' //在errorMsg元素内显示提示信息
},
items:[{
xtype : 'textfield',
fieldLabel : '姓名'//标签内容
},{
xtype : 'numberfield',
fieldLabel : '年龄'
}]
});
});
</script>
</HEAD>
<BODY STYLE="margin: 10px">
<div id='form'></div>
<!-- 错误信息展示元素 -->
<div id='errorMsg'></div>
</BODY>
</HTML>
Html代码
<div id='form'></div>
Javascript代码
Ext.QuickTips.init();
var loginForm = Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Text示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:120,
width:200,
renderTo :'form',
defaultType: 'textfield',//设置表单字段的默认类型
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 150,//字段宽度
allowBlank : false,//是否允许为空
labelAlign : 'left',//标签对齐方式
msgTarget :'side' //在字段的右边显示一个提示信息
},
items:[{
fieldLabel : '用户名',
name : 'userName',
selectOnFocus : true,//得到焦点时自动选择文本
//验证电子邮件格式的正则表达式
regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
regexText:'格式错误'//验证错误之后的提示信息,
},{
name : 'password',
fieldLabel : '密码',
inputType : 'password'//设置输入类型为password
}
],
buttons:[{
text : '登陆',
handler : function(){
loginForm.form.setValues({userName:'user@com',password:'123456'});
}
}]
});
Javascript代码
Ext.QuickTips.init();
var testForm = Ext.create('Ext.form.Panel',{
title:'Ext.form.field.TextArea示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:150,
width:250,
renderTo :'form', //<div id='form'></div>
items:[{
xtype : 'textarea',
fieldLabel : '备注',
id:'memo',//字段组件id
labelSeparator :'：',//分隔符
labelWidth : 60,//标签宽度
width:200
}],
buttons:[{text:'确定',handler:showValue}]
})
function showValue(){
var memo = testForm.getForm().findField('memo');//取得输入控件
alert(memo.getValue());//取得控件值
}
Javascript代码
//Ext.form.field.Number示例
Ext.QuickTips.init();
var form = Ext.create('Ext.form.FormPanel',{
title:'Ext.form.field.Number示例',
bodyStyle:'padding:5 5 5 5',//表单边距
renderTo :'form', //<div id='form'></div>
frame : true,
height:150,
width:250,
defaultType: 'numberfield',//设置表单字段的默认类型
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
width : 200,//字段宽度
labelAlign : 'left',//标签对齐方式
msgTarget :'side' //在字段的右边显示一个提示信息
},
items:[{
fieldLabel:'整数',
hideTrigger : true,//隐藏微调按钮
allowDecimals : false,//不允许输入小数
nanText :'请输入有效的整数'//无效数字提示
},{
fieldLabel:'小数',
decimalPrecision : 2,//精确到小数点后两位
allowDecimals : true,//允许输入小数
nanText :'请输入有效的小数'//无效数字提示
},{
fieldLabel:'数字限制',
baseChars :'12345'//输入数字范围
},{
fieldLabel:'数值限制',
maxValue : 100,//最大值
minValue : 50//最小值
}]
});
触发字段：
Javascript代码
//Ext.form.field.Trigger示例
var testForm = Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Trigger示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:100,
width:270,
renderTo :'form',
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 70,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:[{
xtype : 'triggerfield',
id:'memo',
fieldLabel:'触发字段',
hideTrigger : false,//不隐藏触发按钮
onTriggerClick : function(){
var memo = testForm.getForm().findField('memo');//取得输入控件
alert(memo.getValue());//取得控件值
Ext.getCmp('memo').setValue('test');
}
}]
});
微调字段
Javascript代码
//Ext.form.field.Spinner示例
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Spinner示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:70,
width:250,
renderTo :'form',
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 70,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:[{
xtype : 'spinnerfield',
fieldLabel:'微调字段',
id : 'salary',//组件id
value : 100,//初始化字段值
onSpinUp : function(){
var salaryCmp = Ext.getCmp('salary');//通过组件id获取组件对象
//增加默认值
salaryCmp.setValue(Number(salaryCmp.getValue()) + 1);
},
onSpinDown : function(){
var salaryCmp = Ext.getCmp('salary');
//减小默认值
salaryCmp.setValue(Number(salaryCmp.getValue()) - 1);
}
}]
});
ComboBox本地数据源示例
Javascript代码
//Ext.form.field.ComboBox本地数据源示例
//创建数据模型
Ext.regModel('PostInfo', {
fields: [{name: 'province'},{name: 'post'}]
});
//定义组合框中显示的数据源
var postStore = Ext.create('Ext.data.Store',{
model : 'PostInfo',
data : [
{province:'北京',post:'100000'},
{province:'通县',post:'101100'},
{province:'昌平',post:'102200'},
{province:'大兴',post:'102600'},
{province:'密云',post:'101500'},
{province:'延庆',post:'102100'},
{province:'顺义',post:'101300'},
{province:'怀柔',post:'101400'}
]
});
//创建表单
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.ComboBox本地数据源示例',
renderTo: Ext.getBody(),
bodyPadding: 5,
frame : true,
height:100,
width:270,
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 70,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:[{
xtype : 'combo',
listConfig : {
emptyText : '未找到匹配值',//当值不在列表是的提示信息
maxHeight : 60//设置下拉列表的最大高度为60像素
},
name:'post',
autoSelect : true,
fieldLabel:'邮政编码',
triggerAction: 'all',//单击触发按钮显示全部数据
store : postStore,//设置数据源
displayField:'province',//定义要显示的字段
valueField:'post',//定义值字段
queryMode: 'local',//本地模式
forceSelection : true,//要求输入值必须在列表中存在
typeAhead : true,//允许自动选择匹配的剩余部分文本
value:'102600'//默认选择大兴
}]
});
Ext.form.field.Time示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Time示例',
renderTo: Ext.getBody(),
bodyPadding: 5,
frame : true,
height:100,
width:300,
items:[{
fieldLabel:'时间选择框',
xtype : 'timefield',
width : 220,
labelSeparator :'：',//分隔符
msgTarget :'side',//在字段的右边显示一个提示信息
autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
maxValue : '18:00',//最大时间
maxText : '时间应小于{0}',//大于最大时间的提示信息
minValue : '10:00',//最小时间
minText : '时间应大于{0}',//小于最小时间的提示信息
pickerMaxHeight : 70,//下拉列表的最大高度
increment : 60,//时间间隔为60分钟
format : 'G时i分s秒 ',//G标示为24时计时法
invalidText :'时间格式无效'
}]
});
Ext.form.field.Date示例：
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
maxValue: new Date() // limited to the current date or prior
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
value: new Date() // defaults to today
}]
});
Ext.form.field.Hidden示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Hidden示例',
frame : true,
height:100,
width:300,
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',//设置表单字段的默认类型
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 70,//标签宽度
width : 200,//字段宽度
labelAlign : 'left'//标签对齐方式
},
items:[{
name:'userName',
fieldLabel:'姓名'
},{//隐藏域
name:'age',
xtype : 'hidden'
},{
name:'sex',
fieldLabel:'性别'
}]
});
Ext.form.field.HtmlEditor示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.HtmlEditor示例',
width : 630,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
items:[{
fieldLabel:'HTML字段',
xtype : 'htmleditor',
height:150,
width : 600,
value : 'ExtJS4登场',
labelWidth : 70,//标签宽度
labelSeparator :'：',//分隔符
createLinkText : '创建超链接',//创建连接的提示信息
defaultLinkValue : "http://www.",//连接的默认格式
enableAlignments : true,//起用左、中、右对齐按钮
enableColors : true,//起用前景色、背景色选择按钮
enableFont : true,//起用字体选择按钮
enableFontSize : true,//起用字体增大和缩写按钮
enableFormat : true,//起用粗体、斜体、下划线按钮
enableLinks : true,//起用创建连接按钮
enableLists : true,//起用列表按钮
enableSourceEdit : true,//起用源代码编辑按钮
fontFamilies:['宋体','隶书','黑体'],//字体列表
buttonTips :{
bold : {
title: 'Bold (Ctrl+B)',
text: '粗体'
},
italic : {
title: 'Italic (Ctrl+I)',
text: '斜体'
},
underline : {
title: 'Underline (Ctrl+U)',
text: '下划线'
},
increasefontsize : {
title: 'Grow Text',
text: '增大字体'
},
decreasefontsize : {
title: 'Shrink Text',
text: '缩小字体'
},
backcolor : {
title: 'Text Highlight Color',
text: '背景色'
},
forecolor : {
title: 'Font Color',
text: '前景色'
},
justifyleft : {
title: 'Align Text Left',
text: '左对齐'
},
justifycenter : {
title: 'Center Text',
text: '居中对齐'
},
justifyright : {
title: 'Align Text Right',
text: '右对齐'
},
insertunorderedlist : {
title: 'Bullet List',
text: '项目符号'
},
insertorderedlist : {
title: 'Numbered List',
text: '数字编号'
},
createlink : {
title: 'Hyperlink',
text: '超连接'
},
sourceedit : {
title: 'Source Edit',
text: '切换源代码编辑模式'
}
}
}]
});
Ext.form.field.Display示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Display示例',
width : 200,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
items:[{
fieldLabel:'展示字段',
xtype : 'displayfield',
value : '<b>ExtJS4登场</b>',
labelWidth : 70,//标签宽度
labelSeparator :'：'//分隔符
}]
});
Ext.form.Label示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.Label示例',
width : 200,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
items:[ {
xtype: 'label',
forId: 'userName',//关联inputId为userName的表单字段
text: '用户名'
},{
name:'userName',
xtype : 'textfield',
inputId : 'userName',
hideLabel : true //隐藏字段标签
}]
});
Ext.form.FieldSet示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.FieldSet示例',
labelWidth : 40,//标签宽度
width : 220,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
items:[{
title:'产品信息',
xtype : 'fieldset',
collapsible : true,//显示切换展开收缩状态的切换按钮
bodyPadding: 5,
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 160//字段宽度
},
defaultType: 'textfield',//设置表单字段的默认类型
items:[{
fieldLabel:'产地'
},{
fieldLabel:'售价'
}]
},{
title:'产品描述',
xtype : 'fieldset',
bodyPadding: 5,
checkboxToggle : true,//显示切换展开收缩状态的复选框
checkboxName : 'description',//提交数据时复选框对应的name
labelSeparator :'：',//分隔符
items:[{
fieldLabel:'简介',
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 160,//字段宽度
xtype : 'textarea'
}]
}]
});
Ext.form.FieldContainer示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'Ext.form.FieldContainer示例',
width : 300,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 60,//标签宽度
width : 260,//字段宽度
msgTarget : 'side'
},
defaultType: 'textfield',//设置表单字段的默认类型
items:[{
fieldLabel:'商品名称'
},{
xtype: 'fieldcontainer',
fieldLabel: '生产日期',
layout: {//设置容器字段布局
type: 'hbox',
align: 'middle'//垂直居中
},
combineErrors : true,//合并展示错误信息
fieldDefaults: {
hideLabel: true,//隐藏字段标签
allowBlank : false//设置字段值不允许为空
},
defaultType: 'textfield',//设置表单字段的默认类型
items: [{
fieldLabel: '年',
flex: 1,
inputId : 'yearId'
},{
xtype: 'label',
forId : 'yearId',
text: '年'
},{
fieldLabel: '月',
flex: 1,
inputId : 'monthId'
},{
xtype: 'label',
forId : 'monthId',
text: '月'
},{
fieldLabel: '日',
flex: 1,
inputId : 'dayId'
},{
xtype: 'label',
forId : 'dayId',
text: '日'
}]
},{
fieldLabel:'产地来源'
}]
});
vtype示例：
Javascript代码
Ext.create('Ext.form.Panel',{
title:'vtype示例',
width : 300,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',//设置表单字段的默认类型
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
width : 270,//字段宽度
msgTarget : 'side'
},
items:[{
fieldLabel:'电子邮件',
vtype:'email'
},{
fieldLabel:'网址',
vtype:'url'
},{
fieldLabel:'字母',
vtype:'alpha'
},{
fieldLabel:'字母和数字',
vtype:'alphanum'
}]
});
自定义电话号码验证示例：
Javascript代码
//自定义电话号码的vtype验证
Ext.apply(Ext.form.field.VTypes, {
phone: function(v) {
//规则区号（3-4位数字）-电话号码（7-8位数字）
return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v);
},
phoneText: '请输入有效的电话号码',
phoneMask: /[\d-]/i//只允许输入数字和-号
});
Ext.QuickTips.init();
Ext.create('Ext.form.Panel',{
title:'自定义电话号码验证示例',
width : 300,
frame : true,
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',//设置表单字段的默认类型
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
width : 270,//字段宽度
msgTarget : 'side'
},
items:[{
fieldLabel:'住宅号码',
vtype:'phone'//使用电话类型验证
},{
fieldLabel:'办公号码',
vtype:'phone'//使用电话类型验证
}]
});
自定义日期范围验证示例：
Javascript代码
//自定义VType类型，验证日期选择范围
Ext.apply(Ext.form.field.VTypes, {
//验证方法
dateRange : function(val, field) {
var beginDate = null,//开始日期
beginDateCmp = null,//开始日期组件
endDate = null,//结束日期
endDateCmp = null,//结束日期组件
validStatus = true;//验证状态
if(field.dateRange){
//获取开始时间
if(!Ext.isEmpty(field.dateRange.begin)){
beginDateCmp = Ext.getCmp(field.dateRange.begin);
beginDate = beginDateCmp.getValue();
}
//获取结束时间
if(!Ext.isEmpty(field.dateRange.end)){
endDateCmp = Ext.getCmp(field.dateRange.end);
endDate = endDateCmp.getValue();
}
}
//如果开始日期或结束日期有一个为空则校验通过
if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){
validStatus = beginDate <= endDate;
}
return validStatus;
},
//验证提示信息
dateRangeText : '开始日期不能大于结束日期，请重新选择。'
});
Ext.QuickTips.init();//初始化提示;
var dateForm = Ext.create('Ext.form.Panel',{
title:'自定义日期范围验证示例',
frame : true,
width:250,
renderTo: Ext.getBody(),
bodyPadding: 5,
fieldDefaults:{//统一设置表单字段默认属性
autoFitErrors : false,//不自动调整字段宽度
labelSeparator :'：',//分隔符
labelWidth : 90,//标签宽度
width : 210,//字段宽度
format:'Y年n月j日',//显示日期的格式
editable : false,//设置只读
allowBlank : false,//不允许为空
msgTarget : 'side'//设置提示信息展示位置
},
defaultType: 'datefield',//设置表单字段的默认类型
items:[{
id:'beginDate1',
fieldLabel:'入学开始日期',
dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
vtype:'dateRange'
},{
id:'endDate1',
fieldLabel:'入学结束日期',
dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
vtype:'dateRange'
},{
id:'beginDate2',
fieldLabel:'毕业开始日期',
dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange
vtype:'dateRange'
},{
id:'endDate2',
fieldLabel:'毕业结束日期',
dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange
vtype:'dateRange'
}]
});
Ajax模式的表单数据加载：
Html代码
<HTML>
<HEAD>
<TITLE>Ajax模式的表单数据加载</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs4/bootstrap.js"></script>
<script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();//初始化提示;
var productForm = Ext.create('Ext.form.Panel',{
title:'表单加载示例',
width : 300,
frame : true,
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
width : 200
},
renderTo: Ext.getBody(),
items:[{
fieldLabel:'产品名称',
xtype : 'textfield',
name : 'productName',
value:'U盘'//同步加载数据
},{
fieldLabel:'金额',
xtype : 'numberfield',
name : 'price',
value : 100//同步加载数据
},{
fieldLabel:'生产日期',
xtype : 'datefield',
format:'Y年m月d日',//显示日期的格式
name : 'date',
value : new Date()//同步加载数据
},{
xtype : 'hidden',
name : 'productId',
value:'001'//产品id
},{
fieldLabel:'产品简介',
name : 'introduction',
xtype : 'textarea'
}],
buttons:[{
text : '加载简介',
handler : loadIntroduction
}]
});
//表单加载数据的回调函数
function loadIntroduction(){
var params = productForm.getForm().getValues();
productForm.getForm().load({
params : params,//传递参数
url : 'productServer.jsp',//请求的url地址
method:'GET',//请求方式
success:function(form,action){//加载成功的处理函数
Ext.Msg.alert('提示','产品简介加载成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+action.result.errorMessage);
}
});
}
});
</script>
</HEAD>
<BODY STYLE="margin: 10px"></BODY>
</HTML>
Jsp代码
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
//获取产品id
String productId = request.getParameter("productId");
if("001".equals(productId)){
String msg = "{success:true,data:{introduction:'本产品美观实用，售后服务优秀。'}}";
response.getWriter().write(msg);
}else{
String msg = "{success:false,errorMessage:'数据不存在'}";
response.getWriter().write(msg);
}
%>
另外一种方式：
Java代码
public String getProductInfo(String productId)
{
String msg = "";
if("001".equals(productId)){
msg = "1本产品美观实用，售后服务优秀。";
}else{
msg = "0数据不存在";
}
return msg;
}
Javascript代码
//表单加载数据的回调函数
function loadIntroduction(){
var params = productForm.getForm().getValues();
testdwr.getProductInfo(params.productId,function(ret){
if(ret.substring(0,1) == '1')
{
Ext.getCmp('introduction').setValue(ret.substring(1,ret.length-1));
Ext.Msg.alert('提示','产品简介加载成功');
}
else
{
Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+ret.substring(1,ret.length-1));
}
});
}
登录简单处理：
Html代码
<HTML>
<HEAD>
<TITLE>Ajax模式的表单数据提交</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs4/bootstrap.js"></script>
<script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();//初始化提示;
var loginForm = Ext.create('Ext.form.Panel',{
title:'表单提交示例',
width : 230,
frame : true,
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
msgTarget : 'side',
width : 200
},
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',//设置表单字段的默认类型
items:[{
fieldLabel:'用户名',
name : 'userName',
allowBlank : false,
vtype:'email'
},{
fieldLabel:'密码',
name : 'password',
inputType : 'password',
allowBlank : false
}],
buttons:[{
text : '登陆',
handler : login
},{
text : '重置',
handler : reset
}]
});
function login(){//提交表单
loginForm.getForm().submit({
clientValidation:true,//进行客户端验证
url : 'loginServer.jsp',//请求的url地址
method:'GET',//请求方式
success:function(form,action){//加载成功的处理函数
Ext.Msg.alert('提示','系统登陆成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','系统登陆失败，原因：'+action.failureType);
}
});
}
function reset(){//重置表单
loginForm.form.reset();
}
});
</script>
</HEAD>
<BODY STYLE="margin: 10px"></BODY>
</HTML>
Jsp代码
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String password = request.getParameter("password");
String msg = "";
if(password.length() < 6){//密码不足6位验证失败
msg = "{success:false,errors:{password:'密码不得小于六位数字'}}";
}else{//验证成功
msg = "{success:true}";
}
response.getWriter().write(msg);
%>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 韩顺平_php从入门到精通_视频教程_第7讲_表单及表单控件②_学习笔记_源代码图解_PPT文档整理
- Angular2学习笔记.4、表单相关，双向数据绑定，HeroForm
- 黑马程序员之WinForm学习笔记: winform窗体控件相关知识
- 韩顺平_php从入门到精通_视频教程_第6讲_浮动窗口_表单及表单控件①_学习笔记_源代码图解_PPT文档整理
- ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)
- ExtJS学习笔记（1）-表单验证，Ext.FormPanel
- html学习笔记之一：表单控件
- COCOS学习笔记--Button类及其相关控件属性
- ExtJS学习笔记3：载入、提交和验证表单
- ASP.NET控件开发学习笔记--第5回 HtmlTextWriter的相关枚举
- Vue学习笔记之表单输入控件绑定
- HTML学习笔记（五）_HTML5表单相关元素和属性
- 韩顺平PHP学习视频笔记整理007表单及表单控件②
- Extjs学习笔记之三 extjs form更多的表单项
- <学习html>第七天笔记-表单标签（textarea控件、下拉菜单、表单域）
- bootstrap 学习笔记 - 3 （表格 + 表单 +控件）
- ExtJS学习笔记3：加载、提交和验证表单
- android 开发零起步学习笔记（九）:android 控制控件的位置和大小及Layout相关属性
- ExtJS学习笔记（5）- Form表单的提交 -Ext.FormPanel