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

ExtJS学习(1)

2016-11-24 09:47 99 查看

学习大纲 :

1.模仿 Js 的 alert.

2.学习 ExtJs 的准备工作,和学习方法

HTML - - -> 熟悉

CSS - - -> 熟悉

JavaScript - - -> 精通

JS的oo(JavaScript的面向对象变成) - - -> 精通

aJax - - -> 精通

推荐书籍:

《JavaScript的设计模式》

《征服AjaxWeb 2.0快速入门与项目实践》

3.ExtJS对原生的JS的扩展

(1)Array 的 every()方法

(2)Array 的 filter()方法

(3)Array 的 contains()方法

(4)Array 的 toArray()方法

目录结构



代码及知识点 :

1、模仿 Js 的 alert.

index.jsp 页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path = request.getContextPath();
// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）: String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtJs 学习 !</title>
<base href="<%=basePath%>">
</head>
<body>
<button onclick="dump('practice/basic.html')">练习_1</button>
</body>
<script type="text/javascript">
function dump(url){
window.location=url;
}
</script>
</html>


在index.jsp页面我做了一个按钮,跳转到 basic.html 页面



basic.html 页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World !!!</title>
<link rel="stylesheet" type="text/css" href="../ext-4.0.0/resources/css/ext-all.css">
<!-- 引入样式 -->
<script type="text/javascript" src="../ext-4.0.0/bootstrap.js"></script>
<!--
在4.0以前的版本引入的是ext-all.js 或者 ext-all-debug.js
但是在4.0中我们引入 bootstrap.js就行   在运行的时候回自动把ext-all.js也引入进去
-->
<script type="text/javascript" src="p_01/practice.js"></script>
<!--
引入我们写的 js 文件,而在这个页面我们并不写任何的JavaScript代码,所有的JavaScript
代码我们都单独写成一个 js 文件,然后在这个页面引入,这样我们的代码会看起来更加的干净、清晰。
-->
</head>
<body>
</body>
</html>


practice.js 页面

(function(){
Ext.onReady(function(){
Ext.MessageBox.alert("hello","Hello world!");
//      alert(1);
});
})();


(1). 方法 onReady( Object fn, Object scope, Object options )

onReady() 是在Ext框架及页面的html代码加载完后，所要执行的函数,一般会在这里做一些初始化。

该方法的调用发生在Document对象加载完毕后，HTML的onload事件及image加载之前。此函数非常重要，所有的资源都必须加载完毕方可进行ExtJS的函数调用即Ext.onReady()是ExtJS的入口点。

调用onReady()方法时可以带三个参数 :

第一个参数是必须的，表示要执行的函数或匿名函数，

第二参数表示函数的作用域，

第三个参数表示函数执行的一些其它特性，比如延迟多少毫秒执行等，大多数情况下只需要第一个参数即可。

如上面的例子中,页面加载完毕后会调用一个匿名函数,在页面弹出提示框 .



可以在一个页面中多次调用onReady方法，则将会把这些方法放到事件队列中，依次执行;onReady的第三个参数是事件执行的一些特殊属性描述，可以是简单的true或false，也可以是一个对象，对象中可以包含delay、single、buffer等属性，比如在上面的代码中添加下面的代码：

Ext.onReady(function(){
alert("多个onReady测试");
},this,{delay:5000});


则在页面加载完成后，执行了第一个onReady()中的匿名函数，5秒后会执行上面第二个onReady()方法中的匿名函数。



这里面就涉及到了Ext.MessageBox.alert(); 和 alert 的区别.

(2). Ext.MessageBox.alert(); 和 alert 的区别 :

Ext.MessageBox.alert实际上是用div等CSS方式做出来的效果,而不是真正意义上的弹窗.对于这一点,我们可以这样证明:

(function(){
Ext.onReady(function(){
Ext.MessageBox.alert("hello","Hello world!");
alert(1);
});
})();


在这段代码中,我们可以先把 alert(1); 放到上面,Ext.MessageBox.alert(“hello”,”Hello world!”); 放到下面.于是我们看到的效果是,先出现一个 1 的弹窗,当我们点确定之后,”hello”,”Hello world!” 的弹窗才会出现,也就是说 , 正常的弹窗是会阻止后面的程序的运行的;

下面我们再把它们俩的位置对调,我们会看到两个弹窗同时出现,这也就说明了,Ext.MessageBox.alert() 并不是真正意义上的弹窗.

2、

3、ExtJS对原生的JS的扩展

(1)Array 的 every()方法



API对every的描述

/**遍历数组**/
Ext.Array.every(myArray, function(item){
if(item > 0){
return true;
}else{
alert(item);
return false;
}
}, this );


(2)Array 的 filter()方法



API对filter的描述

/**过滤数组**/
var myNewArray = Ext.Array.filter(myArray,function(item){
if(item > 0){
return true;
}else{
return false;
}
},this);
alert(myNewArray.join("\n"));


(3)Array 的 contains()方法



API对contains的描述

/**是否包含给定元素**/
var flag = Ext.Array.contains(myArray,523);
alert(flag);


(4)Array 的 toArray()方法

/**转换成真正的数组**/
function test() {
var args = Ext.Array.toArray(arguments),
fromSecondToLastArgs = Ext.Array.toArray(arguments, 1);

alert(args.join(' '));
alert(fromSecondToLastArgs.join(' '));
}

test('just', 'testing', 'here'); // 提示 'just testing here';
// 提示 'testing here';

Ext.Array.toArray(document.getElementsByTagName('div')); // 将把 NodeList 转换成一个数组
Ext.Array.toArray('splitted'); // returns ['s', 'p', 'l', 'i', 't', 't', 'e', 'd']
Ext.Array.toArray('splitted', 0, 3); // returns ['s', 'p', 'l']

})();


上面这段代码就是API给出的例子.

通过这几个例子学习看API 文档,给出的方法还有很多,这里就不一一试验了.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript extjs
相关文章推荐
新的分享
章节导航