初学Ext.FormPanel
用extjs写了个form,还没有响应后代的操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext 2.0 Desktop Sample App</title>
<link rel="stylesheet" type="text/css" href="E:/校宿管管理资料/ext-2.0.2/resources/css/ext-all.css"/>
<script type="text/javascript" src="E:/校宿管管理资料/ext-2.0.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="E:/校宿管管理资料/ext-2.0.2/ext-all.js"></script>
<script type="text/javascript">
Ext.f=function(){
return{
init:function(){
Ext.QuickTips.init();//将提示消息初始化为消息球，通常是在函数的开头
var movie_form = new Ext.FormPanel({//new 出一个movie_form表单
renderTo:document.body,//表单的位置body
frame:true,
title:'表单提交',//表单标题
width:250,
items:[ //定义表单里的字段域，类似jsp表单里面的输入框
{
xtype:'textfield',//文本框
fieldLabel:'用户名',
name:'username',
allowBlank: false,//extjs自带的校验，不能为空
vtype:'checkusername'//自定义的检验checkusername
},
new Ext.form.TextField({
inputType: 'password',//密码本文框
id: 'pass1',
maxLength: 6,
fieldLabel: '输入密码',
allowBlank: false //extjs自带的校验，不能为空
}),
new Ext.form.TextField({
inputType: 'password',
id: 'pass2',
maxLength: 6,
fieldLabel: '重复密码',
allowBlank: false, //extjs自带的校验，不能为空
vtype: 'repetition', //自定义校验repetition(指定repetition验证类型)
repetition: { targetCmpId: 'pass1' } //配置repetition验证，提供目标组件（表单）ID
}),
{
xtype:'datefield',//日期文本框
fieldLabel:'日期',
name:'date',
disabledDays:[1,2,3,4,5]//禁用了除周六周日之外的日期，0代表周日，6代表周六
},
{
xtype: 'button',//按钮
height: 50,
width: 120,
text: '注册',
x: 80,
y: 160
}
]
});
}
};
}();
//自定义的检验函数
Ext.apply(Ext.form.VTypes, {
//用户名校验
checkusername: function(val,field) { //var是用户名输入框里面的值，field是指checkusername所在的表单movie_form。返回true，则验证通过，否则验证失败
var reg = /[^u4e00-u9fa5]+$/i; //(/[^u4E00-u9FA5]/g //中文正则表达式
if(!reg.test(val)) //判断输入框里面的值是否为中文，
{
return false; //不是中文
}
return true;
},
checkusernameText: '请输中文',//校验错误时提示信息
//密码检验
repetition: function(val, field) { //返回true，则验证通过，否则验证失败
if (field.repetition) { //如果表单有使用repetition配置，repetition配置是一个JSON对象，该对象提供了一个名为targetCmpId的字段，该字段指定了需要进行比较的另一个组件ID。
var cmp = Ext.getCmp(field.repetition.targetCmpId); //通过targetCmpId的字段查找组件
if (Ext.isEmpty(cmp)) { //如果组件（表单）不存在，提示错误
Ext.MessageBox.show({
title: '错误',
msg: '发生异常错误，指定的组件未找到',
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK
});
return false;
}
if (val == cmp.getValue()) { //取得目标组件（表单）的值，与宿主表单的值进行比较。
return true;
} else {
return false;
}
}
},
repetitionText: '密码不一致'
});
Ext.onReady(Ext.f.init,Ext.f);
</script>
</head>
<body>
</body>
</html>
