extjs教程之form表单

最新推荐文章于 2021-10-09 12:08:29 发布

郜景涛

最新推荐文章于 2021-10-09 12:08:29 发布

阅读量7.7k

点赞数

分类专栏： Technology 文章标签： extjs function json stylesheet 服务器正则表达式

本文链接：https://blog.csdn.net/maomaolingyu/article/details/6089307

版权

Technology 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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

<body>

</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等。可以直接利用

}

这样一个表单的的展示和表单验证到表单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表单就结束了..

）