extjs课程之form表单 _JavaScript

extjs教程之form表单

csdn-link:http://blog.csdn.net/maomaolingyu/archive/2010/12/21/6089307.aspx

一：页面（jsp）导入extjs引用文件

?<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>

<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验证，要求的格式是"langsin@gmail.com"
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表单就结束了..

）