常用笔记--EXT方法

  开发者博客：www.developsearch.com

 

 

一、Ext

1.1　　Ext.isEmpty(v, allowBlank)　　//是否为空[链接]

1.2　　Ext.isArray(v)　　　　 //是否为数组集合

1.3　　Ext.isPrimitive(v)　　  //是否是基本数据类型String/Number/Boolean

1.4　　Ext.isFunction(v)　　  //是否是函数

1.5　　Ext.isNumber(v)　　   //是否是数字

1.6　　Ext.isString(v)　　　　//是否是字符串

1.7　　Ext.isBoolean(v)　　　//是否是bool值

1.8　　Ext.isIE/isIE6/isIE7/isIE8...　　//判断浏览器

1.9　　Ext.isWindows/isLinux/isMac/isAir　　//判断平台(操作系统)

1.10　　Ext.isDefined　　　　//对象是否已经定义

1.11　　Ext.id(el,prefix)　　//返回唯一的id值，el位元素Id,prefix为前缀

1.12　　Ext.urlEncode(o, pre)　　//将JSON数据转换URL参数串,如{a:1,b:2} => a=1&b=2

1.13　　Ext.urlDecode(string, overwrite)　　//将url参数列表转换成json格式数据，overwrite如果为true，则后面的同名参数值覆盖前面的同名参数值（默认为false即不覆盖而以数组形式返回）

1.15　　Ext.each(array, fn, scope)　　//遍历数组，例:Ext.each([1,2,3],function(value,index,a){ //index:索引号,0开始  value:当前值 a:数组引用 });

1.16　　Ext.encode(o)　　　　//将对象转换成json字符串，详细说明和用法：这里

1.17　　Ext.decode(o)　　　　//将json字符串转换成对象

1.18　　Ext.combine()　　//数组合并

1.19　　Ext.num(value,defaultValue)　　//如果是数字，直接返回本身，否则返回默认值，注意"5"这里也会返回默认值的

1.20　　Ext.copyTo(dest, source, names)　　//拷贝source中names属性列表至dest中

1.21　　Ext.unique(arr)　　　//剔除数组中重复的元素，让数组每个元素保持唯一

1.22　　Ext.clean(arr)　　　  //复制数组?!

1.23　　Ext.flatten(arr)　　　//将多维数组转换成一维数组

1.24　　Ext.min(arr, comp)　　//查找数组中最小的元素

1.25　　Ext.max(arr, comp)　　//查找数组中最大的元素

1.26　　Ext.mean(arr)　　　　 //计算数组元素平均值(总和除以个数)

1.27　　Ext.partition(arr, truth)　　//根据arr元素的bool值拆分成新的二维数组并返回

     例1：Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]

     例2：Ext.partition(arr,function(val){ return val == "class1" });

1.28　　Ext.invoke(arr, methodName,)　　//执行arr数组中对象的methodName方法,args为方法的参数，返回执行结果数组

1.29　　Ext.pluck(arr, prop)　　//返回数组中属性名(property name)等于prop的值的新数组     Ext.pluck(arr, "className"); => [arr1.className,arr2.className]

1.30　　Ext.zip({Arrays|NodeLists},{Function}) //压缩多个数组为一个数组, Ext.zip([1,2,3],   [4,5,6]); // [[1,4],[2,5],[3,6]]，支持Function自定义合并

1.31　　Ext.type(object)　　//返回对象的类型：string,number,boolean,function,object,array,regexp,element,nodelist,textnode,whitespace

 

二、Ext.util.Format

2.1　　Ext.util.Format.capitalize(value);　　//首字母大写

2.2　　Ext.util.Format.ellipsis(value, len, word); //从字符串开始处截取len长度显示，超过部分用...表示；word为布尔值，为true时在前面截取的基础上再从' '、'.'、'!'、'?'关键字处截取前面(len)，ellipsis("abcde.fghijkl",10,true)返回abcde

