ext4 学习笔记一

      一直感觉Ext在前台方面效果做的比较酷，最近想抽时间学习一下，应用到自己的项目中；下面是在学习各种Ext相关文档、博客以及论坛过程中汇总的一些知识点以及解惑。（如有侵权请留言）

 

 概念：

   （1）ExtJS是一个面向开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。（以前是基于YAHOO-UI,现在已经完全独立了）

   （2）之所以说是框架，因为它能够帮助我们在页面上快速而简单构建各种各样的控件，简化我们自己去写庞大js实现；它是一种纯面向对象的JS框架。扩展性相当的好，可以自己写扩展，自己定义命名空间，web应用可能感觉太大，不过您可以根据需要按需动态的加载您想要的类库就可以了，避免了网络传输流量问题。

   （3）它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧，更重要的是它核心的组件基本覆盖了我们构建富客户端的常用的组件以及各种功能，在统计方面做的也非常出色。

   （4）在3.0的时候提供了类似与dwr的方式调用后台代码，交互更加简单;4.0版本又提出了MVC模式的开发，支持组件化、模块插拔化设计以及提供本地数据源的支持。

 

 

第一章 EXTJS的基本概念

1. 组件component : 能够以图形化形式呈现界面的类，其中还可以分为容器组件与元件组件。

• 容器组件:能够包含其它容器或者元件组件的类，其是进行单元化组件开发的基础
• 元件组件：能图形化形式表现一个片面功能的组件，其不仅在实现了原有传统WEB程序的现有组件，而且还扩展了许多实用的组件，如刻度器、日历、树形列表等。

2. 类

    提供功能的非图形可形的类，它们为图形类提供了有力的支持

    按其功能可分为：数据支持类(Data)、拖放支持类（DD）、布局支持类（layout）、本地状态存储支持类（state）、实用工具类（Util）。

    密封类：不能被扩展的类

    原型类：扩展了javascript标准类库中的类

3. 方法

    作为类的功能体现，能够产生改变对象本身产生变化的直接因素

    方法按访问形式可分为公有方法与私有方法。但由于javascript从原理上根本不支持这种结构，因此在EXTJS中，私有与公有方法完全凭借着用户自觉，没有像JAVA那样的强制性。

4. 事件

    由类定义的，并且可以在类对象自身状态发生改变的触发。

    只有被定阅的事件才会有效

    如果不需要此事件，应该进行退定，增强程序的执行效率。

5. 配置选项

    用以初始化一个EXTJS类对象的手段

    注意，配置选项并不一定就是属性，总算是属性，也有可能出现属性返回的类型与你当初指定的配置选项类型不一致的情况。

6. 属性

    能够在程序运行期间，能够被访问，用以了解当前类对象的状态。

    在实际的编程中，EXTJS的属性设置，比较差劲，需要通过了解其源代码，才能了解各种实用属性的用处。

7. 命名空间

    能够将编写好的EXTJS类进行有效组织的手段。

    这个也是EXTJS能够称之为优秀AJAX框架的特征之一。

 

第二章 Ext4.0新特性以及常用数据处理功能

 

1. extjs4.0对原生javaScript功能进行了扩展（API中的Utilities模块中的NativeExtensions）

    Utilities：常用的一些工具处理类
    Native Extensions
       Ext.Array
       Ext.Number
       Ext.Object
       Ext.String
       Ext.JSON
       Ext.Date
       Ext.Function

具体扩展了那些，请参照具体的API说明，扩展的原理eg：

 

Js代码  

1. var Person = {name:'yfc',age:26};  
2.     //alert(Person['name']);  
3.     //extjs4.0提供getKey的函数  
4.     //alert(Ext.Object.getKey(Person,'yfc'));  
5.     Object.prototype.getValue = function(key,defValue){  
6.         if(this[key]){  
7.             return this[key];  
8.         }else{  
9.             return defValue;  
10.         }  
11.     }  
12. alert(Person.getValue("email","pcat@126.com"));  
13. //由于给Object的原型加上了一个getValue的函数，这样所有的对象（都继承Object）默认都会拥有这个函数。  

 

2. 事件机制与新特性

   （1）给对象加事件：

 

Js代码  

