第八讲：ExtJS组件之FormPanel(上)

示例一：最简单的FormPanel示例。

Ext.onReady(function(){ var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, items:[ new Ext.form.TextField({ fieldLabel:"你的姓名" }) ] }); });

labelSeparator分隔符

labelWidth标签宽度

labelAlign标签对齐方式

示例二：调整标签样式。

Ext.onReady(function(){ var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:100, labelAlign:"right", items:[ new Ext.form.TextField({ fieldLabel:"你的姓名" }) ] }); });

validateOnBlur 是否在失去焦点时进行校验

validationDelay 校验延迟

minLength:最小长度

minLengthText 最小长度显示提示信息

allowBlank是否允许为空

blankText/为空之后的提示信息

msgTarget提示信息显示方式。

msgTarget :'qtip'//显示一个浮动的提示信息。

msgTarget :'title'//显示一个浏览器原始的浮动提示信息。

msgTarget :'under'//在字段下方显示一个提示信息。

msgTarget :'side'//在字段的右边显示一个提示信息。

示例三：字段校验。

Ext.onReady(function(){ Ext.QuickTips.init();   var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:100, labelAlign:"right", items:[ new Ext.form.TextField({ fieldLabel:"你的姓名", validateOnBlur:true, validationDelay:2000, minLength:2, minLengthText:"请输入长度为2以上的姓名", allowBlank:false, blankText:"名字不能为空", msgTarget :'qtip' }), new Ext.form.NumberField({ fieldLabel:"你的年龄", validateOnBlur:true, validationDelay:2000, maxLength:3, maxLengthText:"请输入正确的年龄", allowBlank:false, blankText:"名字不能为空", msgTarget :'qtip' }) ] }); });

示例四：用户登陆页面

