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表单就结束了..


 

 

 

你可能感兴趣的:(json,正则表达式,function,服务器,ExtJs,stylesheet)