1. Ext.get("元素ID").on("click",function(){  
2.       //函数处理部分  
3. });  

 

   （2）新特性：create与define（extend 、requires、config、mixins、alias以及statics）。

• create：在ExtJs4.0中你可以通过new方式也可以用create的方式得到一个对象的实例，在4.0版本中建议用create的方式来创建实例，这样ExtJS会对创建的实例进行统一管理。

Js代码  

1. //create第一个参数为类路径，第二个参数为该类的一些初始化参数值（以对象的形式传递）  
2. var win = Ext.create('Ext.window.Window',{  
3.            width:400,  
4.            height:300,  
5.            title:'uspcat'  
6.           });  
7.   
8. win.show();  

 

• alias：别名的作用，可以把一个对象的内部函数暴漏处理啊，给其他对象直接调用。eg：

Js代码  

1. var o = {  
2.     say : function(){  
3.         alert(11111);  
4.         }  
5. }  
6.   
7. //通过o.say()调用函数  
8.   
9. var fn = Ext.Function.alias(o,'say');  
10. fn();//通过别名的方式我们就可以直接调用fn()等于o.say()。  

 

• define：是用来定义一个类的，eg：

Js代码  

1. //create第一个参数是类的全路径，第二个参数则是类的内容  
2. Ext.define('Bmsys.ml.Window', {  
3.     extend:'Ext.window.Window',  
4.         title: 'Window',  
5.         closeAction: 'hide',  
6.         width: 380,  
7.         height: 300,  
8.         resizable: false,  
9.         modal: true,  
10.         //定义一些自己的扩展参数  
11.         myTitile: 'myWindow',  
12.         setTitle: function(){  
13.               this.title = this.myTitle;  
14.         }  
15.           
16.         //初始化的方法(类似java中的构造方法)  
17.         initComponent: function(){  
18.               this.setTitle();  
19.               this.callParent(arguments);  
20.         }  
21.  });  
22.   
23. var win = Ext.create('Bmsys.ml.Window',{  
24.                    titile: 'youWindow';  
25.              }  
26. );  
27.   
28. win.show();//此时创建出来窗体的标题是myWindow，说明创建时，传入的初始化参数比构造器先执行。  

 注意：属性只能在define时定义，不能通过win.myHeight = function(){...}添加属性。

 

• requires: JS的异步加载（按需加载），解决了网络js文件大而造成页面打开慢得问题，只有当成需要用到这个类时Ext才去到后台加载包含这个类的js文件；在这里就要，要求我们在写js类的时候要尽量的模块化，一个类就是一个js文件，而且类名与js文件名一致，命名空间定义规范。

Js代码  

1. //这时候要启用自动加载  
2. Ext.Loader.setConfig({  
3.     enabled:true,  
4.     paths:{  
5.         myApp:'js/Bmsys/ml' //js文件相对路径，需要与命名空间保持一致  
6.     }  
7. });  
8.   
9. //这时候只要保证Window.js放在js/Bmsys/ml这个目录下命名空间为Bmsys.ml.Window就可以了。  
10. //这时就不需要在JSP文件中引入Window.js,等到下面的程序被执行时，才会根据命名空间去到后台加载Window.js。  
11. //原理就是通过命名空间与文件路径，拼接好后通过写入<script>标签的方式加载。  
12. var win = Ext.create('Bmsys.ml.Window',{  
13.                    titile: 'youWindow',  
14.                    requires: ['Bmsys.ml.Window']  
15.              }  
16. ).show();  

 

• config: 这个属性就是把你定义类的属性自动的加上get、set方法，省去自己去写的麻烦事。

Js代码  

1. Ext.define('Bmsys.ml.Window', {  
2.     extend:'Ext.window.Window',  
3.         title: 'Window',  
4.         width: 380,  
5.         height: 300,  
6.         //定义一些自己的扩展参数  
7.         myTitile: 'myWindow',  
8.         config: {  
9.               myHeight : 800  
10.         }  
11.  });  
12.   
13. var win = Ext.create('Bmsys.ml.Window',{});  
14.   
15. alert(win.getMyTitle());//报错，没有定义getMyTitle函数  
16. alert(win.getMyHeight());//正常弹出值为800  
17.   
18. //放在config里面定义的属性，Ext会自动给这个属性加上get、set方法。  

 

