ExtJS <1> HelloWord

最近學ajax，接觸到了Extjs這個強大的框架。我想經過個人學習筆記，最後可讓你們上手在項目中使用Ext。首先我會寫一些基本的用於入門Ext的文章，打好基礎是很重要的。在瞭解基礎後，可能會用Ext+ajax開發一個簡單的小項目，會一點一滴的講解項目開發過程，但願能給你們帶來收穫！由於我本人也在學習這個框架，因此對文章有什麼建議請提出，這樣可能會讓我學到更多。


看到這幅圖，你可能認爲是某個軟件，或者是Flash、Flex、silverlight等等，但這是javascript+Css實現的。



      在看這樣式與效果，若是加在本身的項目裏，用戶視覺與操做的體驗應該會很爽吧。 還有更多的特效就不一一截圖了。
      下面開始說一下這個組件，ExtJs是一個不錯的Ajax框架，是用javascript寫的。效果什麼樣上面也看到了。咱們可以把ExtJs應用到任何web開發語言中。他的客戶端效果是很是強大的，同時Ext也提供了與服務器交互的機制，用起來很是方便，Ext與服務器交互的文章後面會寫到。
      在應用以前咱們須要先得到這個框架，能夠去 http://extjs.com/products/extjs/download.php 官網下載，開源的。下載完畢解壓後會獲得以下目錄。


adapter：負責將裏面提供的第三方底層庫（包括Ext自帶的）映射爲Ext所支持的底層庫。
build：壓縮後Ext所有源碼（分類存放）
docs：API幫助文檔
examples：一些Extjs作出的效果示例
resources：Ext UI資源文件目錄，css、圖片都在這
source：無壓縮Ext所有的源碼
ext-all.js  ：壓縮後Ext所有源碼，關鍵文件啊，500多K
ext-all-debug.js：無壓縮Ext所有源碼（用於調試）
ext-core.js ：核心組件，包括source/core下全部類
ext-core-debug.js：無壓縮核心組件
        
       接下來將在一個純靜態的html頁面中作測試，若是想應用ExtJs首先須要導入3個腳本文件一個樣式表

     < link rel = " stylesheet "  type = " text/css "  href = " extjs/resources/css/ext-all.css "   />
     < script src = " extjs/ext-base.js "  type = " text/javascript " ></ script >
     < script src = " extjs/ext-all.js "  type = " text/javascript " ></ script >
     < script src = " extjs/ext-lang-zh_CN.js "  type = " text/javascript " ></ script >

      這裏要說明一下， 在Extjs文件加載完畢後，會執行Ext.onReady中指定的函數 ，咱們能夠用簡單的代碼作一個測試。

< script language = " javascaript " >
function  start() {
     Ext.MessageBox.alert("ok","Extjs框架已加載！"); 
}
Ext.onReady(start);
< / script>
< script language = " javascaript " >
Ext.onReady(
             function {
                   Ext.MessageBox.alert("ok","Extjs框架已加載！"); 
             }
    );
< / script>

      兩種寫法能夠實現同一個效果
      注意 Ext.onReady(start)不須要加()。
       Ext.MessageBox.alert("ok","Extjs框架已加載！"); 用於輸出一個對話框。
       Ext.MessageBox.alert('標題','彈出內容');它也能夠寫成Ext.Msg.alert('','');
運行效果以下

      一個alert對話框能夠輕鬆用Extjs來實現了。prompt('','');在Extjs中一樣存在相對應用法。

function  Prompt() {
    Ext.MessageBox.prompt(
        "Input",
           "input a number:",
    function(button,text){
        if(button=="ok")
            Ext.MessageBox.alert("number","the number is "+text);
        else
            Ext.MessageBox.alert("sorry","the number is null.");
        }
    );
}

      這個語法稍有麻煩, Ext.MessageBox.prompt('標題','說明:',完畢後執行的函數);  執行的函數須要有兩個參數,button與text。button用來判斷用戶選擇了取消仍是肯定選項。肯定則爲該值爲'ok'。text爲輸入的文字。

      只列舉兩個小例子作說明，還有confim等用法都類似。
      還有一個比較經常使用，也比較容易理解的Window框。
      
      這個漂亮框框能夠拖動，點X能夠關閉。
      用法以下：

function  Window() {
    var win=new Ext.Window({title:"hello",width:300,height:200,html:'This is the body.'});
    win.show();
}

      這裏就須要建立一個Ext.Window的對象，調用show方法進行顯示。
      Ext.Window在構造函數中能夠傳入不少參數，這裏只用到了title、width、height和body區域顯示的內容。
       new Ext.Window({title:"",width:300,height:200,html:'This is the body.'});
      title:""  設置標題
      width:300 寬度
      height:200 高度
      html:'xxxx'   能夠放置任何html代碼    

下文摘自資料：

Element：Ext的核心

大多數的JavaScript操做都須要先獲取頁面上的某個元素的引用（reference）,好讓你來作些實質性的事情。傳統的JavaScript作法，是經過ID獲取Dom節點的：

var myDiv = document.getElementById('myDiv');

這毫無問題，不過這樣單單返回一個對象（DOM節點），用起來並非太實用和方便。爲了要用那節點乾點事情，你還將要手工編寫很多的代碼；另外，對於不一樣類型瀏覽器之間的差別，要處理起來可真頭大了。

進入Ext.element 對象。元素（element）的的確確是Ext的心臟地帶，--不管是訪問元素（elements）仍是完成一些其餘動做，都要涉及它。Element的 API是整個Ext庫的基礎，若是你時間很少，只是想了解Ext中的一兩個類的話，Element必定是首選！