Ext.onReady(function(){ Ext.QuickTips.init();   var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:100, labelAlign:"right", items:[ new Ext.form.TextField({ fieldLabel : '用户名', id : 'userName', selectOnFocus : true, allowBlank : false, //验证电子邮件格式的正则表达式 regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/, regexText:'用户名格式错误' }), new Ext.form.TextField({ id : 'password', fieldLabel : '密码', inputType : 'password', allowBlank : false, blankText:"密码不能为空" }) ], buttons:[ {text:"登陆",handler:function() { Ext.MessageBox.alert("登陆成功","用户名" + form.findById("userName").getValue() + ",密码" + form.findById("password").getValue()); } } ] }); });

示例五：TextArea示例。

Ext.onReady(function(){ Ext.QuickTips.init();   var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, labelAlign:"right", items:[ new Ext.form.TextArea({ id:'memo', width:250, height:300, fieldLabel: '备注' }) ], buttons:[ {text:"提交",handler:function() { Ext.MessageBox.alert("备注信息" + form.findById("memo").getValue()); } } ] }); });

NumberField数字字段

整数限制。

allowDecimals : false,//不允许输入小数

allowNegative : false,//不允许输入负数

nanText :'请输入有效的整数',//无效数字提示

allowNegative :false//不允许输入负数

小数限制。

decimalPrecision : 2,//精确到小数点后两位

allowDecimals : true,//允许输入小数

nanText :'请输入有效的小数',//无效数字提示

allowNegative :false//允许输入负数

数字范围限制

baseChars :'12345'//输入数字范围

数值范围限制

maxValue : 100,//最大值

minValue : 50//最小值

示例六：NumberField数字字段示例

Ext.onReady(function(){ Ext.QuickTips.init();   var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, labelAlign:"right", items:[ new Ext.form.NumberField({ fieldLabel:'整数', allowDecimals : false,//不允许输入小数 allowNegative : false,//不允许输入负数 nanText :'请输入有效的整数',//无效数字提示 allowNegative :false//不允许输入负数 }), new Ext.form.NumberField({ fieldLabel:'小数', decimalPrecision : 2,//精确到小数点后两位 allowDecimals : true,//允许输入小数 nanText :'请输入有效的小数',//无效数字提示 allowNegative :false//允许输入负数 }), new Ext.form.NumberField({ fieldLabel:'数字限制', baseChars :'12345'//输入数字范围 }), new Ext.form.NumberField({ fieldLabel:'数值限制', maxValue : 100,//最大值 minValue : 50,//最小值 maxText:"最大数为100", minText:"最小数为50" }) ] }); });

示例七：Ext.form.Checkbox和Ext.form.Radio

Ext.onReady(function(){ Ext.QuickTips.init();   var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, labelAlign:"right", items:[ new Ext.form.Radio({ name : 'sex',//名字相同的单选框会作为一组 fieldLabel:'性别', boxLabel : '男' }), new Ext.form.Radio({ name : 'sex',//名字相同的单选框会作为一组 fieldLabel:'性别', boxLabel : '女' }), new Ext.form.Checkbox({ name : 'swim', fieldLabel:'爱好', boxLabel : '游泳' }), new Ext.form.Checkbox({ name : 'walk', fieldLabel:'爱好', boxLabel : '散步' }) ] }); });

示例八：横排显示Ext.form.Checkbox和Ext.form.Radio

Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ { layout:"column", width:150, items:[ new Ext.form.Label({ text:"性别：" }), new Ext.form.Radio({ columnWidth:.5, name : 'sex',//名字相同的单选框会作为一组 boxLabel : '男' }), new Ext.form.Radio({ columnWidth:.5, name : 'sex',//名字相同的单选框会作为一组 boxLabel : '女' }) ] }, { layout:"column", width:150, items:[ new Ext.form.Label({ text:"爱好：" }), new Ext.form.Checkbox({ columnWidth:.5, name : 'swim', boxLabel : '游泳' }), new Ext.form.Checkbox({ columnWidth:.5, name : 'walk', boxLabel : '散步' }) ] } ] }); });

TriggerField

说明：它提供了一个触发的事件onTriggerClick，datefield和combox都是继承它

示例九：TriggerField示例

Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.form.FormPanel({ renderTo:"form", title:"表单Panel", frame : true, width:300, height:300, labelSeparator :'：',//分隔符 labelWidth : 80,//标签宽度 items:[ new Ext.form.TriggerField({ id:"city", fieldLabel:"城市", onTriggerClick:function() { var city = form.findById("city");   } }) ] }); });

示例十：ComboBox示例

Ext.onReady(function(){ Ext.QuickTips.init();   var store = new Ext.data.SimpleStore({ fields:["chinese","english"], data:[ ["北京","beijing"], ["上海","shanghai"], ["广州","guangzhou"] ] });   var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", fieldLabel:"城市", triggerAction:"all", store:store, displayField:"chinese", valueField:"english", mode:"local" }) ] }); });

forceSelection : true, 要求输入值必须在列表中存在

resizable : true,  允许改变下拉列表的大小

typeAhead : true,  允许自动选择匹配的剩余部分文本

value:'beijing',  默认选择北京

emptyText:'请选择一个城市//为空时显示文本

示例十一：ComboBox中获得value值。

Ext.onReady(function(){ Ext.QuickTips.init();   var store = new Ext.data.SimpleStore({ fields:["chinese","english"], data:[ ["北京","beijing"], ["上海","shanghai"], ["广州","guangzhou"] ] });   var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", fieldLabel:"城市", triggerAction:"all", store:store, displayField:"chinese", valueField:"english", mode:"local", forceSelection : true,//要求输入值必须在列表中存在 resizable : true, typeAhead : true, emptyText:'请选择一个城市...', listeners:{ "select":function() { Ext.MessageBox.alert("城市","选择的城市是" + Ext.get("city").dom.value); } } }) ] }); });

示例十二：ComboBox中显示远程数据。

Ext.onReady(function(){ Ext.QuickTips.init();   var store = new Ext.data.SimpleStore({ proxy : new Ext.data.HttpProxy({//读取远程数据的代理 url : 'citySearchServer.jsp'//远程地址 }), fields:["chinese","english"] });   var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", fieldLabel:"城市", triggerAction:"all", store:store, displayField:"chinese", valueField:"english", mode:"remote", forceSelection : true,//要求输入值必须在列表中存在 resizable : true, typeAhead : true, emptyText:'请选择一个城市...', listeners:{ "select":function() { Ext.MessageBox.alert("城市","选择的城市是" + Ext.get("city").dom.value); } } }) ] }); });

<%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%> <% String citys = "[['北京','beijing'],['上海','shanghai'],['广州','guangzhou']]"; response.getWriter().write(citys); %>