• mixins：类的混合（多继承实现），因为我们在用define定义类的时候，extend只能继承一个类。为了拥有其它类定义好的方法及功能，我们可以通过类的混合来实现。

Js代码  

1. Ext.define("say",{  
2.     cansay:function(){  
3.         alert("hello");  
4.     }  
5. })  
6. Ext.define("sing",{  
7.     sing:function(){  
8.         alert("sing hello 123");  
9.     }  
10. })  
11.   
12. //通过类的混合，就可以轻松拥有上面两个类里面的函数。  
13. Ext.define('user',{  
14.     mixins :{  
15.         say : 'say',  
16.         sing: 'sing'  
17.     }  
18. });  
19.   
20. var u = Ext.create("user",{});  
21. u.cansay();//say类里面的方法  
22. u.sing();//sing类里面的方法  

 

• static：类似java中静态，我们可以定义一些静态的属性以及方法，通过类名'.'的方式来访问。

Js代码  

1. Ext.define('Computer', {  
2.      statics: {  
3.          factory: function(brand) {  
4.              // 'this' in static methods refer to the class itself  
5.              return new this(brand);  
6.          }  
7.      },  
8.      constructor: function() { ... }  
9. });  
10. //直接通过类名'.'的方式访问静态方法  
11. var dellComputer = Computer.factory('Dell');  

  

3. 数据模型model（MVC中的M层）

    数据模型对真实世界中对事物在系统中的抽象，extjs4.0中的mode相当于DB中的table 或 JAVA 中的Class。

（1）model的几种创建以及实例的方法。

Js代码  

1. //我们利用Ext.define来创建我们的模型类  
2. //DB table person(name,age,email)  
3. Ext.define("person",{  
4.     extend:"Ext.data.Model",  
5.     fields:[  
6.         {name:'name',type:'auto'},  
7.         {name:'age',type:'int'},  
8.         {name:'email',type:'auto'}  
9.     ]  
10. });  
11. //定义的时候，不需要每次写extend:"Ext.data.Model"  
12. Ext.regModel("user",{  
13.     fields:[  
14.         {name:'name',type:'auto'},  
15.         {name:'age',type:'int'},  
16.         {name:'email',type:'auto'}  
17.     ]  
18. });  
19. //实例化我们的person类  
20. //1.new关键字  
21. var p = new person({  
22.     name:'uspcat.com',  
23.     age:26,  
24.     email:'yunfengcheng2008@126.com'  
25. });  
26. //alert(p.get('name'));  
27. var p1 = Ext.create("person",{  
28.     name:'uspcat.com',  
29.     age:26,  
30.     email:'yunfengcheng2008@126.com'  
31. });  
32. //alert(p1.get('age'));  
33. var p2 = Ext.ModelMgr.create({  
34.     name:'uspcat.com',  
35.     age:26,  
36.     email:'yunfengcheng2008@126.com'  
37. },'person');  
38. alert(p2.get('email'));  
39.   
40. //实例不能直接通过getName得到类名，因为这个方法是类的 class object.getClass.getName   
41. //alert(p2.getName());  
42.   
43. //通过类.getName可以获得类名，因为person是模型类的定义，而不是实例  
44. alert(person.getName());  

 

   （2）model模型Validations以及通过修改原始类来实现自定义验证器。

Java代码  

