Ext Js入门第2篇-核心工具方法

来源：互联网发布：加热脚垫淘宝编辑：程序博客网时间：2024/06/04 19:54

Ext类库以Ext命名空间为核心，其中Ext命名空间下主要提供各种核心工具方法，这些方法用起来很方便，下面开始详细讲解

1.onReady方法

onReady方法是Ext.Loader.onReady()方法的别名，以后使用的就是Ext.onReady()，该方法是在整个页面加载完成之后执行。

Ext.onReady(Object fn,Object scope,Object options):第一个参数指定Ext Js和Html页面加载完成后执行的方法；第二个参数，第三个参数是可选的，第二个方法指定执行该方法的范围；第三个参数执行附加选项

<html><head><meta charset="UTF-8"><script type="text/javascript" src="../js/ext-all.js" ></script><script type="text/javascript" src="../js/bootstrap.js" ></script><link rel="stylesheet" href="../css/ext-all.css" /><script type="text/javascript" src="../js/ext-lang-zh_CN.js" ></script><script type="text/javascript" src="../js/jquery.js" ></script><title></title></head><body></body><script>Ext.onReady(function(){alert("Ext Js加载完毕");});</script></html>

上面只穿了一个参数，下面传递两个参数

<html><head><meta charset="UTF-8"><script type="text/javascript" src="../js/ext-all.js" ></script><script type="text/javascript" src="../js/bootstrap.js" ></script><link rel="stylesheet" href="../css/ext-all.css" /><script type="text/javascript" src="../js/ext-lang-zh_CN.js" ></script><script type="text/javascript" src="../js/jquery.js" ></script><title></title></head><body></body><script>var fn=function(){alert("Ext Js加载完毕");}var user={name:"你好"}Ext.onReady(fn,user);</script></html>

Ext Js和Html页面加载完毕之后执行fn()函数，并以user对象作为函数执行范围，此时fn()函数内部this代表user对象

2.Ext.defer方法

Ext.defer()用于指定延迟执行的函数，该方法格式如下

defer(Function fn,Number millis,[Object scope],[Array args]):fn执行需要延迟的函数；millis指定延迟多少毫秒后执行fn函数；scope参数用于指定执行fn函数范围；args执行传入fn函数的参数

<html><head><meta charset="UTF-8"><script type="text/javascript" src="../js/ext-all.js" ></script><script type="text/javascript" src="../js/bootstrap.js" ></script><link rel="stylesheet" href="../css/ext-all.css" /><script type="text/javascript" src="../js/ext-lang-zh_CN.js" ></script><script type="text/javascript" src="../js/jquery.js" ></script><title></title></head><body></body><script>var fn=function(msg){alert("此用户名字是："+this.name+"，"+msg);}var user={name:"你好"}//延迟3秒Ext.defer(fn,3000,user,["欢迎你"]);</script></html>

执行效果：看到弹框延迟3秒

3.Ext.apply()和Ext.applyIf()方法

两个方法都用于将一个对象的属性复制到另外个对象中去，但不同之处在于：Ext.apply()将会覆盖目标对象的属性，而Ext.applyIf()不会覆盖，举个例子

<script>var user={name:"你好",age:500,gender:"男"}var bus={name:"三菱",color:"白色"}//指定bus对象复制到user中Ext.apply(bus,user);for(var propName in bus){document.writeln(propName+"--->"+bus[propName]+"</br>");}    </script>

4.还有Ext.define(String Name,OBject data,[Function createFn]),该方法指定三个参数，className用于执行自定义的类名，data为该类名的属性，createFn指定创建成功的回调函数，此处不举例子，大家可以自己尝试写例子

5.Ext.isXxx方法

Ext.isXxx()方法代表判断是否为某某对象，isXxx()方法总是返回Boolean值

<script>document.writeln("'abc'是否为字符串："+Ext.isString('abc')+"<br />");document.writeln("5是否为数值："+Ext.isNumber(5)+"<br />");document.writeln("5是否为函数："+Ext.isFunction(5)+"<br />");</script>

6.Ext.each和Ext.iterate方法

Ext.each()用于遍历数组，它是Ext.Array.each()的别名

Ext.iterate()迭代器，跟Ext.each()类似

<script>     //定义一个数组     var books=['三国','水浒','西游记'];     //遍历数组     Ext.each(books,function(book,index,arr)     {     document.writeln("第"+index+"本图书是："+book+"</br>")     });     Ext.iterate(books,function(key,value,myself)     {     document.writeln(key+"-->"+value+"</br>");     });</script>

7.Ext.namespace方法：用于创建一个或者多个命令空间，命名空间用于限定函数，类的范围和作用域，该方法自己研究

阅读全文

0 0