2.3　　Ext.util.Format.htmlEncode(value);　　 //HTML编码，将& <  >  “替换为&amp;&lt;&gt;&quot;

2.4　　Ext.util.Format.htmlDecode(value);　　 //HTML解码，与上面相反

2.5　　Ext.util.Format.trim(value); 　　　　　　//截取字符串左右的空格

2.6　　Ext.util.Format.substr(value, start, length); //从value指定的start位置开始截取length长度的子串返回

2.7　　Ext.util.Format.lowercase(value);　　      //转换大写

2.8　　Ext.util.Format.uppercase(value);　　     //转换小写

2.9　　Ext.util.Format.stripTags(v);　　　　      //去除HTML标签:/<\/?[^>]+>/gi

2.10　　Ext.util.Format.usMoney(v); //转换到'$'符号的货币形式

2.11　　Ext.util.Format.date(v, format);　　　　//格式化日期输出,format默认格式"m/d/Y"

2.12　　Ext.util.Format.round(value, precision);　　//四舍五入，precision指精确位数

2.13　　Ext.util.Format.number(v, format);　　　　//格式化数字显示

2.14　　Ext.util.Format.nl2br(value); //将字符串中的'\n'替换成'<br />'

2.15　　Ext.util.Format.fileSize(value);  //将字节数转成更大的单位KB和MB显示，fileSize(1024) = 1KB

2.16　　Ext.util.Format.defaultValue(value, defaultValue);　　//如果value未定义或为空字符串则返回defaultValue

2.17　　Ext.util.Format.stripScripts(v);　　　//去除脚本标签

2.18　　Ext.util.Format.undef(value);　　　　//如果value未定义,返回空字符串，反之返回value本身

 

三、扩展JS原有对象

3.1　　String

3.1.1　　.format(format)　　//和C#里面是一样的用法

3.1.2　　.toggle(value, other)　　//交换值,如果当前值等于value,则被赋值other

3.2　　Array

3.2.1　　.indexOf(o)　　//返回元素o在数组ArrayObject中的位置，找不到返回-1

3.2.2　　.remove(o)　　//从数组ArrayObject删除元素o

3.3　　Function

3.3.1　　.createInterceptor(fcn, scope)　　//创建阻断方法,如果fcn返回false,原方法将不会被执行，参见这里

3.3.2　　.createCallback()　　　//创建回调，以无参的函数作为参数，但是现有的方 法已经具有了参数，如果直接写上可以用这个来创建一个回调，类似于function(){ //实际的带参调用 } ，见这里1、这里2

3.3.3　　.createDelegate(obj, args, appendArgs) //创建委托，与上面相比，自己可以访问obj中的属性和方法，见这里

3.3.4　　.defer(millis, obj, args, appendArgs)　//定时执行，隔millis毫秒后执行原方法，参见这里

3.3.5　　.createSequence(fcn, scope)　　//Ext-more.js中，创建组合方法,执行原方法+fcn，参见这里

 

四、 其他

4.1　　表单

4.1.1　　一次取得表单所有的表单元素key/value集合

form1.form.getValues()  //form1为Ext.FormPanel，例如：

          //注意

          var conn = new Ext.data.Connection();

             conn.request({

                url: 'submit.aspx?method=Submit4',

                //此处与params对应，如果为POST，则服务器端从Request.Form中可以取得到数据，反之从QueryString中取数据

                method: 'POST',//GET

                params:form1.form.getValues(),

                success: function(response, opts) {

                     MsgInfo(response.responseText);

                }

              });

form1.form.setValues(values)     //form1.form.setValues({id:1,name:'aabbcc'}) 赋值

4.1.2　　表单元素取值赋值一次取得

4.1.2.1　　form1.form.findField('TextBox').getValue()

4.1.2.2　　form1.form.getValues().TextBox

4.1.2.3　　form1.form.getFieldValues().TextBox