1. //在校验之前，修改原始类里属性的默认值  
2. Ext.data.validations.lengthMessage = "错误的长度";  
3.   
4. Ext.onReady(function(){  
5.     //通过apply方法来在原始的校验器类上扩展我们自定义验证机制的的一个新的验证方法  
6.     Ext.apply(Ext.data.validations,{  
7.         //自定义的校验类型函数  
8.         age:function(config, value){  
9.             var min = config.min;  
10.             var max = config.max;  
11.             if(min <= value && value<=max){  
12.                 return true;  
13.             }else{  
14.                 this.ageMessage = this.ageMessage+"他的范围应该是["+min+"~"+max+"]";  
15.                 return false;  
16.             }  
17.         },  
18.         ageMessage:'age数据出现的了错误'  
19.     });  
20.     //定义一个带有校验的模型类    
21.     Ext.define("person",{  
22.         extend:"Ext.data.Model",  
23.         fields:[  
24.             {name:'name',type:'auto'},  
25.             {name:'age',type:'int'},  
26.             {name:'email',type:'auto'}  
27.         ],  
28.         validations:[  
29.             //type的值就是Ext.data.validations里方法名称  
30.             //field是你要校验字段名  
31.             //field后面的参数就是名称等于type值的函数的参数。  
32.             {type:"length",field:"name",min:2,max:6},  
33.             {type:'age',field:"age",min:0,max:150}  
34.         ]  
35.     });  
36.     var p1 = Ext.create("person",{  
37.         name:'uspcat.com',  
38.         age:-26,  
39.         email:'yunfengcheng2008@126.com'  
40.     });   
41.       
42.     //通过validate()可以得到数据校验的错误集合  
43.     //每个error里面含有两个属性(field---校验字段的名,message---校验函数返回的错误信息)  
44.     var errors = p1.validate();  
45.     var errorInfo = [];  
46.     errors.each(function(v){  
47.         errorInfo.push(v.field+"  "+v.message);  
48.     });  
49.     alert(errorInfo.join("\n"));  
50. });  

 

注意：自定义的校验器，你可以通过利用apply方法来为原始的类增加，也可以通过继承的方式实现。

  （3）数据代理proxy：就是通过与后台的交互来完成数据模型，数据填充的服务类。

Js代码  

1. Ext.define("person",{  
2.     extend:"Ext.data.Model",  
3.     fields:[  
4.         {name:'name',type:'auto'},  
5.         {name:'age',type:'int'},  
6.         {name:'email',type:'auto'}  
7.     ],  
8.     //通过代理从后台获取数据（数据要与model的fields里面的字段相对应）  
9.     proxy:{  
10.         type:'ajax',  
11.         url:'person.jsp'  
12.     }  
13. });  
14. var p = Ext.ModelManager.getModel("person");  
15. //通过load方法来触发proxy加载数据  
16. p.load(1, {  
17.     scope: this,  
18.     //record.data就是加载进来的一个数据实例对象  
19.     success: function(record, operation) {  
20.         alert(record.data.name)  
21.     }  
22. });  

 

     （4）Molde的一对多和多对一关系。

Js代码  

1. //类老师  
2. Ext.regModel("teacher",{  
3.     fideld:[  
4.         {name:'teacherId',type:"int"},  
5.         {name:'name',type:"auto"}  
6.     ],  
7.     //建立老师与学生的1对多关系  
8.     hasMany:{  
9.          //所关联的模型  
10.          model: 'student',  
11.          name : 'getStudent',  
12.          //关系字段  
13.          filterProperty: 'teacher_Id'  
14.     }  
15. });  
16. //学生  
17. Ext.regModel("student",{  
18.     fideld:[  
19.         {name:'studentId',type:"int"},  
20.         {name:'name',type:"auto"},  
21.         {name:"teacher_Id",type:'int'}  
22.     ]  
23. });  
24. //假设t是老师的一个实例，就可以通过t.students 得到子类student的一个store数据集合  

 

3. 数据代理Proxy

     数据代理proxy是进行数据读写的主要途径,通过代理操作数据进行CRUD。

   CRUD的 每一步操作都会得到唯一的Ext.data.Operation实例，它包含了所有的请求参数。通过构造Ext.data.Operation来传入请求参数。

  （1）数据代理proxy目录结构

   Ext.data.proxy.Proxy 代理类的根类(它分为客户端(Client)代理和服务器代理(Server))

A、Ext.data.proxy.Client 客户端代理

Ext.data.proxy.Memory 普通的内存代理。

Ext.data.proxy.WebStorage 浏览器客户端存储代理（cookie操作）。

Ext.data.proxy.SessionStorage 浏览器级别代理，浏览器关闭数据消失。

Ext.data.proxy.LocalStorage 本地化的级别代理，数据可以保存在浏览器文件里，浏览器关闭后，下次打开还在(不能夸浏览器)。

B、Ext.data.proxy.Server 服务器端代理

Ext.data.proxy.Ajax 异步加载的方式。

