深入淺出ExtJS 第二章 Ext框架基礎

2.1 面向對象的基礎架構(對象模型)  2 2.1.1 創建類
  >.定義一個類:
  Ext.define('demo.Demo',{
    name:'Lingo',
    hello:function () {
      return 'Hello'+this.name;
    }
  });
  //第一個參數是字符串類型的類名;
  //第二個參數是object類型,其中可以填寫這個類型的字段和函數;
  >.創建一個對象:
  var demo = new demo.Demo();

2.1.2 對象繼承(extend)
  Ext.define('demo.DemoWindow',{
    extend:'Ext.Window',        //繼承Ext.Window的所有功能;
    title:'demo title',         //擴展(設置標題);
    initComponent:function(){   //初始化時默認添加兩個子組件;
      Ext.apply(this,{          //apply()將一批屬性批量復制給當前對象;
        items:[{html:'panel1'},{html:'panel2'}]
      });
      this.callParent();        //callParent()函數實現對父類函數的快捷調用;
    }
  });

2.1.3 多重繼承(mixin)
  Ext.define('demo.DemoPanel',{
    extend:'Ext.Window',        //單根繼承
    mixins:['demo.Demo']        //混入(多重繼承);將類'demo.Demo'的屬性都復制給新類;
  });

2.1.4 自動生成代碼
  Ext.define('demo.DemoObject',{
    statices:{ TYPE_DEFAULT : 0 },  //設置靜態成員,無須創建對象即可直接調用的屬性或函數;
    constructor: function() {       //在創建對象時執行初始化的構造函數;
      //do some init;
    }
  })

 

2.2 統一的組件模型  2 2.2.1 Ext.Component
//所有Ext組件的基類,組件下所有的子類都可能參與自動化Ext組件的生命周期,執行創建/渲染和銷毀;
  var box = new Ext.Component({
    el: 'test',
    style: 'background-color:red; position:absoulte',
    pageX: 100,
    pageY: 50,,
    width: 200,
    height: 150 
  });
  box.render();

2.2.2 Ext.Panel
//Ext.Panel繼承自Ext.Container;也可無須繼承即可直接使用;
  var panel = new Ext.Panel({
    el:'test',
    title:'測試標題',
    floating:true,
    shadow:true,
    draggable:true,
    collapsible:true,
    html:'測試內容',
    pageX:100,
    pageY:50,
    width:200,
    height:150
  });
  panel.render();

2.2.3 Ext.Container
//繼承自Ext.Component;所有可布局組件的超類;
//參數layout:指定當前組件使用何種布局;
//參數items:包含的是當前組件中所有子組件;
  new Ext.Viewport({
    layout:'border',
    items:[{
      xtype:'panel'
      region:'north'
    },{
      region:'south'
    },{
      region:'west'
    },{
      region:'east'
    },{
      region:'center'
    }]
  });

 

2.3 完善的事件機制(事件模型)   2 2.3.1 自定義事件
//所有繼承自Ext.util.Observable類的控件都可以支持事件;
//為這些類的對象定義一些事件,為事件配置監聽器;
//當某個事件被觸發,Ext會自動調用對應的監聽器,這就是Ext事件模型;
  >1.Person類
  Person = function(name){    
    this.name = name;
    this.addEvents("walk","eat","sleep");   
    //初始化時調用addEvents()定義了3個事件;
  }
  Ext.extend(Person,Ext.util.Observable,{   
    //Person繼承Observable所有屬性;
    info:function(){          
      return this.name+"is"+event+"ing.";
    }
  });
  >2.為person添加事件監聽器
  var person = new Person('Lingo');
  person.on('walk',function(){
    //on()是addListener()的簡寫形式;
    //參數一:傳遞事件名稱;
    //參數二:事件發生時執行的函數;
    Ext.Msg.alert('event',person.name+"在走啊走.")
  });
  >3.觸發person的事件
  Ext.get('walk').on('click',function(){      
  //給walk按鈕綁定點擊事件;
    person.fireEvent('walk');         
    //fireEvent()傳入一個事件名稱作為參數,該事件對應的監聽函數就會執行;
  });

