Extjs 介紹 及API 官方例子 Ext JS 3.1 RC extjs 3.1 API Ext JS 3.1 RC 例子下載下傳 Extjs介紹

extjs 3.1 API  Ext JS 3.1 RC 例子下載下傳

 Extjs介紹

（轉載）

官方網站：http://www.extjs.com/

API： http://www.extjs.com/deploy/dev/docs/

中文API ： http://www.jshuwei.org.cn/Ext3/docs/

 extjs 3.1 API 例子下載下傳

附件中有官方示例代碼，及中文手冊。

序言：

　2.1. 功能豐富，無人能出其右

無論是界面之美，還是功能之強，ext的表格控件都高居榜首。

單選行，多選行，高亮顯示選中的行，推拽改變列寬度，按列排序，這些基本功能咱們就不提了。

自動生成行号，支援checkbox全選，動态選擇顯示哪些列，支援本地以及遠端分頁，可以對單元格按照自己的想法進行渲染，這些也算可以想到的功能。

再加上可編輯grid，添加新行，删除一或多行，提示髒資料，推拽改變grid大小，grid之間推拽一或多行，甚至可以在tree和grid之間進行拖拽，啊，這些功能實在太神奇了。更令人驚歎的是，這些功能竟然都在ext表格控件裡實作了。

呵呵~不過ext也不是萬能的，與fins的ecside比較，ext不能鎖定列（洋芋說1.x裡支援鎖定列，但是2.0裡沒有了，因為影響效率。），也沒有預設的統計功能，也不支援excel，pdf等導出資料。另外fins說，通過測試ecside的效率明顯優于ext呢。:)

Ext發展史：

1、第一隻“出海”的YUI-Ext隻是作者Jack打算對基于BSD協定的Yahoo!UI庫進行自定義的擴充，但後來一度風頭蓋過其父輩YUI，足以說明 大家對它的熱情，很多人把它投入項目人并不十分了解它。分析人士打了一比喻：就好比尚未謀面， 并不了解一個人的家庭、教育、品行等背景，隻因為他有一副精緻漂亮的外觀，就對其陷入了瘋狂的傾慕之中。是以分析人士建議，在投入項目前，要認真仔細地了 解EXT的内在原理和與其他Ajax庫不同地方。

2、在2006年初 ，Jack Slocum(傑克斯·洛克姆 ) 就一套公用設施擴建為Yahoo! User Interface (YUI) 庫而工作。這些擴充很快組織成一個獨立的庫代碼并以” yui-ext” 的名義下釋出。

3、在2006年秋天,Jack發行了版本為0.33的yui-ext,而最終被證明為最後版本的代碼，根據這名字（下開放源代碼DSB許可）。在年底之前，這個庫已大受歡迎, 名字被簡化為Ext，反映了它作為一個架構的成熟和獨立。

該公司成立于2007年初，Ext現在為雙執照，使用LGPL和一個商業執照。

4、在2007年4月1日，釋出1.0正式版。

5、直至今日(2008年4月1日)ExtJS已發展涵蓋美國、日本、中國、法國、德國等全球範圍的使用者，現在的版本為Ext-3.0

6、官方在2009年4月14-16日的首次Ext Conference中釋出了Ext的3.1.1 RC版本。

什麼是Ext：

1、ExtJS可以用來開發RIA也即富用戶端的AJAX應用，是一個用javascript寫的，主要用于建立前端使用者界面，是一個與背景技術無關的前端ajax架構。是以，可以把ExtJS用在.Net、Java、Php等各種開發語言開發的應用中。ExtJs最開始基于YUI技術，由開發人員JackSlocum開發，通過參考JavaSwing等機制來組織可視化元件，無論從UI界面上CSS樣式的應用，到資料解析上的異常處理，都可算是一款不可多得的JavaScript用戶端技術的精品。

2、Ext的UI元件模型和開發理念脫胎、成型于Yahoo元件庫YUI和Java平台上Swing兩者，并為開發者屏蔽了大量跨浏覽器方面的處理。相對來說，EXT要比開發者直接針對DOM、W3C對象模型開發UI元件輕松。

ExtJs UI Engine簡介：

ExtJs初期僅是對Yahoo! UI的對話框擴充，後來逐漸有了自己的特色，深受網友的喜愛。 發展至今， Ext除YUI外還支援Jquery、Prototype等的多種JS底層庫，讓大家自由地選擇。該架構完全基于純Html/CSS+JS技術，提供豐富的跨浏覽器UI元件，靈活采用JSON/XML資料源開發，使得服務端表示層的負荷真正減輕，進而達到用戶端的MVC應用！

ExtJs支援多平台下的主流浏覽器 Internet Explorer 6+ FireFox 1.5+ (PC, Mac) Safari2+、Opera9+。在使用的廠家包括IBM、Adobe、Cisco和更多。ExtJs官方網站www.extjs.com

Ajax主流架構與ExtJS