Ext.data.proxy.Rest 一种特使的Ajax。

Ext.data.proxy.JsonP 跨域交互的代理（请求的数据url不在同域内）， 跨域是有严重的安全隐患的，extjs的跨域也是需要服务器端坐相应的配合。

Ext.data.proxy.Direct 命令.

4.  工作在Proxy下的读写器

   （1）Reader : 主要用于将proxy数据代理读取的数据按照不同的规则进行解析,讲解析好的数据保存到Model中

            结构图

             Ext.data.reader.Reader 读取器的根类

            Ext.data.reader.Json JSON格式的读取器

            Ext.data.reader.Array 扩展JSON的Array读取器

            Ext.data.reader.Xml XML格式的读取器

Js代码  

1. var userData = {  
2.     //读写器默认读取的记录总数的属性  
3.     //total : 200,  
4.       
5.     //采用我们自定义的变量来标识总条数，这时后需要在读写器中配置total所对应我们自定义的变量  
6.     count:250,  
7.     user:[{auditor:'yunfengcheng',info:{  
8.         userID:'1',  
9.         name:'uspcat.com',  
10.         orders:[  
11.             {id:'001',name:'pen'},  
12.             {id:'002',name:'book'}  
13.         ]  
14.     }}]  
15. };  
16. //model  
17. Ext.regModel("user",{  
18.     fields:[  
19.         {name:'userID',type:'string'},  
20.         {name:'name',type:'string'}  
21.     ],  
22.     //配置一对多的关系  
23.     hasMany: {model: 'order'}  
24. });  
25. Ext.regModel("order",{  
26.     fields:[  
27.         {name:'id',type:'string'},  
28.         {name:'name',type:'string'}  
29.     ],  
30.     //配置多对一的关系  
31.     belongsTo: {type: 'belongsTo', model: 'user'}  
32. });  
33. var mproxy = Ext.create("Ext.data.proxy.Memory",{  
34.     model:'user',  
35.     data:userData,  
36.     //读写时的参数配置  
37.     reader:{  
38.         type:'json',//读取的类型（json/xml/array）  
39.         root:'user',//指定读取开始的根节点  
40.         implicitIncludes:true,//是否级联读取关联的子节点（一对多的关系中体现）  
41.         totalProperty:'count',//配置我们返回的总条数变量名称  
42.         record : 'info'//服务器返回的数据可能很复杂,用record可以筛选出有用的数据信息,装在带Model中，其它的参数忽略。  
43.     }  
44. });  
45. //用内存代理来读取数据，其它的方式一样  
46. mproxy.read(new Ext.data.Operation(),function(result){  
47.     var datas = result.resultSet.records;  
48.     alert(result.resultSet.total);  
49.     Ext.Array.each(datas,function(model){  
50.         alert(model.get('name'));  
51.     });  
52.     var user = result.resultSet.records[0];  
53.     var orders = user.orders();  
54.     orders.each(function(order){  
55.         alert(order.get('name'))  
56.     });                   
57. })  

 

    （2）Writer ：把前台的js对象数据按照不同的方式写到后台。

           结构图

            Ext.data.writer.Writer

            Ext.data.writer.Json 对象被解释成JSON的形式传到后台

            Ext.data.writer.Xml  对象被解释成XML的形式传到后台

Js代码  

1. Ext.regModel("person",{  
2.     fields:[  
3.         'name','age'  
4.     ],  
5.     proxy :{//在proxy下，你可以配置reader（读），同样也可以配置writer（写）  
6.         type:'ajax',  
7.         url:'person.jsp',  
8.         writer:{//配置一些写的参数  
9.             //type:'json'  
10.             type:'xml'  //把js对象以xml的方式，传入后台  
11.         }  
12.     }  
13. });  
14. Ext.ModelMgr.create({  
15.     name:'uspcat.con',  
16.     age:1  
17. },'person').save();  

 

