Ext啓蒙筆記

Ext的四個東西(版本3.3.1):

1,一個css

2,一系列圖片文件和flash文件,他們在resouces目錄下

3,兩個js,一個基礎js,一個核心js,基礎js可以用jquery,prototype做適配

 

所以Ext的啓動代碼如下:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css"
          href="extjs/resources/css/ext-all.css"/>
    <script type="text/javascript"
            src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
</head>

<body>
<script type="text/javascript">

    Ext.onReady(function() {
    });

</script>
</body>
</html>

Ext就是一個用css和圖片再加上dd包裏的數據用js這個語言操縱dom結構得到絢麗GUI效果的js框架。

 

應用代碼寫在一個函數中,然後傳給Ext對象的onReady方法,onReady其實是引用事件管理器EventManager的onDocumentReady方法,這樣在瀏覽器加載完DOM之後就會調用你的應用代碼,從而調用到你的業務邏輯。

關於這個文檔Ready事件不同瀏覽器還有所不同,所以自己google一下各大框架的處理方式吧,Adds a listener to be notified when the document is ready (before onload and before images are loaded)這段英文就是Ext.onReady的意思。

 

Ext,是框架的名字,同時也是這個框架的一個單例對象,在Java中有單例類概念,而在JS中可以直接搞一個單例對象而不需要類,它通過對象直接量寫出來,代碼如下:

 

Ext = {
    /**
     * The version of the framework
     * @type String
     */
    version : '3.3.1',
    versionDetail : {
        major : 3,
        minor : 3,
        patch : 1
    }
};
 

這個Ext對象也是框架中其他所有單例對象和類的容器或者命名空間,在這個Ext對象上放置了各種屬性,他們表達了目前框架所在的環境(比如瀏覽器,操作系統),當前狀態(準備好了嗎?)或者全局設置(空白圖片地址,動畫激活等),除了屬性Ext對象上還有豐富的方法行爲,他們在框架中起着非常重要的作用,比如extend用來實現類似java繼承的語法

ns用來實現類似java的package,is開頭的方法判斷對象類型,這些方法有些是從其他方法上借用過來的,能借用就因爲JS的代碼也是一份數據,可以借過來借過去。

 

java中的包,我們可以簡單的用package關鍵字來聲明,比如package com.jdon.mvc,在Ext中包是在Ext上調用ns函數,然後把包名作爲參數傳進去的,比如Ext.ns('Ext.util', 'Ext.lib', 'Ext.data', 'Ext.supports')就得到了四個包,其實現過程就是在Ext對象中再放一個util,lib,data,supports對象,然後在這些l對象上放置類,這樣就達到了封包的效果。

 

Ext中除了單例對象,剩下的就是類,這些類可以這樣歸類:

1,JS原生類的擴展(Array,Date,Function,Number,String)

2,Ext實現的普通類

3,組件類(可視)軟件窗口中的功能元素,window,menu,toolbar,按鈕,分頁條,表單組件(文本框,下拉框,收音機,複選框,超文本編輯框,數字框,時間框等),複雜的可視組件是表格FormPanel,樹形面板TreePanel,列表視圖ListView,Flash報表

 

下面這個圖片是Ext各種概念的圖標表示:


配置項就是在new一個對象的時候傳遞的構造參數

 

組件類的基類是Component,從這個基類開始演化出了Ext的豐富組件體系,這些組件都統一的被框架自動的進行生命週期管理,Component提供基本的顯示隱藏,激活和禁用等方法,所有的組件都被納入到一個成爲組件管理器(ComponentMgr )中

組件管理器是一個單例對象,可通過組件的ID得到組件,組件的ID可以手動指定或者框架自動生成,從Component演化出來的組件可以簡單的如下組織:

 

1,Component的直接子類,比如時間選擇器DatePicker

2,BoxComponent盒組件,提供了自適應高度、寬度調節的功能,具備大小調節和定位的能力,盒組件的子類有

Button,Container,DataView,FlashComponent,ProgressBar,Spacer,Toolbar.Item,Field,Label,

MultiSlider

