extjs

extjs

單元格軟件
extjs是一種軟件。自動生成行号,支持checkbox全選,動态選擇顯示哪些列,支持本地以及遠程分頁,可以對單元格按照自己的想法進行渲染,這些也算可以想到的功能。[1]
    軟件名稱: 軟件平台: 軟件語言: 開發商: 軟件授權: 軟件版本:1.0正式版 軟件大小: 中文名:Extjs 上市時間:2006年初 開發語言:中文 發展史:進行自定義的擴展

序言

功能豐富,無人能出其右

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

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

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

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

發展史

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

2、在2006年初,JackSlocum(傑克斯·洛克姆)就一套公用設施擴建為Yahoo!UserInterface(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日的首次ExtConference中發布了Ext的3.0RC版本。

7、2009年5月4日,Ext的3.0 版本發布。

8、2010年1月8日,ExtJS已發展涵蓋美國、日本、中國、法國、德國等全球範圍的用戶,現在的版本為Ext-5.0。

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

10、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,數據流可輕松在你的應用中進出。

11、 2012年3月14日,Extjs4.1正式發布。

12、 2013年05月16日,Extjs4.2正式發布。

概念

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組件輕松。

主要功能

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開始收費,這給他的應用前景帶來一些問題。不過對國内開發人員的影響不大,畢竟是客戶付款。

經驗小結

一、理解HTMLDOM、ExtElement及Component

要學習及應用好Ext框架,需要理解HtmlDOM、ExtElement及Component三者的區别。

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

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

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

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

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

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

varview=newExt.Viewport();//創建了一個組件Component

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

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

再看下面的代碼:

varwin=newExt.Window({id:"win1",title:"我的窗口",width:200,height:200});

win.show();

varc=Ext.getCmp("win1");//得到組件win

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

vardom=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)那樣有固定的代碼設計模式,而往往是不同的人就有不同的編程風格。在實際應用開發中,隻有見多識廣,才能在自己的在腦中建立一個開發庫。

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

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的應用。

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

相關詞條

相關搜索

其它詞條