extjs教程之form表单
一：页面（jsp）导入extjs引用文件
<link rel="stylesheet" type="text/css" href="<%=basePath %>js/ext-3.3.0/resources/css/ext-all.css">
<script type="text/javascript" src="<%=basePath %>js/ext-3.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath %>js/ext-3.3.0/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=basePath %>jquery1.4.2.js"></script>
<script type="text/javascript" src="<%=basePath %>test/jsonUtil.js"></script>
<script type="text/javascript" src="<%=basePath %>Form.js"></script>
<!-- this can put your customer js-->
<body>
<div id="show" class="div_1">
</div>
</body>
一般来说extjs的页面很少都很多乱七八糟的代码，要是完全基于ext的话可以不放置或者少量的div就行
二：Form.js:
Ext.onReady(function(){//指定页面加载完毕就开始执行类似与juery$()
Ext.QuickTips.init();//悬停提示
Ext.form.Field.prototype.msgTarget='side'; //提示方式 qtip','side','title','under'
var username = new Ext.form.TextField({
id:'ID_username',
emptyText:'please enter you name',
fieldLabel:'用户名',
//focusClass:'x-date-bottom',
inputType:'text',
invalidClass:'x-date-bottom',//当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
invalidText:'error',
name:'username',
regex :/^a.*$/,//验证的正则表达式 只能以a开头
regexText:'不合法'//错误提示信息
})
var boy = new Ext.form.Radio({
id:'ID_boy',
name:'user_sex',
boxLabel:'男',
checked:true,
inputValue:'1'
});
var girl = new Ext.form.Radio({
id:'ID_girl',
name:'user_sex',
boxLabel:'女',
inputValue:'2'
});
var sexgroup = new Ext.form.RadioGroup({ //单选按钮布局
id:'ID_sex',
name:'usersex',
coloum:1,
fieldLabel:'性别',
items:[boy,girl]
});
var game = new Ext.form.Checkbox({
id:'ID_game',
inputValue:'game',
boxLabel:'游戏'
})
var music = new Ext.form.Checkbox({
id:'ID_music',
inputValue:'music',
boxLabel:'游戏'
})
var sport = new Ext.form.Checkbox({
id:'ID_sport',
inputValue:'sport',
boxLabel:'运动'
})
var hobby = new Ext.form.CheckboxGroup({//复选框布局
id:'ID_hobby',
name:'user_hobby',
coloum:1,
items:[game,music,sport]
})
var birthday = new Ext.form.DateField({//日期选择框
id:'ID_birthday',
name:'birthday',
emptyText :'选择出生日期',
fieldLabel:'出生日期',
format:'Y-m-d',
minValue:'1948-02-01',
maxValue:'2109-12-31',
allowBlank:false,
value:new Date().dateFormat('Y-m-d')
});
var provinceproxy = new Ext.data.HttpProxy({
url:'user.do?md=showProvince'//后台return {citys:[{id:'4',city:'haidian'},{id:'5',city:'cw'},{id:'6',city:'csd'}]}
});
var provincereader = new Ext.data.JsonReader({
root:'provinces',
fields: [{name:'id'},{name:'province'}]
}
);
var provincestore = new Ext.data.Store({
proxy:provinceproxy,
reader:provincereader
});
下面解析下proxy,store,reader三个extjs对内容的处理的类：
A proxy是访问网络资源的代理，可以通过它向服务器发起请求，返回需要的数据
B reader 根据发挥的json数据格式 和reader的设置格式匹配，读取数据
C store 数据的内容存储.
简单的来说，store 利用proxy去服务器读取数据，利用reader解析返回的数据 并存储在store中.其实exts已经起我们实现了几个常用的类.JsonStore,ArrayStore,HttpProxy,JsonReader等。可以直接利用
var cityproxy = new Ext.data.HttpProxy({
url:'user.do?md=showCity'
});
var cityreader = new Ext.data.JsonReader({
root:'citys',
fields: [{name:'id'},{name:'city'}]
}
);
var citystore = new Ext.data.Store({
proxy:cityproxy,
reader:cityreader
});
var cities = [//这个只是本地例子的一个测试
[1, 'USA', 'New York']
,[2, 'USA', 'Cleveland']
,[3, 'USA', 'Austin']
,[4, 'USA', 'Los Angeles']
,[5, 'D', 'Berlin']
,[6, 'D', 'Bonn']
,[7, 'F', 'Paris']
,[8, 'F', 'Nice']
,[9, 'GB', 'London']
,[10, 'GB', 'Glasgow']
,[11, 'GB', 'Liverpool']
];
var citiesStore = new Ext.data.SimpleStore({//这个只是本地例子的一个测试
fields:['cityid','vp', 'city']
,data:cities
});
function provinceSelect(combo,record,index){
city.clearValue();//清空数据
citystore.proxy=new Ext.data.HttpProxy({//根据选择项的id去服务器过滤数据
url:'user.do?md=showCity&province='+combo.value
})
citystore.load();//加载数据到内存中
}
var province = new Ext.form.ComboBox({
id:'ID_province',
name:'province',
xtype:'combo',
model:'local',//指定为从本地读取，其实是先把数据加载到本地.也可以指定为remote 从服务器加载
fieldLabel:'省',
triggerAction: 'all',
store:provincestore,
valueField: 'id',//值
hiddenName:'province',//用来存储表单项的 数据值 对于在提交表但是自动提交下拉框的值是必须的
displayField: 'province',//显示的属性
lastQuery:'',
listeners:{select:provinceSelect}//添加监听器..当下拉列表选择某项时触发，实现级联
})
provincestore.load();
var city = new Ext.form.ComboBox({
id:'ID_city',
name:'city',
xtype:'combo',
store:citystore,
valueField: 'id',
displayField: 'city',
model:'local',
hiddenName:'city',
triggerAction: 'all',
fieldLabel:'市'
})
var form = new Ext.form.FormPanel({
id:'loginform',
collapsible:true,
ctCls:'x-box-layout-ct custom-class',
defaultType:'text',
iconCls:'x-date-bottom',//图标css
labelAlign:'right',
labelStyle:'border:1',
//overCls:'x-date-middle .x-btn-mc em.x-btn-arrow',//可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除
style:'color:blue',
title:'表单god',
layoutConfig: {
labelSeparator: '~' // superseded by assignment below
},
labelSeparator: '：',
listeners:{
onclick:{
fn:function(loginform, e) {
alert('click');
}
}
}
,
items: [
username,
sexgroup,
birthday,
hobby,
province,
city
],
buttonAlign:'center',
buttons: [{
text: '注册',
handler: function() {
var data ='{';
form.items.each(function(){//由于想简化extjs表单项的数据格式，封装了所有表单元素到json的转化
data = data+ tojson(this.id,this.name,this.getXType());//
});
data=data+'}';
form.getForm().doAction('submit',
{
url:'user.do?md=regist',
method:'POST',
waitMsg:'正在登陆...',
timeout:10000,//10秒超时
params:"json="+form2json('myform'),//实现表单元素到json的自动转化 类似jquery的序列化
success:function(form, action){
var isSuc = action.result.success;
if(isSuc) {
//提示用户登陆成功
Ext.Msg.alert('消息', '登陆成功..'+isSuc);
location.href='tree.jsp';
}
},
failure:function(form, action){ alert('登陆失败');}
});
}
},
{
text: '重置',
handler: function() {
form.getForm().reset();
}
}
]
})
var windowWidth = window.screen.availWidth;
var left=windowWidth/2 - form.width/2;
var style='margin-top:150px;margin-left:'+left+'px;';
var el=Ext.get('show').applyStyles(style);
form.render(el); //渲染form组件到页面
}
这样一个表单的的展示和表单验证到表单json格式就提交到了后台，后台利用jsonlib可以直接转化为对象.然后继续自己的业务就行.
(
常用的表单验证用VTYPE：
1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum//只能输入字母和数字，无法输入其他
3.email//email验证，要求的格式是"[email protected]"
4.url//url格式验证，要求的格式是http://www.baidu.com
高级自定义表单验证
Ext.apply(Ext.form.VTypes,{
repeat:function(val,field){//val指这里的文本框值，field指这个文本框组件，大家要明白这个意思
if(field.confirmTo){//confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
return (val==pwd.getValue());
}
return true;
}
});
然后在需要比较的第二次输入的密码那 加上 confirmTo:'ID_user_pass',
表单元素到json格式的组装：这个自己编写代码实现，做成一个工具 .例如上例中的form2json.
表单的提交方式和对返回的处理。见上例
这样一个extjs表单就结束了..
）