ext4.0学习

阅读更多

概念：
   （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代码  
var Person = {name:'yfc',age:26};   
    //alert(Person['name']);   
    //extjs4.0提供getKey的函数   
    //alert(Ext.Object.getKey(Person,'yfc'));   
    Object.prototype.getValue = function(key,defValue){   
        if(this[key]){   
            return this[key];   
        }else{   
            return defValue;   
        }   
    }   
alert(Person.getValue("email","[email protected]"));   
//由于给Object的原型加上了一个getValue的函数，这样所有的对象（都继承Object）默认都会拥有这个函数。  
var Person = {name:'yfc',age:26};
    //alert(Person['name']);
    //extjs4.0提供getKey的函数
    //alert(Ext.Object.getKey(Person,'yfc'));
    Object.prototype.getValue = function(key,defValue){
        if(this[key]){
            return this[key];
        }else{
            return defValue;
        }
    }
alert(Person.getValue("email","[email protected]"));
//由于给Object的原型加上了一个getValue的函数，这样所有的对象（都继承Object）默认都会拥有这个函数。
 
2. 事件机制与新特性

   （1）给对象加事件：
 
Js代码  
Ext.get("元素ID").on("click",function(){   
      //函数处理部分   
});  
Ext.get("元素ID").on("click",function(){
      //函数处理部分
});
 
   （2）新特性：create与define（extend 、requires、config、mixins、alias以及statics ）。
create：在ExtJs4.0中你可以通过new方式也可以用create的方式得到一个对象的实例，在4.0版本中建议用create的方式来创建实例，这样ExtJS会对创建的实例进行统一管理。
Js代码  
//create第一个参数为类路径，第二个参数为该类的一些初始化参数值（以对象的形式传递）   
var win = Ext.create('Ext.window.Window',{   
           width:400,   
           height:300,   
           title:'uspcat'  
          });   
  
win.show();  
//create第一个参数为类路径，第二个参数为该类的一些初始化参数值（以对象的形式传递）
var win = Ext.create('Ext.window.Window',{
   width:400,
   height:300,
   title:'uspcat'
      });

win.show();
 
alias：别名的作用，可以把一个对象的内部函数暴漏处理啊，给其他对象直接调用。eg：
Js代码  
var o = {   
    say : function(){   
        alert(11111);   
        }   
}   
  
//通过o.say()调用函数   
  
var fn = Ext.Function.alias(o,'say');   
fn();//通过别名的方式我们就可以直接调用fn()等于o.say()。  
var o = {
say : function(){
alert(11111);
        }
}

//通过o.say()调用函数

var fn = Ext.Function.alias(o,'say');
fn();//通过别名的方式我们就可以直接调用fn()等于o.say()。
 
define：是用来定义一个类的，eg：
Js代码  
//create第一个参数是类的全路径，第二个参数则是类的内容   
Ext.define('Bmsys.ml.Window', {   
    extend:'Ext.window.Window',   
        title: 'Window',   
        closeAction: 'hide',   
        width: 380,   
        height: 300,   
        resizable: false,   
        modal: true,   
        //定义一些自己的扩展参数   
        myTitile: 'myWindow',   
        setTitle: function(){   
              this.title = this.myTitle;   
        }   
           
        //初始化的方法(类似java中的构造方法)   
        initComponent: function(){   
              this.setTitle();   
              this.callParent(arguments);   
        }   
 });   
  
var win = Ext.create('Bmsys.ml.Window',{   
                   titile: 'youWindow';   
             }   
);   
  
win.show();//此时创建出来窗体的标题是myWindow，说明创建时，传入的初始化参数比构造器先执行。  
//create第一个参数是类的全路径，第二个参数则是类的内容
Ext.define('Bmsys.ml.Window', {
extend:'Ext.window.Window',
        title: 'Window',
        closeAction: 'hide',
        width: 380,
        height: 300,
        resizable: false,
        modal: true,
        //定义一些自己的扩展参数
        myTitile: 'myWindow',
        setTitle: function(){
              this.title = this.myTitle;
        }
       
        //初始化的方法(类似java中的构造方法)
        initComponent: function(){
              this.setTitle();
              this.callParent(arguments);
        }
 });

var win = Ext.create('Bmsys.ml.Window',{
                   titile: 'youWindow';
             }
);

win.show();//此时创建出来窗体的标题是myWindow，说明创建时，传入的初始化参数比构造器先执行。

 注意：属性只能在define时定义，不能通过win.myHeight = function(){...}添加属性。
 
requires: JS的异步加载（按需加载），解决了网络js文件大而造成页面打开慢得问题，只有当成需要用到这个类时Ext才去到后台加载包含这个类的js文件；在这里就要，要求我们在写js类的时候要尽量的模块化，一个类就是一个js文件，而且类名与js文件名一致，命名空间定义规范。
Js代码  
//这时候要启用自动加载   
Ext.Loader.setConfig({   
    enabled:true,   
    paths:{   
        myApp:'js/Bmsys/ml' //js文件相对路径，需要与命名空间保持一致   
    }   
});   
  
//这时候只要保证Window.js放在js/Bmsys/ml这个目录下命名空间为Bmsys.ml.Window就可以了。   
//这时就不需要在JSP文件中引入Window.js,等到下面的程序被执行时，才会根据命名空间去到后台加载Window.js。   
//原理就是通过命名空间与文件路径，拼接好后通过写入