5. Store : 是一个存储数据对象Model的集合缓存,它可以为extjs中的可视化组建提供数据源                     (GridPanel,ComboBox)等。（在ExtJS中占有重要的地位，它也属于Model层）

  （1）类结构

          Ext.data.AbstractStore

        Ext.data.Store  没有特殊情况这个类就可以满日常的开发了

      Ext.data.ArrayStore

      Ext.data.DirectStore

      Ext.data.ArrayStore  内置辅助的类

      Ext.data.JsonStroe   内置辅助的类

   Ext.data.TreeStore

  （2）Ext.data.Store 使用

  参数

       autoLoad(Boolean/Object) ： 自动加载数据，自动调用load

       data(Array) ： 内置数据对象的数组，初始化的是就要被装在

       model(Model) ： 数据集合相关的模型

       fields(Field) ：字段的集合，程序会自动生成对于的Model，这样我们就不需要再定义model。

  方法

       each( Function f, [Object scope] ) : void 变量数据中的Model

Js代码  

1. Ext.define("person",{  
2.     extend:'Ext.data.Model',  
3.     fields:[  
4.         {name:'name'},  
5.         {name:'age'}  
6.     ],  
7.     proxy:{  
8.         type:'memory'  
9.     }  
10. })  
11. var s = new Ext.data.Store({  
12.     //model:'person',  
13.     data:[  
14.         {name:'uspcat.com',age:1},  
15.         {name:'yfc',age:26}  
16.     ],  
17.     //有了fields，我们就不需要在单独定义Model并且引用  
18.     fields:[  
19.         {name:'name'},  
20.         {name:'age'}  
21.     ],  
22.     //通过data属性，请偶们已经能够把数据初始化好了  
23.     //proxy是动态的区后台去数据             
24.     //proxy:{  
25.     //  type:'ajax',  
26.     //  url:'person.jsp'  
27.     //}           
28.     //autoLoad:true  
29. });  
30. s.load(function(records, operation, success){  
31.     //遍历  
32.     Ext.Array.each(records,function(model){  
33.         alert(model.get('name'));  
34.     });  
35.     //过滤出字段name='yfc'  
36.     s.filter('name',"yfc");  
37.     s.each(function(model){  
38.         alert(model.get('name'));  
39.     });  
40.     //通过正则来查找数据集里面的记录，返回该记录的索引            
41.     var index = s.find('name','yfc',0,false,true,false);  
42.     alert(s.getAt(index));//当前的Model对象  
43. });  

 

第三章 Ext事件机制、AJax以及Ext常用类

1. Ext事件机制

 （1）事件的3中绑定方式

HTML/DHTML

DOM

EXTJS

 （2）Ext.util.Observable 事件的基类

 它为所有支持事件机制的extjs组建提供事件的支持。

 如果我们自己创建新的组建需要有时间的支持那么我们就继承它。

 事件的分类：

标准事件[键盘按钮按下,鼠标的单击双击,滑过滑动]。

业务事件[当面板收起的时候触发,当组建被销毁的时候触发,当每一个对象的属数值不为空的时候触发]。

 （3）addManagedListener 收管制的监听

 它是由调用的组建管理的,当组建执行了销毁命令的时候所有被组建管制的事件全部销毁。

 （4）relayEvents 事件的分发和传播(控制实现事件在不同空间或对象内的传播)

 比如说孩子喝完三鹿就去医院呀,老爸就要带着去医院

 （5）事件对象Ext.EventObject

 不是一个单例,不能被直接new出来,他会存活早事件处理的函数中

 （6）事件管理器Ext.EventManager

 它可以更方便的为页面元素绑定事件处理函数

 方法:addListener 为元素增减事件

2. Ext中的Ajax是 Ext.data.Connection的一个子类，提供了用简单的方式进行Ajax的功能实现

    （1）主要方法:

   abort : 终止一个没有完成Ajax请求

   isLoading : 判断指定的Ajax请求是不是正在运行

   paresStatus : 返回请求响应的代码

   request : 发送服务器请求

Js代码  