2.3.2 瀏覽器事件
//Ext使用Ext.EventManager/Ext.EventObject/Ext.libEvent對原生瀏覽器事件進行封裝;
//原生事件處理是通過單一的綁定實現的,但每次只能給一個事件綁定一個事件處理函數;
//而Ext可以將同一個事件依次綁定到多個事件處理句柄上;
  Ext.onReady(function(){
    var test = Ext.get('test');
    //Ext.get('test'):獲得HTML中id="test"對應的按鈕;
    test.on('click',function(){
      alert("handle1");
    });
    test.on('click',function(){
      alert("handle2");
    });
  });

2.3.3 Ext.EventObjectImpl
//Ext.EventObjectImpl是對事件的封裝,將Ext自定義事件和瀏覽器事件結合在一起使用;
//它封裝不同瀏覽器的事件處理函數,為上層組件提供了統一的功能接口;
  >1.getX()/getY()/getXY():獲得發生的事件在頁面中的坐標位置;
  >2.getTarget():返回事件的目標元素;
  >3.on()/un():事件的綁定與清除;
  >4.purgeElement():把元素上的所有事件都清除;
  >5.preventDefault():取消瀏覽器對當前事件所執行的默認操作;
  >6.stopPropagation():停止事件傳遞;(阻止冒泡);
  >7.stopEvent():停止一個事件;(內部調用preventDefault()和stopPropagation()兩個函數,取消瀏覽器的默認操作,同時停止事件傳遞);
  >8.getRelatedTarget():返回與當前事件相關的元素;
  >9.getWheelDelta():獲取鼠標滾輪的delta值;
  Ext.get('test').on('keypress',function(e){
    //監聽函數的參數e就是一個Ext.EventObjectImpl
    if(e.charCode == Ext.EventObjectImpl.SPACE){
      Ext.Msg.alert('info','空格');
    }
  });

2.3.4 Ext.util.Observable
//位於Ext組件的頂端,為Ext組件提供處理事件最基本的功能;
//實現一個可以處理事件的Ext組件,最直接的方法就是繼承Ext.util.Observable;
  >1.復合式參數
  Ext.get('test').on('click',fn,this,{
    //click:事件名稱;   fn:click事件觸發時執行的函數;   this:fn執行時的作用域是this;
    single:true,  //表示這個事件處理函數僅執行一次;
    delay:100,    //延遲100ms后執行;
    testId:4,
    buffer:1000   //延遲執行,但會創建一個Ext.util.DelayTask對象;並把fn放入其中等待執行;若再次觸發事件,則上一個fn會被取消,執行新的fn;這樣保證fn不會重復執行多次;
  });
  var fn = function(e,el,args){
    alert('handlel');
    alert(args.testId);
    //在事件監聽函數中獲得在符合函數參數中定義的數據;
  }
  >2.一次性定義多個事件監聽器
  Ext.get('test').on({
    'click':{fn:fn},
    'mouseover':{
      fn:fn,
      single:true,
      delay:100
    }
  });
  >3.captrue()攔截函數
  Ext.get('capture1').on('click',function(){
    Ext.util.Observable.capture(person,function(){
      alert('capture1');
      return true;        //不會終止事件的發生;
      //return false;     //終止事件;
    });
  })
  //通過控制capture()中處理函數的返回值來決定是繼續執行某個事件的監聽函數,還是直接終止;
  //可以為一個對象設置多個capture()攔截函數;形成處理鏈;
  >4.releaseCapture()
  //清除fireEvent()上所有的攔截函數;
  >5.suspendEvents()暫停函數
  Ext.get('test').on('click',function(){
    person.suspendEvents();
  })
  >6.resumeEvents()繼續函數;
  Ext.get('test').on('click',function(){
    person.resumeEvents();
  })

2.3.5 Ext.EventManager 事件管理器
//定義了一系列與事件相關的處理函數;
  >1.Ext.onReady()
  //等頁面文檔渲染完畢但圖片等還沒下載時調用啟動函數;
  Ext.onReady(function(){
    Ext.Msg.alert('message',Ext.get('test'));
    //頁面渲染之后獲取id="test"的Element對象;
  });
  >2.onWindowResize()
  //監聽瀏覽器窗口大小變化;
  Ext.EventManager.onWindowResize(function(width,height){
    alert('width:'+width+'height:'+height);
  });

 

2.4 小結 2 Ext基本功能架構,包括對象模型/組件模型和事件模型;Ext中所有的功能都建立在這些基本架構之上;