3,Container,盒組件的子類,作爲一個容器容納其他組件,這個組件納入屬性就是items,這個組件一般會和佈局類一起工作,設置佈局對象的字段是layout,layout類形成如下的一個層次結構


容器的子類有Panel,Toolbar,Viewport,Menu,菜單和工具條都是容器,

ViewPort表達瀏覽器的整個窗口,很常用,所以也是容器,面板容器看下面

4,Panel,Ext非常重要的一個組件,他是面向用戶界面構建應用程序最佳的單元塊,含有底部和頂部的工具條,連同單獨的頭部、底部和body部分,它的子類有ButtonGroup,TabPanel,Tip,Window,FieldSet,FormPanel,GridPanel,TreePanel。

 

Componet的直接子類:

BoxComponent,ColorPalette,DatePicker,Editor,PivotAxis,BaseItem

 

在互聯網上找到了兩個圖片,可理清一下思路:



 

 

 


 

 

如果把這些組件視爲Ext的領域模型,按照在jdon上的討論,領域模型會以扔事件的方式和外界交互,Ext也是這麼做的,不過事件處理是界面處理的標準模型,Ext的事件模型是在js的原生事件上做了抽象和包裝,屏蔽了各種瀏覽器的事件API差異,這個事件類叫做Observable,觀察者的意思,Ext的所有組件都繼承這個類,各種組件會發生各種事件,這些事件有些是組件拋出的

有些是用戶的操作產生的,Observable並不是說只有組件類繼承這個類,其他一些非組件類有的也繼承這個類,它的子類如下:

 

Component,Direct,History,Resizable,SplitBar,Updater,Connection,DataProxy,Node,Store,Tree,DragTracker,

Provider,BasicForm,AbstractSelectionModel,ColumnModel,GridView,PropertyStore,ColumnResizer,Sorter,

DefaultSelectionModel,MultiSelectionModel,TreeLoader,ClickRepeater,MixedCollection

 

用這個事件模型我們可以實現類似DDD的domain Event,比如一個帖子主題FormThread,它有一個changName的方法來更新主題名字,更新完了之後它拋出一個事件表示自己變化了,對這個事件感興趣的監聽器會把主題最新的更改保存到數據庫中,實現代碼如下:

 

    ForumThread = Ext.extend(Ext.util.Observable, {
                constructor: function(config) {
                    this.name = config.name;
                    //給領域模型設置事件
                    this.addEvents({
                                "change" : true
                            });
                    //把監聽器放進超類的屬性
                    this.listeners = config.listeners;
                    //調用超類構造超類不變量
                    ForumThread.superclass.constructor.call(this, config)
                },
                //領域行爲,會觸發事件
                changeName : function(newName) {
                    alert("原主題名字是:" + this.name);
                    this.name = newName;
                    alert("更改後主題名字是:" + this.name);
                    this.fireEvent("change", this);//觸發事件
                }
            });

    Ext.onReady(function() {
        var forumThread = new ForumThread({
                    name : '關於將Jdon框架提升爲DCI框架的設想',
                    //構造領域模型時注入監聽處理程序
                    listeners : {
                        change : function(thread) {
                            alert('接受到事件,將異步保存新的名字:' + thread.name);
                        }
                    }
                });
        //領域行爲調用
        forumThread.changeName("關於將Jdon框架提升爲DCI框架的設想,整合JdonMVC");
    });

 

Ext中有一個BLANK_IMAGE_URL屬性有必要提一下,它是一個空白圖片的URL,聽說是用來做一些圖標的佔位,如果我們設置了圖標,那麼它就不起作用,但是如果不設置圖標,它就有用。設置圖標可以直接配置圖標的路徑或者用css配置。空白圖片的默認行爲在Ext源碼中如下:

 

BLANK_IMAGE_URL : Ext.isIE6 || Ext.isIE7 || Ext.isAir ?
                            'http:/' + '/www.extjs.com/s.gif' :
                            'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',

 如果Ext運行環境是IE和Adobe的AIR,則請求www.extjs.com/s.gif這個圖片,如果不是就直接把一個base64編碼的二進制當做空白圖片。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章