1. //json格式的数据  
2. var jsondata = "{id:'01',name:'uspcat.com','age':26,email:'yunfengcheng2008@126.com'}";  
3. //xml格式的数据  
4. var xmldata = "<user><name>mlmlml</name><age>19</age></user>";  
5. //构建Ext的Ajax请求  
6. Ext.Ajax.request({  
7.     url : 'person.jsp',  
8.     method : 'POST',  
9.     timeout :3000,  
10.       
11.     //请求的参数值  
12.     params:{id:'01'},  
13.   
14.     //可以提交form表单，只需要写表单的ID  
15.     form:"myform",  
16.       
17.     //下面是两种不同格式的请求参数  
18.     jsonData:jsondata,  
19.     xmlData：xmldata,  
20.       
21.     //一些操作的函数，第一个为响应的值，第二个参数是请求的参数值  
22.     success :function(response , options){  
23.         alert(eval(response.responseText)[0].name);  
24.     },  
25.     failure  :function(response , options){  
26.         alert(response.responseText+" "+options)  
27.     }  
28. });  

 

    （2）Ext.ElementLoader:方便我们重新构建页面

   load方法

   startAutoRefresh 方法

Js代码  

1. //get通过dom元素的id方式获得的是元素的对象  
2. //getCmp通过定义对象ID的方式获得的是定义的对象，而不是简简单单的元素了   
3. //getDom通过dom元素的id方式获得的是dom元素  
4. var time = Ext.get("time").getLoader();  
5.   
6. //ajax常用的局部改变元素的值  
7. time.load({  
8.     url:'/extjs/extjs!getTime.action',  
9.     renderer:function(loader,response,request){  
10.         var time = response.responseText;  
11.         Ext.getDom("time").value = time;  
12.     }  
13. });  
14. //给元素设置定时的axja请求方式  
15. i.startAutoRefresh(1000,{  
16.     url:'/extjs/extjs!getI.action',  
17.     renderer:function(loader,response,request){  
18.         var i = response.responseText;  
19.         Ext.getDom("i").value = i;  
20.     }             
21. });  

 

3. Ext以及core包下面的Domhelper、Element类。

  （1）Ext.core.Element

  API解释

  他是组建和控件的基础

  他对一个DOM对象的封装(Document Object Model)

  a、如何得到Element

   Ext.core.Element.fly(String/HTMLElement el, [String named] ) : Element

   Ext.get(Mixed el) : Element

  b、Element 相关方法

   addClsOnClick( String className ) : Ext.core.Element。

   addClsOnOver( String className ) : Ext.core.Element。

   addKeyMap( Object config ) : Ext.util.KeyMap。

   addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.util.KeyMap。

   appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.core.Element

   createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.core.Element。

  （2）Ext.core.DomHelper

  API解释

   他可以很容易的操作页面的HTML.和DOM元素

  append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.core.Element--------追加一个孩子。

  applyStyles---为元素添加样式 eg：Ext.core.DomHelper.applyStyles(Ext.get("p1"),"color:red");

  //下面两个是被当做兄弟追加的

  insertAfter( Mixed el, Object o, [Boolean returnElement] ) : 

  insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) :

          //创建dom结构，通过给的标签字符串 

  createDom( Object/String o ) : HTMLElement

  eg：var html = Ext.core.DomHelper.createDom("<h1>hello</h1>");

  （3）Ext

  //方法是执行在文件加载完之后

  onReady( Function fn, Object scope, Boolean withDomReady, Object options ) : void

  get()//不在多说

  query( String path, [Node root] ) : Array

   http://www.w3school.com.cn/xpath/xpath_axes.asp

   语法看 Ext.DomQuery

  getCmp( String id ) : void---返回组建管理器管理的ID组件

  isEmpty( Mixed value, [Boolean allowEmptyString] ) : Boolean

  namespace( String namespace1, String namespace2, String etc ) : Object

  each( Array/NodeList/Mixed iterable, Function fn, Object scope, Boolean reverse ) : Boolean

  apply( Object object, Object config, Object defaults ) : Object

  encode( Mixed o ) : String

  select( String/Array selector, [Boolean unique], [HTMLElement/String root] ) 

  typeOf( Mixed value ) :判断参数是一个什么样的类型，返回的是字符串，eg：string、function 

Js代码  

