关于ExtJS中的mask和unmask

Ke — Wed, 21 Dec 2011 02:29:00 GMT

为了在发起某一事件后，阻止用户对界面的进行操作，可以使用ExtJS提供的针对Ext.Element的mask和unmask

例如：
1、对整个body操作

Java代码

function reLoadData(){
Ext.getBody().mask("数据重新加载中，请稍等");
var requestConfig = {
url : '#',//url可以根据需要设置
callback : function(options, success, response){
var msg = ["", , "\n", "", response.responseText];
Ext.MessageBox.alert('提示', msg.join(''));
Ext.getBody().unmask();//去除MASK
}
}
Ext.Ajax.request(requestConfig);
}

2、对组件实例操作
new Ext.form.FormPanel({id:'form',……});
Ext.getCmp("form").getEl().mask("数据重新加载中，请稍等");
Ext.getCmp("form").getEl().unmask();

Ke 2011-12-21 10:29 发表评论

ext4 VTypes扩展(轉)

Ke — Fri, 04 Nov 2011 03:25:00 GMT

轉自:http://lbyzx123.iteye.com/blog/1143556

新建一个文件，在文件内插入如下内容：

Ext.apply(Ext.form.field.VTypes,
{

//首先定义一个vtype名称，和他的验证函数，val参数是文本框的值，field是文本框。一般我就使用val和正则表达式比较就OK了。
//然后定义一个vtype的报错信息，与vtype名称加Text后缀。OK了。
passwd: function(val, field)
{
        if (field.initialPassField)
        {
            var pwd = Ext.getCmp(field.initialPassField);
            return (val == pwd.getValue());
        }
        return true;
},
passwdText: '两次输入的密码不一致！',

chinese:function(val,field)
{
        var reg = /^[\u4e00-\u9fa5]+$/i;
        if(!reg.test(val))
        {
            return false;
        }
        return true;
},
chineseText:'请输入中文',

age:function(val,field)
{
        try
        {
            if(parseInt(val) >= 18 && parseInt(val) <= 100)
                return true;
            return false;
        }
        catch(err)
        {
            return false;
        }
},
ageText:'年龄输入有误',

alphanum:function(val,field)
{
        try
        {
            if(!/\W/.test(val))
                return true;
            return false;
        }
        catch(e)
        {
            return false;
        }
},
alphanumText:'请输入英文字母或是数字,其它字符是不允许的.',

url:function(val,field)
{
        try
        {
            if(/^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i.test(val))
                return true;
            return false;
        }
        catch(e)
        {
            return false;
        }
},
urlText:'请输入有效的URL地址.',

max:function(val,field)
{
        try
        {
            if(parseFloat(val) <= parseFloat(field.max))
                return true;
            return false;
        }
        catch(e)
        {
            return false;
        }
},
maxText:'超过最大值',

min:function(val,field)
{
        try
        {
            if(parseFloat(val) >= parseFloat(field.min))
                return true;
            return false;
        }
        catch(e)
        {
            return false;
        }
},
minText:'小于最小值',

datecn:function(val,field)
{
        try
        {
            var regex = /^(\d{4})-(\d{2})-(\d{2})$/;
            if(!regex.test(val)) return false;
            var d = new Date(val.replace(regex, '$1/$2/$3'));
            return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear());
        }
        catch(e)
        {
            return false;
        }
},
datecnText:'请使用这样的日期格式: yyyy-mm-dd. 例如:2008-06-20.',

integer:function(val,field)
{
        try
        {
            if(/^[-+]?[\d]+$/.test(val))
                return true;
            return false;
        }
        catch(e)
        {
            return false;
        }
},
integerText:'请输入正确的整数',

minlength:function(val,field)
{
        try
        {
            if(val.length >= parseInt(field.minlen))
                return true;
            return false
        }
        catch(e)
        {
            return false;
        }
},
minlengthText:'长度过小',

maxlength:function(val,field)
{
     try
     {
        if(val.length <= parseInt(field.maxlen))
            return true;
        return false;
     }
     catch(e)
     {
        return false;
     }
},
maxlengthText:'长度过大',

ip:function(val,field)
{
        try
        {
            if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)))
                return true;
            return false;
        }
        catch(e)
        {
            return false;
        }
},
ipText:'请输入正确的IP地址',

phone:function(val,field)
{
        try
        {
            if(/^((0[1-9]{3})?(0[12][0-9])?[-])?\d{6,8}$/.test(val))
                return true;
            return false;
        }
        catch(e)
        {
            return false;
        }
},
phoneText:'请输入正确的电话号码,如:0920-29392929',

mobilephone:function(val,field)
{
        try
        {
            if(/(^0?[1][35][0-9]{9}$)/.test(val))
                return true;
            return false;
        }
        catch(e)
        {
            return false;
        }
},
mobilephoneText:'请输入正确的手机号码',

alpha:function(val,field)
{
        try
        {
            if( /^[a-zA-Z]+$/.test(val))
                return true;
            return false;
        }
        catch(e)
        {
            return false;
        }
},
alphaText:'请输入英文字母',

money:function(val,field)
{
        try
        {
            if(/^\d+\.\d{2}$/.test(val))
                return true;
        return false;
        }
        catch(e)
        {
            return false;
        }

},
moneyText:'请输入正确的金额'
});

在页面引入上面新建的文件，在相应界面的组件中定义vtype,即可进行有限验证。

引用示例代码：

    //构建一个密码Form
        var pwd = new Ext.form.Panel({
          labelWidth: 125,
          frame: true,
          title: '密码验证框',
          width: 350,
          renderTo : 'pw',
          allowDomMove : true,
          draggable : true,
          defaults: {
            width: 175,
            inputType: 'password'
          },
          defaultType: 'textfield',
          items: [{
            fieldLabel: '密码:',
            name: 'pass',
            id: 'pass'
          },{
            fieldLabel: '密码确认:',
            name: 'pass-cfrm',
            vtype: 'passwd',
            initialPassField: 'pass'
          }]
        });

其中，initialPassField是自定义的属性，记录上一个password的id,然后在VType的验证函数中取出上一个password组件的值，进行比较。

记住：上一个password必须设置id属性。

Ke 2011-11-04 11:25 发表评论

BlogJava-bob-文章分类-extJs

关于ExtJS中的mask和unmask

ext4 VTypes扩展(轉)