Ext JS框架入门

Ext JS框架入门

一、概述：

ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。

功能丰富，无人能出其右。

无论是界面之美，还是功能之强，ext的表格控件都高居榜首。

单选行，多选行，高亮显示选中的行，拖拽改变列宽度，按列排序，这些基本功能ExtJS轻量级实现。

自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。

再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，这些功能竟然都在ext表格控件里实现了。

其实从ext3开始就支持各种方式的统计，且有控件支持excel导出。

二、为什么选择Ext JS：

在java开发中，选择合适项目的框架是件为难的事情，他需要从团队开发的技术力量和项目需求等各方面来考量。客户的页面开发也面临同样情形。如表列出了目前常用的技术。

表  前端开发技术的选择

三、Ext JS 体系结构

四、Ext JS 类库的介绍：

Adapter: 负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。

Air：Ext对基于Air可视化编辑器的支持。

Build: 压缩后的ext全部源码（里面分类存放）。

Docs：APL帮助文档。

Exmaples：提供使用ExtJS技术做出的小实例。

Package：Ext提供常用控件。

Resources：ExtUI资源文件目录，如CSS、图片文件都存放在这里面。

Source：无压缩Ext全部的源码（里面分类存放）遵从Lesser GNU（LGPL）开源的协议。

Ext—all.js：压缩后的Ext全部源码。

Ext-all-debug.js：无压缩的Ext全部的源码（用于调试）。

Ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。

Ext-core-debug.js：无压缩Ext的核心组件，包括Sources/core下的所有类。

五、应该先导入两个js文件与一个css样式表。一定注意顺序和路径。标准格式为：

六、窗体实例

实例1：

[plain] view plaincopyprint?

1. // window.onload = function(){}; 
2.  
3. // 当窗体加载完毕后,触发该匿名事件 
4.  
5. Ext.onReady(function() { 
6.  
7.             // Ext.MessageBox.alert(); 
8.  
9.             // Ext.MessageBox.alert("hihi!"); 
10.  
11.        // 首先Ext 
12.  
13.             // Javascript类 
14.  
15.        // 声明一个类  toString 方法 
16.  
17.                function User(name, sex, age) { 
18.  
19.                      this.name = name; 
20.  
21.                      this.sex = sex; 
22.  
23.                      this.age = age; 
24.  
25.                      this.showMsg = function() { 
26.  
27.                         Ext.MessageBox.alert("演示js原始的创建对象的方法", "创建user1对象的姓名是:"+ this['name'] + "  性别是:" + this['sex']+ "  年龄是:" + this['age']); 
28.  
29.                             } 
30.  
31.                } 
32.  
33.                  // jsUser对象添加一个方法 
34.  
35.              // 创建类的对象 
36.  
37.                      var user1 = new User("王晓丽", "女", 20); 
38.  
39.                  // user1.name user1['name'] 
40.  
41.                  // 利用Object的扩展一个get方法 
42.  
43.                             Object.prototype.get = function(args) { 
44.  
45.                                      return this[args]; 
46.  
47.                             } 
48.                             // alert(user1.get("name")); 
49.                      //   alert(user1.toString());//[Object,Object]; 
50.  
51.                      //Object toString 有 
52.  
53.                          //Ext.Object 对Object的扩展 
54.                             alert(Ext.Object.getKey(user1,'王晓丽')); 
55.  
56.                             var objValues = Ext.Object.getValues(user1) 
57.  
58.                                alert(objValues.join("\n")); 
59.  
60.                       // user1.toString(); 
61.             var user2 = { 
62.  
63.                            name : "晓丽", 
64.  
65.                             sex : "女", 
66.  
67.                            age : "20", 
68.  
69.                               toString : function() { 
70.  
71.                                     Ext.MessageBox.alert("演示js原始的创建对象的方法", "创建user2对象的姓名是:"+ this['name'] + "  性别是:" + this['sex']+ "  年龄是:" + this['age']); 
72.  
73.                                      } 
74.  
75.                             }; 
76.                             // Array数组 
77.                             var arrs = [11,1 2,1 3,1 4, 15, -13, -14]; 
78.                             // 遍历数组 
79.  
80.                             /* 
81.  
82.                           * for(var i=0;i<arrs.length;i++){ alert(arrs[i]); } 
83.  
84.                         */ 
85.                         // 过滤值小0的排除 
86.  
87.                             /*  * for(var i=0;i<arrs.length;i++){ if(arrs[i]>0){ alert(arrs[i]); } } 
88.  
89.                         */ 
90.                             var newArrs = Ext.Array.filter(arrs, function(item) { 
91.  
92.                                   if (item > 0) { 
93.  
94.                              //真假  如果返回的是true 就保留数组元素如果是false 就不保留数组元素  
95.  
96.                                           return false; 
97.  
98.                                    } else { 
99.  
100.                                        //不处理操作 
101.  
102.                                               return true; 
103.  
104.                                  } 
105.                 }, this); 
106.  
107.                  //alert(newArrs.join("\n")); 
108.  
109.                             /*Ext.Array.each(newArrs, function(item) { 
110.  
111.                                                         alert(item); 
112.  
113.                             });*/ 
114.  
115.                    }); 

