包含extjs系列的詞條

本文目錄一覽：

1、JQuery-EasyUI與EXTjs有什麼區別？
2、Extjs4模仿desktop的桌面問題
3、關於後端程序員寫前端用什麼框架更好
4、ExtJS是什麼，一位學長說的，對這個從未聽說
5、轉：新手如何學習ExtJS 4

JQuery-EasyUI與EXTjs有什麼區別？

一、ExtJS

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

jQuery是一個兼容多瀏覽器的javascript框架，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人John Resig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開發。如今，jQuery已經成為最流行的javascript框架，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。

jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可以使開發者更加便捷，例如操作文檔對象、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕鬆的開發出功能強大的靜態或動態網頁。

三、二者對比

1.JQuery-EasyUI是仿照Ext做的。

2.Ext框架是一個整體，面向對象的編程思想，每個控制項之間可以相互通訊。

3.JQuery的控制項全都是分散的，沒有整體性可言。你可以單獨拿出來一個控制項就能用。

4.若要開發系統應用，首選Ext，控制項庫豐富，擴展和維護都方便。若是簡單的頁面動畫和效果，首選JQuery

5.jquery只是一個工具庫，比較簡單，相對容易。 Ext是一套真正的ria開發框架，甚至可以實現桌面應用一樣的強大功能。本身代碼質量極高，而且是高度的面向對象設計。jQuery 入門相對容易一些，實際用的過程中要用到各種插件，基本上用一個「學」一個。 ExtJS 入門稍難。

6.大小比較：首先ExtJS是一個完整的Framework,是重量級別的，easy ui 是基於jquery庫的一套UI組件庫，是輕量級的，ExtJS是應用application級的，而jquery是page頁面級的。當然application也是由page組成的，那就需要你自己去完成了，考慮你的需求，和使用框架的初衷，選擇使用哪一種。同時ExtJs由於是重量級框架，完全面向對象風格，提供API非常完備也非常龐大，所以學習成本也想相對較大。

7.兼容性比較：ExtJS兼容IE全系列瀏覽器和其他非IE現代瀏覽器，jquery UI向來不太考慮ie低版本瀏覽器的兼容，從態度上的鄙視。easy UI是基於jquery的，jquery2.X以上的版本不再支持IE6、7、8,，已鄭重聲明，請看官方網站，easyUI最新版本1.3.3使jQuery2.0,由於又很多HTML5特性，不再支持IE6\7\8，低版本由一些小部分的兼容不夠好，請自己做技術選型的時候去測試，要使用那個版本。在兼容問題上，都有瑕疵，主要看接收程度。

8.使用許可license. EXTJS 2.1以上版本，商用需要購買商業授權，jquery UI 使用MIT協議，開源。 jquery easyUI如果商用需遵循license commercial商業許可，也就是要購買使用權。

Extjs4模仿desktop的桌面問題

一個華麗的模擬Windows桌面的系統界面一定能讓他就像看到穿黑絲的背影一樣，感到眼前一亮。雖然穿黑絲的背影正面可能是個大媽，信息系統的核心也絕不是華而不實的界面。不管怎麼說提供一個能瞬間亮瞎客戶狗眼的界面和交互模式絕對不是件壞事。

說明：

有些地方沒有仔細推敲,還有重構的空間,應該沒有Bug,不過還是建議學習消化後再用。

我修改了下,代碼里只有展現層。業務邏輯和數據訪問層我先去掉了，這樣比較符合本篇主題，也方便大家單獨應用，以後會陸續添加

附送登錄頁，存在明文傳送密碼的問題，用在項目中要注意

附送傳統菜單頁面,主要是為了演示模塊化載入功能頁,缺少基本的退出,重新登錄之類的功能,自己可以添加功能

如果打算全套上ExtJs4,建議看完本系列並熟悉ExtJs4後再酌情考慮。如果只是用這個「殼」，套Iframe用自己的頁,那就沒啥太大問題了。

如果沒有使用ExtJs的經驗，不建議用本篇的代碼來學習，這是綜合應用，代碼比較複雜。

先給出 Xg.part1.rar 、 Xg.part2.rar源碼下載鏈接：

部署運行指南：

下載Xg.part1.rar和Xg.part2.rar 兩個文件並解壓，得到目錄 Xg

在 Visual Studio 2010中打開 Xg.sln,如下圖

把整個解決方案編譯一下,應該沒有任何錯誤。

把Xg.MVC.Application項目設為啟動項，然後按F5運行(建議用Chrome瀏覽器,IE9也行。不建議用IE6,7,8 速度會比較慢)。你也可以部署到IIS里運行。運行起來如下圖：

