extjs

自動生成行號，支持checkbox全選，動態選擇顯示哪些列，支持本地以及遠程分頁，能夠對單元格按照本身的想法進行渲染，這些也算能夠想到的功能。

序言

編輯

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

不管是界面之美，仍是功能之強，ext的 表格控件都高居榜首。

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

自動生成 行號，支持 checkbox 全選，動態選擇顯示哪些列，支持本地以及遠程 分頁，能夠對 單元格按照本身的想法進行渲染，這些也算能夠想到的功能。

再加上可編輯 grid，添加新行，刪除一或多行，提示多行數據，拖拽改變grid大小，grid之間拖拽一或多行，甚至能夠在tree和grid之間進行拖拽，這些功能實在太神奇了。更使人驚歎的是，這些功能居然都在ext 表格控件裏實現了。

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

發展史

一、第一隻「出海」的 YUI-Ext只是做者Jack打算對基於BSD協議的 Yahoo! User Interface (YUI)庫進行自定義的擴展，但後來一度風頭蓋過其父輩YUI，足以說明 你們對它的熱情，不少人把它投入項目，但並不十分了解它。分析人士打了一個比喻：就比如還沒有謀面， 並不瞭解一我的的家庭、教育、品行等背景，只由於他有一副精緻漂亮的外觀，就對其陷入了瘋狂的傾慕之中。所以分析人士建議，在投入項目以前，要認真仔細地了 解EXT的內在原理和與其餘Ajax庫不一樣地方。

二、在2006年初 ，Jack Slocum(傑克.斯洛克姆 ) 就一套公用設施擴建爲YUI 庫而工做。這些擴展很快組織成一個獨立的庫代碼並以「yui-ext"的名義下發布。

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

該公司成立於2007年初，Ext如今爲雙執照，使用 LGPL和一個商業執照。

四、在2007年4月1日，發佈1.0正式版。

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

六、2009年5月4日，Ext的3.0 版本發佈。

七、2010年1月8日，ExtJS已發展涵蓋美國、日本、中國、法國、德國等全球範圍的用戶，如今的版本爲Ext-5.0。

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

九、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，數據流可輕鬆在你的應用中進出。

十、 2012年3月14日，Extjs4.1正式發佈。

十一、 2013年05月16日，Extjs4.2正式發佈.

主要功能:

編輯

一、 網格

大型數據頁面的無限/緩衝滾動功能獲得很大改進。同時，對於網格的「鎖定」功能，新增了鎖定和未鎖定兩種狀態。

二、佈局

在佈局上，經過避免瀏覽器迴流來加快訪問速度（瀏覽器迴流，指瀏覽器爲了從新渲染部分或所有的文檔而從新計算文檔中元素的位置和幾何結構的過程）。同時，新增了「邊界」佈局方式。收縮包圍的寬度問題，之前是用特定組件來處理，如今改成用核心組件來處理。

三、核心組件

XTemplates和方法重寫功能獲得顯著改善。Ext.override如今開始支持重寫實例方法，而且，能夠經過使用標準的callParent函數來訪問被重寫的方法。

此外，4.1版本開始支持經過使用函數名來實現事件監聽器。

概念

編輯

一、ExtJS能夠用來開發RIA也即富客戶端的AJAX應用，是一個用javascript寫的，主要用於建立前端用戶界面，是一個與後臺技術無關的前端 ajax框架。所以，能夠把ExtJS用在 .Net、Java、 Php等各類開發語言開發的應用中。ExtJs最開始基於YUI技術，由開發人員JackSlocum開發，經過參考JavaSwing等機制來組織可視化組件，不管從UI界面上CSS樣式的應用，到數據解析上的 異常處理，均可算是一款不可多得的JavaScript客戶端技術的精品。

二、Ext的UI組件模型和開發理念脫胎、成型於Yahoo組件庫YUI和 Java平臺上Swing二者，併爲開發者屏蔽了大量跨瀏覽器方面的處理。相對來講，EXT要比開發者直接針對DOM、W3C對象模型開發UI組件輕鬆。

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和更多。

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、AjaxNET，或其它JS庫轉變爲 Ext的底層。

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

學習應用

編輯

1、理解

要學習及應用好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，咱們在編程時，只要使用這些組件Component便可實現相關數據展現及交互等，而 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節點

2、熟悉組件體系

