您的位置：首页 > Web前端 > JavaScript

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

2017-05-23 09:31 134 查看

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方法：用于创建一个或者多个命令空间，命名空间用于限定函数，类的范围和作用域，该方法自己研究

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航