ExtJS4学习笔记2－－表单控件相关
日期：2014-05-16 浏览次数：20301 次
ExtJS4学习笔记二－－表单控件相关
二、表单部分相关
二、表单部分相关
<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>
<div id='form'></div>
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'});
}
}]
});
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());//取得控件值
}//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 :'请输入有效的整数'//无效数字提示
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