Ext2.0對整個框架進行了重構，最爲傑出的是推出了一個以Component類爲基礎的組件體系，在Component類基礎上，使用 面向對象的方法，設計了一系列的組件及控件。所以，要能遊刃有餘地使用Ext，熟悉Ext組件體系是最基本的。在《ExtJS實用開發指南》中，有以下面一幅 組件圖：

經過組件結構圖咱們能夠一目瞭然的看出整個Ext組件繼承及組成體系，當使用一個組件時，瞭解

他的繼承體系，這樣能夠便於咱們掌握組件的各類特性。

3、掌握核心控件

控件其實也是組件，好比用於顯示樹信息的TreePanel、用於顯示錶格的GridPanel及EditorGridPanel，還有表明應用程序窗口的Ext.Window等都屬於Ext控件。在使用Ext的時候，必定要掌握一些核心控件，特別是處於基類的控件。好比上面提到的幾個控件，他們都是繼承於面板Panel，因此咱們要重點掌握面板這個核心控件的特性。好比面板由如下幾個部分組成：一個頂部 工具欄(tbar)、一個底部工具欄(bbar)、面板頭部(header)、面板尾部(bottom)、面板主區域(body)幾個部分組成。面板類中還內置了面板展開、關閉等功能，並提供一系列可重用的工具按鈕使得咱們能夠輕鬆實現自定義的行爲，面板能夠放入其它任何容器中，面板自己是一個容器，他裏面又能夠包含各類其它組件。只要掌握了Panel的應用，那麼學習TreePanel、Window等就會變得簡單得多。

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

4、學習及研究示例

因爲javascript語言很是靈活，不像靜態 強類型語言（好比Java）那樣有固定的代碼設計模式，而每每是不一樣的人就有不一樣的編程風格。在實際應用開發中，只有見多識廣，才能在本身的在腦中創建一個開發庫。

學習別人的示例對於咱們開發幫助會很是大，示例包括基本組件的應用、綜合應用等多個方面。在此，簡單推薦幾個。

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

二、Vifir推出的示例，Vifir推出的一些示例主要包括兩類，一種是開源的示例應用，另一種是針對VIP用戶的實用示例。開源的示例主要是指 wlr單用戶blog系統，這個一個集合了先後臺技術的ext綜合示例，而針對VIP用戶的實用示例則是能夠做爲開發骨架或擴展組件的示例。

三、其它示例，在ext社區中還有不少比較優秀的ext應用示例，有些只是一個應用演示，雖然沒有提供源碼下載，但咱們能夠直接下載引用的js文件來獲得這些示例的ext應用代碼，一樣能取起到很是好的學習效果。

5、多運用

Ext看起來是很是簡單的東西，稍有點編程知識的人，按照《ExtJS實用開發指南》中的入門指南，半小時就能學會使用Ext。然而，當準備使用Ext開發一個項目時，殊不知道從何處入手，或者是在使用Ext的時候，出了一點小問題本身不知道該如何解決。編程是一門實踐性的科學，僅僅靠看書、看別人寫的代碼是遠遠不夠的，所以，必須多作實踐才行，只有經過不斷的練習，大量的使用，才能對Ext的組件特性、事件、事件處理機制以及與服務器端交互接口等深刻的掌握，只有多作運用，深刻了解ext的組件的工做原理及機制，才能編寫出高級的Ext的應用。

6、熟讀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等也是必看的。當須要從一個控件進行擴展的時候，最好能簡單看一看這個控件的 源代碼。

7、理解，熟悉，掌握Json

Ext自己的華麗外表就很吸引眼球了，但這僅僅是其外在的美，還有最核心的內在美，即：Json(JavaScript Object Notation)。Json是一種數據交互格式，一個不能實現數據交互功能的項目是沒有任何意義的，大多的Ajax框架的數據交互都基於Json，如：jQuery、ExtJs等。所以理解Json掌握Json並熟練運用是很重要的。以目前主流的開發語言爲例，.NET已經把Json封裝到類中，無需配置，直接與數據庫交互，輕鬆的封裝直接使用；Java就麻煩些，必須去下一個Json包，而後再作一些配置，纔可使用；PHP5.2.0及之後的版本已經封裝了Json，支持直接解析。PHP5.2.0之前的版本和Java差很少，也必須下載一個Json 插件（和類類似），可是不用配置，直接封裝使用。在實際的項目中，各自的取捨配置，都基於項目和需求，並非每一個項目（針對WEB）都必定要用到。可是，若是想在項目中用到此類的Ajax框架，Json的掌握又是必須的。