1. //这个是直接到页面中获得元素的对象  
2. var div01 = Ext.core.Element.fly("div01");  
3. //鼠标滑过的时候增加一个样式滑出的时候移除样式,值是样式的名称  
4. div01.addClsOnOver("divC");  
5. //这个是直接到Ext.ComponentManagerMap中拿，没有的话，就用第一个到页面中拿，再返回  
6. var input01 = Ext.get("input01");  
7.               
8. var fn1 = function(){  
9.     alert("单击B按钮调用这个函数")  
10. }  
11. //给一个输入框添加键盘B键响应功能  
12. //key是你要触发的那个键，ctrl是否需要与ctrl键结合，fn是触发函数  
13. input01.addKeyMap({key:Ext.EventObject.B,ctrl:false,fn:fn1,scope:input01});  
14. //和上面一本一样，只是添加更加复杂的，处理起来更加方便  
15. /*第一个触发条件的参数是一个对象(条件可以进行组合): 
16.   {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}*/  
17. //第二个是触发函数fn  
18. input01.addKeyListener({key:Ext.EventObject.X,ctrl:true},function(){  
19.     alert("单击ctrl+x")  
20. },input01);  
21.   
22. function createChild(){  
23.     var el = document.createElement("h5");  
24.     el.appendChild(document.createTextNode("我是被追加的"));  
25.     return el;  
26. }  
27. Ext.get("div02").appendChild(createChild());  
28. //通过构造对象，来创建DOM  
29. Ext.getBody().createChild({  
30.     tag:'li',  
31.     id:'item1',  
32.     html:'我是第一个个节点'  
33. });  

 

3. ExtJS4.0中util包里面的一些工具类用法。

 （1）.Ext.util.CSS

         Ext.util.CSS.createStyleSheet(".c{color:red}","red");

         创建一个样式表，类似于你在css文件里面定义的内容。

         Ext.get("d1").addClsOnOver("c");

         在鼠标滑过时，动态的给某个元素对象的class赋值为刚刚定义的名为c样式表。

         Ext.util.CSS.getRule(".c",true);

         获得当前的样式的对象，可以从这个对象获得一些你需要的参数。        

         Ext.util.CSS.swapStyleSheet("sheet1","1.css");第一个参数是当前引用样式的ID，第二个是也是的URL路劲

         动态的切换，你所引用的样式表。（即假如你还有一个样式表2.css，里面1.css定义的样式名称一样，这时你可以用这个函数Ext.util.CSS.swapStyleSheet("sheet2","2.css")把目前引用1.css切换成2.css。）

         一般用于不同风格的样式切换。

         注意ID唯一。

         Ext.util.CSS.removeStyleSheet("red");

         移除当前，页面已经定义了的样式，传入样式的ID即可。

         Ext.util.CSS.updateRule(".c","color","#990055");

         更新某个已经定义了样式中的某个属性的值。

 （2）.Ext.util.ClickRepeater  click的转发器是Ext.util.Observable的子类

         

Js代码  

1. Ext.onReady(function(){  
2.     //控制元素在指定时间内被单击(当前元素没有数失去焦点)  
3.     var cl = new Ext.util.ClickRepeater(Ext.get("b4"),{  
4.         delay:3000,//首次单击时候的间隔事件  
5.         interval:4000,//发生首次重复事件调用之后每一次事件的相隔时间  
6.         stopDefault:true,//停止这个el上得默认单击事件  
7.         handler:function(){  
8.             alert("单击我");  
9.         }  
10.     });  
11.     //第一次单击马上会触发事件 如果不去点击其他的元素那么3秒或就会自定执行第二次  
12.     //一或会以4秒的间隔执行相应的程序  
13. })  

 

 （3）.Ext.util.DelayedTask 代替setTimeout

 （4）.Ext.util.Format 格式化的公共类

         用于一些字符串常用操作、日期以及小数的格式化等。

 （5）.Ext.util.MixedCollection 集合类

         强大之处在于它同时可以存放各工种各样的对象。并且提供很多操作集合里对象的方法。

 （6）.Ext.util.TaskRunner 模拟线程控制

         模拟多线程的实现。

         

Js代码  

1. Ext.onReady(function(){  
2.     var runner = new Ext.util.TaskRunner();  
3.     var task = {  
4.         run:function(){  
5.             Ext.getDom("t1").value = Ext.util.Format.date(new Date(),"Y-m-d-s");  
6.         },  
7.         interval:1000  
8.     }  
9.     runner.start(task);  
10.     Ext.get("b6").on("click",function(){  
11.       
12.         runner.stop(task);  
13.     })  
14. })