用戶名：admin 密碼: 000000 界面模式有「酷炫桌面」和「經典菜單」2種選擇進去後分別如下圖：

不完全使用指南：

目錄結構解釋：

菜單和快捷方式都是從C#返回的Json動態生成的，打開Fiddler2 根據請求的URL地址找到相應Controller下的Action 就可以查看到代碼。

Asp.Net大型項目實踐系列第二季(三)莫人云亦云,莫走彎路!ExtJs 認知、開發、調試3.「測試模塊1」演示了ExtJS4的按需載入新特性，也就是只有你打開這個模塊的時候，js才會載入。所以在Module1.aspx並沒有對Module1.js的引用。而是這樣去new了一個模塊對象的實例：

script type=”text/javascript”

Ext.create(‘Mod.TestModule.Module1’, { modId: ‘/TestModule/Module1/Module1’ });

/script

要注意的是按需載入需要在run.js里註冊文件夾路徑：

Ext.Loader.setConfig({

enabled : true,

paths : {

‘Mod.TestModule’ : ”,

‘OIT.ex’ : ”,

‘Ext.ux’ : ”

}

});

如果不想要那個在飄的浮雲，去run.js去掉如下代碼：

// 浮雲控制

var i = -500;

var el = Ext.get(‘scene_cloud’);