JQuery、 Prototype和YUI都屬于非常核心的JS庫。雖然YUI，還有最近的JQuery，都給自己建構了一系列的UI器件（Widget），不過卻沒有一個真正的整合好的和完整的程式開發平台。哪怕是這些低層的核心庫已經非常不錯了，但當投入到真正的開發環境中，依然需要開發者做大量的工作去完善很多缺失之處。而Ext就是要填補這些缺口。主流開源架構中隻有Dojo像Ext一樣，嘗試着提供整合的開發平台。相比Dojo這個出色的工具包，我們認為 Ext能提供一個粘合度更高的應用程式架構。Ext的各個元件在設計之時就要求和其它Ext元件組合一起工作是無縫合作的。這種流暢的互通性，離不開一個緊密合作的團隊，還必須時刻強調設計和開發這兩方面目标上的統一，而這點是很多開源項目未能做到的。從建構每一個元件開始，我們始終都強調元件的外觀、性能、互通性和可擴充性，而我們認為元件已經達到了這幾點的要求。

Ext絕對可以單獨使用。實際上，除了有特定的要求，推薦單獨使用Ext，這樣的話檔案占位更小，支援和整合也更緊密。我們也支援與jQuery、 YUI或Prototype整合使用，作為低層庫的角色出現，以提供處理各種核心的服務，如DOM和事件處理，Ajax連接配接和動畫特效。使用整合方式的一個原因是它們已具備了一些特定的器件而Ext并沒有原生支援——像YUI的History控件便是一個典型的例子。這時，Ext需要依賴YUI這個庫的底層來實作History控件，這樣一來的話也可免去Ext自身底層庫，進而減少了整個程式的記憶體占用。另一個使用整合方式的原因是，對于許多已在使用其他底層庫的程式，你可能希望逐漸加入Ext。總之，如果已經有了其他庫，Ext可已利用它們。我們的宗旨是為使用者提供各種可能性和性能上的優化。而事實是，隻要實作了相對應的底層庫接口，為任意一個架構添加上擴充卡是沒有問題的——人們可以輕松地将Dojo、Moo、Ajax.NET，或其它JS庫轉變為 Ext的底層。

Ext從2.x開始收費，這給他的應用前景帶來一些問題。不過對國内開發人員的影響不大，畢竟是客戶付款。

Ext學習及應用經驗小結

　一、了解Html DOM、Ext Element及Component

要學習及應用好Ext架構，需要了解Html DOM、Ext Element及Component三者的差別。

Ext是基于Web的富用戶端架構，其完全是基于标準W3C技術建構設的，使用到的都是HTML、CSS、DIV等相關技術。Ext最傑出之處，是開發了一系列非常簡單易用的控件及元件，我們隻需要使用這些元件就能實作各種豐富多彩的UI的開發。

無論元件有多少配置屬性、還是事件、方法等等，其最終都會轉化為HTML在浏覽器上顯示出來，而每一個HTML頁面都有一個層次分明的DOM樹模型，浏覽器中的所有内容都有相應的DOM對象，動态改變頁面的内容，正是通過使用腳本語言來操作DOM對象實作。

僅僅有DOM是不夠的，比如要把頁面中的某一個節點移到其它位置，要給某一個節點添加陰影效果，要隐藏或顯示某一個節點等，我們都需要通過幾句 javascript才能完成。是以，Ext在DOM的基礎上，建立了Ext Element，可以使用Element來包裝任何DOM，Element對象中添加了一系列快捷、簡便的實用方法。

對于終端使用者來說，僅僅有Element是不夠的，比如使用者要顯示一個表格、要顯示一棵樹、要顯示一個彈出視窗等。是以，除了Element以外，Ext 還建立了一系列的用戶端界面元件Component，我們在程式設計時，隻要使用這些元件Componet即可實作相關資料展示及互動等，而 Component是較高層次的抽象，每一個元件在渲染render的時候，都會依次通過Element、DOM來生成最終的頁面效果。

在使用Ext開發的應用程式中，元件Component是最高層次的抽象，是直接給使用者使用的，Ext Element是Ext的底層API，主要是由Ext或自定義元件調用的，而DOM是W3C标準定義的原始API，Ext的Element通過操作DOM 來實作頁面的效果顯示。

在Ext中，元件渲染以後可以通過通路元件的el屬性來得到元件對應的Element，通過通路Element的dom屬性可以得到其下面的DOM對象。另外，我們可以通過通過Ext類的快捷方法getCmp、get、getDom等方法來得元件Component、Ext元素Element及DOM節點。比如：

var view=new Ext.Viewport();//建立了一個元件Component

view.el.setOpacity(.5);//調用Element的setOpacity方法

view.el.dom.innerHTML="Hello Ext";//通過Element的dom屬性操作DOM對象

再看下面的代碼：

var win=new Ext.Window({id:"win1",title:"我的視窗",width:200,height:200});

win.show();

var c=Ext.getCmp("win1");//得到元件win

var e=Ext.get("win1");//根據id得到元件win相應的Element

