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

我就是我 2022-04-14 06:15 288阅读 0赞

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

labelSeparator分隔符

labelWidth标签宽度

labelAlign标签对齐方式

示例二：调整标签样式。

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

validationDelay 校验延迟

minLength:最小长度

minLengthText 最小长度显示提示信息

allowBlank是否允许为空

blankText/为空之后的提示信息

msgTarget提示信息显示方式。

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

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

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

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

示例三：字段校验。

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

示例四：用户登陆页面

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

示例五：TextArea示例。

NumberField数字字段

整数限制。

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

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

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

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

小数限制。

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

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

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

allowNegative :false//允许输入负数

数字范围限制

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

数值范围限制

maxValue : 100,//最大值

minValue : 50//最小值

示例六：NumberField数字字段示例

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

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

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

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

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

TriggerField

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

示例九：TriggerField示例

示例十：ComboBox示例

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ Ext.QuickTips.init(); &nbsp; var&nbsp;store = new&nbsp;Ext.data.SimpleStore({ fields:["chinese","english"], data:[ ["北京","beijing"], ["上海","shanghai"], ["广州","guangzhou"] ] }); &nbsp; var&nbsp;form = new&nbsp;Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new&nbsp;Ext.form.ComboBox({ id:"city", fieldLabel:"城市", triggerAction:"all", store:store, displayField:"chinese", valueField:"english", mode:"local" }) ] }); }); </td> 
 </tr> 
 </tbody> 
</table>

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

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

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

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

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

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

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ Ext.QuickTips.init(); &nbsp; var&nbsp;store = new&nbsp;Ext.data.SimpleStore({ fields:["chinese","english"], data:[ ["北京","beijing"], ["上海","shanghai"], ["广州","guangzhou"] ] }); &nbsp; var&nbsp;form = new&nbsp;Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new&nbsp;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("城市","选择的城市是"&nbsp;+ Ext.get("city").dom.value); } } }) ] }); }); </td> 
 </tr> 
 </tbody> 
</table>

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

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady(function(){ Ext.QuickTips.init(); &nbsp; var&nbsp;store = new&nbsp;Ext.data.SimpleStore({ proxy : new&nbsp;Ext.data.HttpProxy({ //读取远程数据的代理 url : 'citySearchServer.jsp'//远程地址 }), fields:["chinese","english"] }); &nbsp; var&nbsp;form = new&nbsp;Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new&nbsp;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("城市","选择的城市是"&nbsp;+ Ext.get("city").dom.value); } } }) ] }); }); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> &lt;%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%&gt; &lt;% String citys = "[['北京','beijing'],['上海','shanghai'],['广州','guangzhou']]"; response.getWriter().write(citys); %&gt; </td> 
 </tr> 
 </tbody> 
</table>