var cloudTask = {

run : function() {

el.setStyle(‘left’, i + ‘px’);

i++;

if (i document.body.clientWidth)

i = -500;

interval : 30

}

Ext.TaskManager.start(cloudTask);

WallpaperSettings.js可以設置自己的背景圖片列表，對應的文件夾是「\Scripts\Desktop\wallpapers」

store : new Ext.data.TreeStore({

model : ‘HMSDesktop.WallpaperModel’,

root : {

text : ‘Wallpaper’,

expanded : true,

children : [{

text : “無”,

iconCls : ‘asterisk_orange’,

leaf : true

}, child(‘blue.jpg’),

child(‘blue-curtain.jpg’),

child(‘fields-of-peace.jpg’),

child(‘fresh-morning.jpg’),

child(‘colorado-farm.jpg’),

child(‘blue-swirl.jpg’),

child(‘desk.jpg’),

child(‘desktop.jpg’),

child(‘desktop2.jpg’),

child(‘sky.jpg’),

child(‘19201080.jpg’),

child(‘FGHJ_079020.jpg’),

child(‘cloud.jpg’)]

}

})

HMSDesktop.js是桌面js的實例，建議從這裡看起，改開始菜單的標題也在這裡：

// 開始菜單

getStartConfig : function() {

var me = this, ret = me.callParent();

return Ext.apply(ret, {

title : ‘傳說中的弦哥’,

height : 400,

logo圖片啥的路徑在「\Content「和”\Scripts\Desktop\images”下，可以自己換。

關於後端程序員寫前端用什麼框架更好

設計剛出的一套網頁皮膚，封裝度為0。層層封裝到可以直接用後台語言寫頁面，封裝度為10。那麼我是這樣來區分前端框架的。

1級——純html+css 放5年前，基本就是用Dreamweaver剛排出來的頁面或者網頁查看源代碼扒下來的皮膚。不涉及到js，就是純頁面皮膚。

2級—— bootstrap系列 bootstrap的出現是一個里程碑事件。發源於twitter，引入了不少html5/css3的特性。由於它對響應式的支持以及良好的體驗，給人一種耳目一新的感覺。其源碼，不管是css還是js都值得學習一下，看後經常會有「原來還可以這樣做」這種恍然大悟的感覺。不過歸根結底是一套ui皮膚+少量js組成的框架，屬於封裝度偏低的框架。

3~4級—— metronic/adminLTE系列基於bootstrap或者其他1級框架，然後集成了各種jQuery插件、富文本編輯器等js庫，組成的一個大雜燴工具包和案例庫。皮膚基本是基於bootstrap自定義的一套主題。案例比較詳盡，開發的時候找到需要的組件把前端代碼複製粘貼，再稍微調試一下就能達到良好的視覺效果。根據集成的第三方庫的多少，基本可以劃分到3~4級封裝度這樣的範圍。這個級別的框架的代碼更多的是屬於粘合劑，將各種不同的第三方庫的前端代碼粘合起來。

5級—— jQuery-ui 這裡要單獨把jQuery-ui拿出來講，並不是因為它的封裝度有多高，而是我認為它是一個分界點。jQuery以下級別的框架，代碼以css為主，自身的js代碼少，框架量級更輕，更靈活，更適合互聯網web產品。jQuery以上級別的框架，屬於前端的重度封裝，通過框架暴露的介面進行開發，開發人員甚至不需要太多前端知識，只需要詳細查看框架的開發文檔即可。jQuery以上級別的框架更適合傳統管理軟體的開發。

6~7級—— easy-ui/DWZ easy-ui基於jQuery-ui，不過具有更豐富的組件庫。貌似商業版收費很高。聽說某大型國企花了大價錢購買下來使用。DWZ是國產框架中我認為綜合表現還不錯的，完全免費，有問題可以在他們的QQ群里提。其餘的之前還用過金蝶的operamasks-ui，不過現在好像已經不更新了。這一類級別的框架還有一個另外的稱呼——「富客戶端框架」，意思就是重度js框架。使用起來開發效率很高，當年也是一度百花齊放，框架輩出。

8級—— extjs系列 extjs屬於前端框架領域中的龐然大物，封裝程度很高，具有自成體系的元素選擇引擎和瀏覽器兼容方案，js寫法上也有自己的方式。組件很多很全。只看extjs的官方文檔和示例幾乎不必學習任何其他的前端知識就可以做出「很漂亮」的前端頁面。當然頁面很容易「撞衫」。使用時間長了，會對其產生嚴重依賴，離開extjs，幾乎不會寫前端頁面了。

9級——vaadin/GWT 最後一級，也是封裝度最高的一級，也就是所謂的使用後台語言寫前端。如果說之前的八級至少前端和後端還是相對分離的，後台程序在java中寫，前台程序在html或者js中寫；那麼這一級別的框架簡直會顛覆你的認知！只需在後台使用java寫好了類和對象，並設置好相關的屬性，網頁的元素是自動通過後台對象生成的。這當然有好處，媽媽再也不用擔心我不會寫js和css了。然而就學一下html/css/js真的那麼難嗎？個人認為，儘管GWT有google的這麼強悍的背書，但是這種9級封裝的本質上把前後台耦合得更緊密。一個人做一個項目還可以考慮，但是一個團隊前後台分離、模塊化開發的時候，使用這種框架是一種災難！所以我是極度不建議使用9級封裝框架的。

ExtJS是什麼，一位學長說的，對這個從未聽說

1.extja是什麼？

答： ExtJS是一種主要用於創建前端用戶界面，是一個與後台技術無關的前端ajax框架。

功能豐富，無人能出其右

無論是界面之美，還是功能之強，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.0 RC版本。

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

[編輯本段]什麼是EXT

[編輯本段]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官方網站

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

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

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

2.extjs應該很少應用吧我做jsp的，從來就沒有用過這些東西·

轉：新手如何學習ExtJS 4

最近運營ExtJS交流群的時候，感觸頗深，我感覺作為一個老手，我有必要介紹一下如何學習這種基礎性問題。新手如何學習ExtJS4？如何入門ExtJS4？如何快速學習ExtJS4？1.仔細閱讀新手教程新手教程是指ExtJS官方文檔中Guides那一系列文章，因為是英文的，新手閱讀起來可能有障礙，為此我特意翻譯了這一系列教程，根據使用頻度我已經差不多把最常用到的教程翻譯完了，後續還將繼續翻譯。

通讀這一系列教程後，你會對ExtJS的基本使用方法有個框架性的了解，你會大體上知道如何實現常用功能。現在我把所有已翻譯的教程列舉在此，記住，認真的讀一定對你有幫助。ExtJS 4 入門ExtJS 4 類系統(Class System)介紹ExtJS MVC架構講解ExtJS 4 布局和容器ExtJS 4 組件詳解ExtJS 4 數據(包)詳解ExtJS 4 Grids 詳解ExtJS 4 表單ExtJS 4 樹2.把官方文檔中的所有Demo都瀏覽一遍做這個事情是為了了解官方Demo中實現了哪些功能，當自己要做一個功能時，有例子照著做是最快的，瀏覽一遍就會對現有的Demo有個大概印象，當你沒有頭緒的時候你的大腦會在後台查找之前的印象的，仔細瀏覽一遍，沒有錯。3.熟讀API Docs(API文檔)最近遇到很多人問問題，把一段自己想當然寫出來的代碼貼上來問為什麼不對，事實上你仔細查一下API文檔就知道，你這種用法ExtJS根本就不支持，當然不對。

使用搜索的好處是：通常可以較快速的解決一些無頭緒的問題

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/196839.html