var dom=Ext.getDom("win1");//得到id為win1的DOM節點

二、熟悉ext元件體系

Ext2.0對整個架構進行了重構，最為傑出的是推出了一個以Component類為基礎的元件體系，在Component類基礎上，使用面向對象的方法，設計了一系列的元件及控件。是以，要能遊刃有餘地使用Ext，熟悉Ext元件體系是最基本的。

在《ExtJS實用開發指南》中，有如下面一幅元件圖：

通過元件結構圖我們可以一目了然的看出整個Ext元件繼承及組成體系，當使用一個元件的時間，了解他的繼承體系，這樣可以便于我們掌握元件的各種特性。

三、掌握核心控件　

控件其實也是元件，比如用于顯示樹資訊的TreePanel、用于顯示表格的GridPanel及EditorGridPanel，還有代表應用程式視窗的Ext.Window等都屬于Ext控件。在使用Ext的時候，一定要掌握一些核心控件，特别是處于基類的控件。比如上面提到的幾個控件，他們都是繼承于面闆Panel，是以我們要重點掌握面闆這個核心控件的特性。比如面闆由以下幾個部分組成：一個頂部工具欄(tbar)、一個底部工具欄(bbar)、面闆頭部(header)、面闆尾部(bottom)、面闆主區域(body)幾個部分組成。面闆類中還内置了面闆展開、關閉等功能，并提供一系列可重用的工具按鈕使得我們可以輕松實作自定義的行為，面闆可以放入其它任何容器中，面闆本身是一個容器，他裡面又可以包含各種其它元件。隻要掌握了Panel的應用，那麼學習TreePanel、Window等就會變得簡單得多。

同樣的道理，對于Ext的表單字段來說，不管是ComboBox，NumberField、還是DateField，他們其它都是 Ext.form.Field類的子類，在他上面定義了表單字段的各種基本操作及特性。在學習使用表單字段元件時，一定要重點研究Field這個類，掌握他的主要方法、事件等，就能有助于更好的學習使用其它的字段。

四、學習及研究示例

由于javascript語言非常靈活，不像靜态強類型語言（比如Java）那樣有固定的代碼設計模式，而往往是不同的人就有不同的程式設計風格。在實際應用開發中，隻有見多識廣，才能在自己的在腦中建立一個開發庫。

學習别人的示例對于我們開發幫助會非常大，示例包括基本元件的應用、綜合應用等多個方面。在此，簡單推薦幾個。

１、Ext官方示例，在ext項目下載下傳包的examples目錄中，包括各個控件的基本應用示範，同時還有一些比較複雜的組合示例，有簡有繁，非常适合初學者認真研究。

２、Vifir推出的示例，Vifir推出的一些示例主要包括兩類，一種是開源的示例應用，另外一種是針對VIP使用者的實用示例。開源的示例主要是指 wlr單使用者blog系統，這個一個集合了前背景技術的ext綜合示例，而針對VIP使用者的實用示例則是可以作為開發骨架或擴充元件的示例。

３、其它示例，在ext社群中還有很多比較優秀的ext應用示例，有些隻是一個應用示範，雖然沒有提供源碼下載下傳，但我們可以直接下載下傳引用的js檔案來得到這些示例的ext應用代碼，同樣能取起到非常好的學習效果。

五、多運用

Ext看起來是非常簡單的東西，稍有點程式設計知識的人，按照《ExtJS實用開發指南》中的入門指南，半小時就能學會使用Ext。然而，當準備使用Ext開發一個項目時，卻不知道從何處入手，或者是在使用Ext的時候，出了一點小問題自己不知道該如何解決。程式設計是一門實踐性的科學，僅僅靠看書、看别人寫的代碼是遠遠不夠的，是以，必須多做實踐才行，隻有通過不斷的練習，大量的使用，才能對Ext的元件特性、事件、事件處理機制以及與伺服器端互動接口等深入的掌握，隻有多做運用，深入了解ext的元件的工作原理及機制，才能編寫出進階的Ext的應用。

六、熟讀Ext項目的源代碼

如果要想深入應用Ext，那麼閱讀Ext項目的源代碼這是必不可少的環節，Ext的代碼品質非常高，通過閱讀他的代碼我們可以更加深刻的了解 javascript面向對象程式設計，Ext代碼中包含了很多進階的js技巧以及設計模式。在使用Ext的過程中，我們經常根據項目的需要對Ext元件進行擴充，設計自己的元件或控件，而如何實作一個自定義的Ext元件，我們可以從Ext的各個元件源代碼中找到答案。

Ext的源代碼在Ext項目的source目錄。讀Ext源碼，并不一定非要從某一個地方開始，而元件核心代碼Component.js、容器元件代碼 Container.js、面闆Panel.js等這些是必看的； core目錄中的Element.js、Ext.js等也是必看的。當需要從一個控件進行擴充的時候，最好能簡單看一看這個控件的源代碼。

extjs 3.1 API 例子下載下傳。附件是部署在 jboss 的。