由ID獲取一個Ext Element 的相應代碼以下（首頁ExtStart.htm 包含一個ID爲「myDiv」的 div，而後，在ExtStart.js中加入下列語句）： The corresponding code to get an Ext Element by ID looks like this (the starter page ExtStart.html contains a div with the id "myDiv," so go ahead and add this code to ExtStart.js):

Ext.onReady(function() { var myDiv = Ext.get('myDiv');});

再回頭看看Element對象，發現什麼有趣的東東呢？

• Element包含了常見的DOM方法和屬性，提供一個快捷的、統一的、跨瀏覽器的接口（若使用Element.dom的話，就能夠直接訪問底層DOM的節點。）；
• Element.get()方法提供內置緩存（Cache)，屢次訪問同一對象效率上有極大優點；
• 內置經常使用的DOM節點的動做，而且是跨瀏覽器的定位的位置、大小、動畫、拖放等等（添加/移除 CSS 類, 添加/移除事件處理程序, 定位, 改變大小, 動畫, 拖放）。

這意味着你可用少許的代碼來作各類各樣的事情，這裏僅僅是一個簡單的例子（完整的列表在Element API 文檔中）。

繼續在ExtStart.js中，在剛纔咱們獲取好myDiv的位置中加入：

myDiv.highlight(); //黃色高亮顯示而後漸退 myDiv.addClass('red'); // 添加自定義CSS類 (在ExtStart.css定義) myDiv.center(); //在視圖中將元素居中 myDiv.setOpacity(.25); // 使元素半透明

獲取多個DOM的節點

一般狀況下，想獲取多個DOM的節點，難以依靠ID的方式來獲取。有可能由於沒設置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素 了。這種狀況下，你就會不用ID來做爲獲取元素的依據，可能會用屬性（attribute）或CSS Classname代替。基於以上的緣由，Ext引入了一個異常強大的Dom Selector庫，叫作DomQuery。

DomQuery可 做爲單獨的庫使用，但經常使用於Ext，你能夠在上下文環境中（Context）獲取多個元素，而後經過Element接口調用。使人欣喜的 是，Element對象自己便有Element.selcect的方法來實現查詢，即內部調用DomQuery選取元素。這個簡單的例子 中，ExtStart.htm包含若干段落（<p>標籤），沒有一個是有ID的，而你想輕鬆地經過一次操做立刻獲取每一段，全體執行它們的動 做，能夠這樣作：

// 每段高亮顯示 Ext.select('p').highlight();

Element.select在這個例子中的方便性顯露無疑。它返回一個複合元素，能經過元素接口（Element interface）訪問每一個元素。這樣作的好處是可不用循環和不分別訪問每個元素。

DomQuery的選取參數能夠是一段較長的數組，其中包括W3C CSS3 Dom選取器、基本XPatch、HTML屬性和更多，請參閱DomQuery API文檔以瞭解這功能強大的庫箇中細節。

響應事件

到這範例爲止，咱們所寫的代碼都是放在onReady中，即當頁面加載後總會當即執行，功能較單一——這樣的話，你便知道，如何響應某個動做或事件 來執行你但願作的事情，作法是，先分配一個function，再定義一個event handler事件處理器來響應。咱們由這個簡單的範例開始，打開ExtStart.js，編輯下列的代碼：

Ext.onReady(function() { Ext.get('myButton').on('click', function(){ alert("你單擊了按鈕");});});

代碼依然會加載好頁面後執行，不太重要的區別是，包含alert()的function是已定義好的，但它不會當即地被執行，是分配到按鈕的單擊事 件中。用淺顯的文字解釋，就是：獲取ID爲'myDottom'元素的引用，監放任何發生這個元素上被單擊的狀況，並分配一個function,以準備任 何單擊元素的狀況。

通常來講，Element.select也能作一樣的事情，即做用在獲取一組元素上。下一例中，演示了頁面中的某一段落被單擊後，便有彈出窗口：

Ext.onReady(function() { Ext.select('p').on('click', function() { alert("你單擊了一段落;");});});

這兩個例子中，事件處理的function均是簡單幾句，沒有函數的名稱，這種類型函數稱爲「匿名函數（anonymous function）」，便是沒有名的的函數。你也能夠分配一個有名字的event handler,這對於代碼的重用或多個事件頗有用。下一例等效於上一例：

Ext.onReady(function() { var paragraphClicked = function() { alert("你單擊了一段落;");} Ext.select('p').on('click', paragraphClicked);});

到目前爲止，咱們已經知道如何執行某個動做。但當事件觸發時，咱們如何得知這個event handler執行時是做用在哪個特定的元素上呢？要明確這一點很是簡單，Element.on方法傳入到even handler的function中（咱們這裏先討論第一個參數，不過你應該瀏覽API文檔以瞭解even handler更多的細節）。在咱們以前的例子中，function是忽略這些參數的，到這裏可有少量的改變，——咱們在功能上提供了更深層次的控制。必 須先說明的是，這其實是Ext的事件對象（event object）,一個跨瀏覽器和擁有更多控制的事件的對象。例如，能夠用下列的語句，獲得這個事件響應所在的DOM節點：

Ext.onReady(function() { var paragraphClicked = function(e) { Ext.get(e.target).highlight();} Ext.select('p').on('click', paragraphClicked);});

注意獲得的e.target是DOM節點，因此咱們首先將其轉換成爲EXT的Elemnet元素，而後執行欲完成的事件，這個例子中，咱們看見段落是高亮顯示的。