extjs

　　功能豐富，無人能出其右。

　　單選行，多選行，高亮顯示選中的行，拖拽改變列寬度，按列排序，這些基本功能ExtJS輕量級實作。

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

　　其實從ext3開始就支援各種方式的統計，且有控件支援excel導出。

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

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

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

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

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

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

　　6、2009年5月4日，Ext的3.0 版本釋出。

　　8、2010年6月15日，當開發者通路著名的JavaScript庫ExtJS網站，會發現自己被重導向到另一個不熟悉的網址和界面sencha。原來，，ExtJS項目已經與觸摸屏代碼庫項目jQTouch和SVG處理庫Raphael合并，後兩個項目的創始人David Kaneda和Dmitry Baranovskiy也将加入ExtJS。此舉是ExtJS為了應對HTML5等新趨勢，加強豐富圖形和觸摸屏功能的重要舉措。

　　9、2011年4月22日，Extjs4.0正式釋出，主要有以下改進：

　　核心改進：檢視架構的架構和重塑其基礎。這些變化不單提供了産品性能，還提高了其健壯性。

　　測試架構：在所有支援的浏覽器上對架構進行了持續全面的測試。

　　類系統：作為Extjs 4架構更新的一部分，引用了一個功能更完整的類系統。

　　沙盒：在ExtJS曆史上，ExjJS 4首次提供了完整的沙盒模式。從ExtJS 4開始，架構不再擴充數組或函數等原生對象，是以，與其它的架構同時加載到頁面時，再也不會産生沖突。

　　應用架構：在ExtJS 4，引入了一個标準化的幾乎适合任何ExtJS應用程式的MVC風格的應用架構。使用MVC，開發團隊隻需要學習一種架構就能了解任何ExtJS 4的應用。

　　SDK工具：正在測試beta版的Sencha SDK工具，在第一版本中包括了優化工具、生成器和slicer工具。這些工具可讓你優化Javascript程式，以確定主題能在IE6正常工作。

　　全新的圖表庫：ExtJS4中， 全新的、插件自由的圖表庫是最激動人心的新功能之一，建立了餅圖、線圖、面積圖、雷達圖等等，所有這些都是動畫的、易于配置的和可擴充的。

　　更智能的渲染和布局：引入了新的渲染和布局管道，隻有在需要的時候才更新DOM，進而讓應用更快。改進了布局本身，删除了FormLayout，意味着你能使用任何布局組合建立最完美的表單。

　　增壓的資料包：ExtJS一個基礎性的作品就是資料包。不管你将資料加載到Grid、tree或其它元件，改進的資料包，都比以往更容易。新架構還支援HTML的localStorage，資料流可輕松在你的應用中進出。

　　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

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

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

　　Ajax隻是Js架構中的一個子集

　　一、了解Html DOM、Ext Element及Component

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

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

　　僅僅有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元件體系

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

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

　　三、掌握核心控件　

　　四、學習及研究示例

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

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

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

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

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

　　五、多運用

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

　　七、了解，熟悉，掌握Json

<dl></dl>

<dt>擴充閱讀：</dt>

<dd></dd>

1

2

3

4

<a href="http://www.softbk.com/news.asp?id=3624" target="_blank">http://www.softbk.com/news.asp?id=3624</a>

5

6

7

8

9

10

11

12