|
|
 <HTML>
<HEAD>
<TITLE> form练习之验证 </TITLE>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-all.js"></script>
  <script>
 Ext.onReady(function()
  {
//初始化快速提示
Ext.QuickTips.init();
//将提示显示在form属性旁边
Ext.form.Field.prototype.msgTarget = 'side';
//得到body对象
var bd = Ext.getBody();
//创建一个h2标签
bd.createChild({
tag : 'h2',
html: '<a href="#">非常简单的From</a>'
 });
var simple = new Ext.FormPanel({
labelWidth : 75,
url : 'http://www.blogjava.net/supercrsky',
frame : true,
title : '简单Form',
bodyStyle : 'padding : 5px 5px 0',
width : 350,
draggable : true,
defaults : {width : 230},
defaultType : 'textfield',
//非ajax提交
onSubmit: Ext.emptyFn,
submit: function()
{
this.getForm().getEl().dom.submit();
},
items : [
{
fieldLabel : '姓名:',
name : 'username',
allowBlank : false,
blankText : '姓名不能为空'
},
{
fieldLabel : '地址:',
name : 'address',
maxLength : 20,
maxLengthText : '您输入的地址太长'
},
{
fieldLabel : '公司',
name : 'company' ,
minLength : 3 ,
minLengthText : '您输入的公司名称太短'
},
{
fieldLabel : 'Email',
name : 'email',
vtype : 'email',
vtypeText : '您输入的邮箱格式不正确'
},
//时间文本域
new Ext.form.TimeField({
fieldLabel : 'Time',
name : 'time',
minValue : '8:00am', //最小时间
maxValue : '6:00pm', //最大时间
increment: 1, //间隔,单位为分钟,默认为15分钟
invalidText : '您输入的时间格式不正确'
})
],
buttons : [
{
text : '保存',
handler : function()
{
//此方法在Class Ext.form.BasicForm里面,是FormPanel的父类
if(simple.getForm().isValid())
{
simple.getForm().getEl().dom.action = 'http://www.blogjava.net/supercrsky',
simple.getForm().getEl().dom.submit();
}
}
},
{
text : '取消',
handler : function()
{
simple.getForm().getEl().dom.reset();
}
}
]
});
//渲染此form
simple.render(document.body);
 });
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
|