4.2　　切换皮肤

Ext.util.CSS.swapStyleSheet("theme", "resources/css/ext/xtheme-orange.css");　//注意路径

 

 

 

 

 

 

 

1、指定验证的正则表达式，regexText指定验证不通过时的提示信息：

items:{

id:”ipAddress”,

name:”ipAddress”,

xtype:’textfield’,

fieldLabel:’IP地址’,

allowBlank:true,//不允许为空

regex:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,

regexText:’必须是合适的IP地址’,

anchor:’90%’

}

当使用的为非ip地址时，在错误提示信息中会提示regexText的值：’必须是合适的IP地址’。

 

2、使用Extjs内置属性进行验证

Extjs内置allowBlank，maxlength,minlength等属性，可以对输入内容进行限制，如果不符合，会生成错误提示。

如上一段代码中的allowBlank设置为false,则当输入内容为空时会生成错误提示。

var form1 = new Ext.form.FormPanel({

width:350,

renderTo:”form1″,

title:”FormPanel”,

defaults:{xtype:”textfield”,inputType:”password”},

items:[

{

fieldLabel:"不能为空",

allowBlank:false, //不允许为空

blankText:"不能为空", //错误提示信息，默认为This field is required!

id:"blanktest",

}]

});

 

 

3、使用Vtype进行验证

Extjs内置了四种验证方式，如下：

//form验证中vtype的默认支持类型

1.alpha   //只能输入字母，无法输入其他（如数字，特殊符号等）

2.alphanum   //只能输入字母和数字，无法输入其他

3.email   //email验证，要求的格式是”langsin@gmail.com”

4.url   //url格式验证，要求的格式是http://www.langsin.com

items:{

id:” email”,

name:”ipAddress”,

xtype:’textfield’,

fieldLabel:’email地址’,

allowBlank:true,//不允许为空

vtype:”email”,

vtypeText:'不是有效的邮箱地址′,

anchor:’90%’

}

当输入的内容不是正确的email地址时，会生成错误提示信息

 

4、自定义Vtype扩展验证

①简单定义函数

自定义Vtype时，实际使用js语言，因此此部分是最大最广泛的，可以使用语言的任何特性。

首先要扩展Ext.form.VTypes，然后在使用时调用扩展方法。如下：

