ExtJS学习(1)

来源：互联网发布：谱聚类 ncut算法那编辑：程序博客网时间：2024/06/05 05:18

学习大纲 :

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 文档,给出的方法还有很多,这里就不一一试验了.

0 0