Ext JS框架入门(10级学员 刘志飞课堂笔记)

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：

// 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：

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：

Ext.onReady(function(){

             //extjs4.0自带的窗体

             var win = Ext.create("Ext.window.Window",{

                width:300,

                height:400,

                title:"第一11111111个窗体"

                 });

          //自定义一个窗体

           Ext.define("my.pck.myWindow",{

                 extend:"Ext.window.Window",

                 width:200,

                 height:300,

                 title:"你好",

                 initComponent:function(){
                       this.callParent(arguments);

                  }

             });

           /* var myWin = new my.pck.myWindow({

            });

            myWin.show();*/

             Ext.create("my.pck.myWindow",{

                 title:"你坏",

                 width:400

             }).show();

    });