Ext.apply(Ext.form.VTypes,

{

integer : function(val, field)

{

var exp = /^([1-9]\d{0,7}|0)$/;

return val.match(exp);

},

integerText : ‘您输入的必须为数字！’,

其中val为文体框中的值，field 为文本框所在的组件；

integer为定义的验证方法，integerText为默认的提示信息，在调用时可以通过指定vtypeText来覆盖此定义。

 

②定义验证函数及提示信息

Ext.apply(Ext.form.VTypes,

{

integer : function(val, field)

{

var exp = /^([1-9]\d{0,7}|0)$/;

field.vtypeText = ‘您输入的必须为数字！’;//此处输入其他提示信息

return val.match(exp);

},

此处指定的vtypeText值是动态运行是设置的，会覆盖调用时指定的vtypeText值

 

③定义传值对象及组合验证

在ext的vtype中指定的方法是可以传入自定义参数。如下定义的验证方法:

Ext.apply(Ext.form.VTypes,

{

commonValidate : function(val,field)

{

var attr = field.vlist.split(‘$’);//此处field.vlist即为定义的vlist

for(var i=0;i<attr.length;i++){

var functionName = attr[i];

if(!eval(“Ext.form.VTypes.”+functionName+”(val,field)”))

{

return eval(“Ext.form.VTypes.”+functionName+”(val,field)”);

}

}

}

return true;

}

而在调用时如下:

items:{

xtype:’textfield’,

fieldLabel:’单位名称’,

lengthRange:{min:’0′, max:’50′},// lengthRange中方法参数

vtype:’commonValidate’,//调用commonValidtate方法

vlist:”lengthRange$specialChar”,//传入方法参数

anchor:’90%’

}

如上调用，vlist为自定义的属性值（js语法决定可以直接在类中增加属性）,在vtype方法中通过field.vlist来获取传入值。

而lengthRange方法又通过获取lengthRange中的值来获取参数

lengthRange : function(val, field)

{

var minLength = 0;

var maxLength = 100;

if (field.lengthRange)

{

minLength = field.lengthRange.min;

maxLength = field.lengthRange.max;

}

if (val.length < minLength || val.length > maxLength)

{

//定义此输入框的提示信息

if(minLength == 0)

{

field.vtypeText= “您输入的长度必须小于” + maxLength + “!”;

}

else

{

field.vtypeText= “您输入的长度必须在” + minLength + “到” + maxLength + “之间!”;

}

return false;

}

return true;

},

参考

{

xtype : “textfield”,

name : ‘UserName’,

id: ‘UserName’,

allowBlank : false,

blankText : ‘注册用户名不能为空’,

regex : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,11}$/,

regexText : ‘用户名不合法(必须以字母开头,长度6-12位)!’,//验证错误之后的提示信息

fieldLabel : ‘登录名’,

emptyText : ‘填写用户名’,

invalidText : ‘用户名已经被注册!’,

width : 250,

validationEvent : ‘blur’,

validator : function(val) {

Ext.Ajax.request({

url : ‘check.do?name=’+ val,

method : ‘post’,

success : function(response,options)

{

var res = Ext.util.JSON.decode(response.responseText);

return (res.success);

}

})

}

}

 

 

 

 

 

 

 

ExtJs4 读取XML文件时字段和根名都要区分大小写

    Ext.define('MyData',{

        extend: 'Ext.data.Model',

        fields: [{ name:'Job_id', mapping: 'Job_id'}

        ,'Job_desc'

        ,'Min_lvl'

        ,'Max_lvl'

        ]

    });

           

var store = Ext.create('Ext.data.Store', {

                storeId: 'DataStore',

                autoLoad: true,

                model: 'MyData',

                proxy: {

                    type: 'ajax',

                    url: 'MyXmlData.xml',   //'GetExtjsData.aspx?parm=List',     

                    reader: {

                        type: 'xml',

                        root: 'dataset',

                        record: 'record'

                    }

                }

});

 

xml文件格式：多记录时要加根目录‘dataset’

<?xml version='1.0' encoding='utf-8'?>

<dataset>

     <record>

            <Job_id>1</Job_id>

            <Job_desc>name1</Job_desc>

            <Min_lvl>23</Min_lvl>

            <Max_lvl>33</Max_lvl>

    </record>

  <record>

    <Job_id>2</Job_id>

    <Job_desc>name1</Job_desc>

    <Min_lvl>23</Min_lvl>

    <Max_lvl>33</Max_lvl>

  </record>

</dataset>

 

 

 

 

 

 

1、Grid数据刷新

    a、直接刷新，获取grid的store后，调用store的reload()方法；

    b、修改Grid数据来源，修改列表(grid)里store的加载url ：    

        grid.getStore().proxy.conn.url = url;   

        grid.getStore().reload(); 

 

2、以相对页面或框架设置Grid控件宽度或高度

    假如有GridPanel控件句柄为grid，则设置相对高度或宽度为：

        grid.setHeight(document.body.clientHeight - 10); 

        grid.setWidth(document.body.clientWidth- 10); 

    或

        grid.setHeight(document.body.clientHeight * 0.8); 

        grid.setHeight(document.body.clientWidth * 0.8); 

    这个也适合其他的控件，如panel、tabPanel等

 

3、Ext.data.Store里baseParams与Store.load({params:{}})的区别

    baseParams里的参数是一直存在的，而params里的参数，只有load时才会传递过去，当调用reload时参数不会再传过去。也即是“一次性”的。