// window.onload = function(){};// 当窗体加载完毕后,触发该匿名事件Ext.onReady(function() { // Ext.MessageBox.alert(); // Ext.MessageBox.alert("hihi!"); // 首先Ext // Javascript类 // 声明一个类 toString 方法 function User(name, sex, age) { this.name = name; this.sex = sex; this.age = age; this.showMsg = function() { Ext.MessageBox.alert("演示js原始的创建对象的方法", "创建user1对象的姓名是:"+ this['name'] + " 性别是:" + this['sex']+ " 年龄是:" + this['age']); } } // jsUser对象添加一个方法 // 创建类的对象 var user1 = new User("王晓丽", "女", 20); // user1.name user1['name'] // 利用Object的扩展一个get方法 Object.prototype.get = function(args) { return this[args]; } // alert(user1.get("name")); // alert(user1.toString());//[Object,Object]; //Object toString 有 //Ext.Object 对Object的扩展 alert(Ext.Object.getKey(user1,'王晓丽')); var objValues = Ext.Object.getValues(user1) alert(objValues.join("\n")); // user1.toString();var user2 = { name : "晓丽", sex : "女", age : "20", toString : function() { Ext.MessageBox.alert("演示js原始的创建对象的方法", "创建user2对象的姓名是:"+ this['name'] + " 性别是:" + this['sex']+ " 年龄是:" + this['age']); } }; // Array数组 var arrs = [11,1 2,1 3,1 4, 15, -13, -14]; // 遍历数组 /* * for(var i=0;i<arrs.length;i++){ alert(arrs[i]); } */ // 过滤值小0的排除 /* * for(var i=0;i<arrs.length;i++){ if(arrs[i]>0){ alert(arrs[i]); } } */ var newArrs = Ext.Array.filter(arrs, function(item) { if (item > 0) { //真假 如果返回的是true 就保留数组元素如果是false 就不保留数组元素 return false; } else { //不处理操作 return true; }}, this); //alert(newArrs.join("\n")); /*Ext.Array.each(newArrs, function(item) { alert(item); });*/ });

实例2：

[plain] view plaincopyprint?

1. Ext.onReady(function(){ 
2.              //Ext.window窗体 
3.  
4.             //创建一个窗体对象 
5.  
6.            /*  var win = new Ext.window.Window({ 
7.  
8.                 width:300, 
9.  
10.                 height:400, 
11.  
12.                 title:"第一个窗体"   
13.  
14.              });*/ 
15.  
16.              //调用窗体的显示的方法 
17.  
18.             // win.show(); 
19.              //extjs4.0 
20.              //name必须使用"Ext.window.Window" fullName, {对象参数的设置} 
21.  
22.              var win1 = Ext.create("Ext.window.Window",{ 
23.  
24.                 width:300, 
25.  
26.                 height:400, 
27.  
28.                 title:"第一11111111个窗体" 
29.              }).show(); 
30.  
31.              //Ext.create is alias for Ext.ClassManager.instantiate. 
32.              var obj = { 
33.  
34.                  hi:function(){ 
35.  
36.                     alert("hi"); 
37.  
38.                  } 
39.  
40.              }; 
41.             //obj.hi(); 
42.             //Function对象 = Ext.Function.alias(对象,该对象方法名称); 
43.  
44.             var say =  Ext.Function.alias(obj,"hi"); //Function  
45.  
46.             //在使用这个对象的时候 say(); 
47.  
48.             say();  
49.  
50.     }); 

Ext.onReady(function(){ //Ext.window窗体 //创建一个窗体对象 /* var win = new Ext.window.Window({ width:300, height:400, title:"第一个窗体" });*/ //调用窗体的显示的方法 // win.show(); //extjs4.0 //name必须使用"Ext.window.Window" fullName, {对象参数的设置} var win1 = Ext.create("Ext.window.Window",{ width:300, height:400, title:"第一11111111个窗体" }).show(); //Ext.create is alias for Ext.ClassManager.instantiate. var obj = { hi:function(){ alert("hi"); } }; //obj.hi(); //Function对象 = Ext.Function.alias(对象,该对象方法名称); var say = Ext.Function.alias(obj,"hi"); //Function //在使用这个对象的时候 say(); say(); });

实例3：

[plain] view plaincopyprint?

1. Ext.onReady(function(){ 
2.  
3.              //extjs4.0自带的窗体 
4.  
5.              var win = Ext.create("Ext.window.Window",{ 
6.  
7.                 width:300, 
8.  
9.                 height:400, 
10.  
11.                 title:"第一11111111个窗体" 
12.  
13.                  }); 
14.  
15.           //自定义一个窗体 
16.  
17.            Ext.define("my.pck.myWindow",{ 
18.  
19.                  extend:"Ext.window.Window", 
20.  
21.                  width:200, 
22.  
23.                  height:300, 
24.  
25.                  title:"你好", 
26.  
27.                  initComponent:function(){ 
28.                        this.callParent(arguments); 
29.  
30.                   } 
31.  
32.              }); 
33.  
34.            /* var myWin = new my.pck.myWindow({ 
35.  
36.             }); 
37.  
38.             myWin.show();*/ 
39.  
40.              Ext.create("my.pck.myWindow",{ 
41.  
42.                  title:"你坏", 
43.  
44.                  width:400 
45.  
46.              }).show(); 
47.  
48.     });