㈠ 深入淺出Extjs的完整目錄
第1章EXT概述 11.1下載EXT發布包 11.2如何查看EXT自帶的API和示例 11.3為什麼有些示例必須放在伺服器上才能看到效果 21.4Hello World 21.4.1直接使用下載的發布包 21.4.2在項目中使用EXT 31.5為什麼頁面提示找不到圖片 31.6輔助開發 41.6.1調試工具Firebug 41.6.2開發利器Spket 71.7本章小結 10第2章EXT框架基礎 112.1EXT的事件和類 112.1.1自定義事件 112.1.2瀏覽器事件 132.1.3Ext.lib.Event 132.1.4Ext.util.Observable 142.1.5Ext.EventManager 172.1.6Ext.EventObject 192.2EXT的核心組件 202.2.1Ext.Component 202.2.2Ext.BoxComponent 222.2.3Ext.Container 232.2.4Ext.Panel 242.2.5Ext.TabPanel 242.3本章小結 27第3章表格控制項 283.1Grid的特性簡介 283.2製作一個簡單的Grid 293.3Grid常用功能詳解 323.3.1部分屬性功能 323.3.2自主決定每列的寬度 333.3.3讓Grid支持按列排序 353.3.4解決中文排序 353.3.5顯示日期類型數據 373.4在單元格里顯示紅色的字、圖片和按鈕 383.5給Grid的行和列設置顏色 413.6自動顯示行號和復選框 423.6.1自動顯示行號 433.6.2復選框 443.7選擇模型 453.8表格視圖--Ext.grid.GridView 463.9表格分頁 473.9.1為Grid添加分頁工具條 483.9.2通過後台腳本獲得分頁數據 493.9.3分頁工具欄顯示在Grid的頂部 513.9.4讓EXT支持前台排序 523.10後台排序 533.11可編輯表格控制項--EditorGrid 553.11.1製作一個簡單的EditorGrid 553.11.2添加一行數據 563.11.3保存修改結果 583.11.4驗證EditGrid中的數據 593.11.5限制輸入數據的類型 603.12屬性表格控制項--PropertyGrid 633.12.1PropertyGrid 643.12.2隻能看不能動的PropertyGrid 653.12.3強制對name列排序 653.12.4根據name獲得value 663.12.5自定義編輯器 663.13分組表格控制項--group 663.13.1分組表格簡介 673.13.2分組表格視圖Ext.grid.GroupingView 683.14可拖放的表格 693.14.1拖放改變表格的大小 693.14.2在同一個表格里拖放 703.14.3表格之間的拖放 723.14.4表格與樹之間的拖放 733.15Grid與右鍵菜單 733.16本章小結 74第4章表單與輸入控制項 764.1製作一個表單 764.2FormPanel和BasicForm詳解 774.3EXT支持的控制項 774.3.1控制項繼承圖 774.3.2表單控制項 784.3.3基本輸入控制項Ext.form.Field 784.3.4文本輸入控制項Ext.form.TextField 794.3.5多行文本輸入控制項Ext.form.TextArea 804.3.6日期輸入控制項Ext.form.DateField 804.3.7時間輸入控制項Ext.form.TimeField 814.3.8在線編輯器Ext.form.HtmlEditor 814.3.9隱藏域Ext.form.Hidden 824.3.10下拉輸入框Ext.form.TriggerField 824.4使用表單提交數據 834.4.1EXT默認的提交形式 834.4.2使用HTML原始的提交形式 854.4.3單純Ajax 854.5數據校驗 864.5.1輸入不能為空 864.5.2最大長度和最小長度 874.5.3藉助vtype 884.5.4自定義校驗規則 884.5.5算不上校驗的NumberField 884.5.6使用後台返回的校驗信息 894.6表單布局 904.6.1默認的平鋪布局 904.6.2平行分列布局 914.6.3在布局中使用fieldset 934.6.4在fieldset中使用布局 954.6.5自定義布局:在表單中加入圖片 964.7ComboBox、datefield和timefield詳解 974.7.1ComboBox簡介 984.7.2將Select轉換成ComboBox 994.7.3ComboBox結構詳解 994.7.4使用遠程數據 1014.7.5ComboBox的高級配置 1024.7.6監聽用戶選擇了哪條數據 1044.7.7使用本地數據實現省、市、縣級聯 1044.7.8使用後台數據實現省、市、縣級聯 1074.8復選框和單選框 1104.8.1復選框 1104.8.2單選框Radio 1114.9文件上傳 1124.10自動把數據填充到表單中 1134.11本章小結 114第5章樹形結構 1165.1TreePanel的基本使用 1165.1.1創建一棵樹 1165.1.2為樹生枝展葉 1175.1.3tree的配置 1185.1.4使用TreeLoader獲得數據 1195.1.5讀取本地JSON數據 1215.1.6Struts 2的JsonPlugin 1215.1.7使用JSP提供後台數據 1225.2樹的事件 1255.3右鍵菜單 1265.4修改節點的默認圖標 1275.5從節點彈出對話框 1285.6節點提示信息 1295.7為節點設置超鏈接 1295.8直接修改樹節點名稱 1305.9樹形的拖放 1315.9.1節點拖放的三種形式 1315.9.2葉子不能append 1315.9.3判斷拖放的目標 1325.9.4樹之間的拖放 1345.10樹形過濾器TreeFilter 1355.11利用TreeSorter對樹進行排序 1375.12樹形節點視圖--Ext.tree.TreeNodeUI 1385.13表格與樹形的結合--Ext.tree.ColumnTree 1395.14本章小結 142第6章拖放 1436.1拖放簡介 1436.2拖放的簡單應用 1436.3拖放組件體系 1446.4拖放的事件 1466.5高級拖放 1486.5.1Basic 1486.5.2Handle 1496.5.3On Top 1506.5.4Proxy 1516.5.5Group 1526.5.6Grid 1546.5.7Circle 1556.5.8Region 1576.6本章小結 158第7章彈出窗口 1597.1Ext.MessageBox 1597.1.1Ext.MessageBox.alert() 1597.1.2Ext.MessageBox.confirm() 1607.1.3Ext.MessageBox.prompt() 1607.2對話框的更多配置 1617.2.1可以輸入多行的輸入框 1617.2.2自定義對話框的按鈕 1627.2.3進度條 1627.2.4動畫效果 1647.3Ext.window的常用屬性 1647.3.1創建一個窗口 1647.3.2窗口的最大化和最小化 1657.3.3窗口的隱藏與銷毀 1677.3.4防止窗口超出瀏覽器 1677.3.5設置窗口中的按鈕 1697.3.6窗口的其他配置選項 1707.4窗口分組 1717.5向窗口中放入各種控制項 1727.5.1在窗口中加入表格 1727.5.2在窗口中加入表單 1737.5.3復雜布局 1747.6本章小結 176第8章布局 1778.1布局的用途 1778.2最簡單的布局FitLayout 1798.3常用的邊框布局BorderLayout 1828.3.1設置子區域的大小 1848.3.2使用split並限制它的范圍 1858.3.3子區域的展開和折疊 1878.4製作伸縮菜單的布局--Accordion 1918.5實現操作向導的布局--CardLayout 1928.6控制位置和大小的布局--AnchorLayout和AbsoluteLayout 1948.7表單專用的布局FormLayout 1998.8分列式的布局ColumnLayout 2008.9表格狀的布局TableLayout 2028.10與布局相關的其他知識 2048.10.1超類Ext.Conainter的公共配置與xtype的概念 2048.10.2layout的超類Ext.layout.ContainerLayout 2058.10.3不指定任何布局時會發生的情況 2068.10.4使用Viewport對整個頁面進行布局 2068.10.5使用嵌套實現復雜布局 2078.11本章小結 210第9章工具欄和菜單 2119.1簡單菜單 2119.2向菜單中添加分隔線 2129.3多級菜單 2139.4高級菜單 2149.4.1多選菜單和單選菜單 2149.4.2日期菜單 2169.4.3顏色菜單 2169.4.4Ext.menu.Adapter菜單適配器 2179.4.5使用Ext.menu.MenuMgr統一管理菜單 2209.5工具欄組件詳解 2209.5.1Ext.Toolbar.Button 2219.5.2Ext.Toolbar.TextMenu 2219.5.3Ext.Toolbar.Spacer 2229.5.4Ext.Toolbar.Separator 2229.5.5Ext.Toolbar.Fill 2239.5.6Ext.Toolbar.SplitButton 2239.5.7為工具條添加HTML標簽 2249.5.8為工具條添加輸入控制項 2259.6分頁工具條Ext.PagingToolbar 2259.6.1Ext.PagingToolbar的基本用法 2259.6.2向Ext.PagingToolbar添加按鈕組件 2269.7右鍵彈出菜單 2279.8本章小結 229第10章數據存儲與傳輸 23010.1Ext.data簡介 23010.2Ext.data.Connection 23010.3Ext.data.Record 23210.4Ext.data.Store 23310.4.1基本應用 23310.4.2對數據進行排序 23410.4.3從store中獲取數據 23410.4.4更新store中的數據 23610.4.5載入及顯示數據 23710.4.6其他功能 23810.5常用proxy 23910.5.1MemoryProxy 23910.5.2HttpProxy 24010.5.3ScriptTagProxy 24010.6常用Reader 24110.6.1ArrayReader 24110.6.2JsonReader 24210.6.3XmlReader 24310.7高級store 24510.8EXT中的Ajax 24610.8.1最容易看到的Ext.Ajax 24610.8.2Ext.lib.Ajax是更底層的封裝 24710.9關於scope和createDelegate() 24710.10DWR與EXT整合 24910.10.1在EXT中直接使用DWR 24910.10.2DWRProxy 25010.10.3DWRTreeLoader 25210.10.4DWRProxy和ComboBox 25310.11localXHR支持本地使用Ajax 25410.12本章小結 255第11章實用工具 25611.1EXT提供的常用函數 25611.1.1onReady函數 25611.1.2get函數 25711.1.3query函數和select函數 26011.1.4encode函數和decode函數 26311.1.5extend函數 26511.1.6apply和applyIf函數 26611.1.7namespace函數 26611.1.8Ext.isEmpty函數 26711.1.9Ext.each函數 26811.1.10Ext.DomQuery 26911.2用DomHelper和Template動態生成HTML 27211.2.1用DomHelper生成小片段 27211.2.2Ext.DomHelper.applyStyles函數 27511.2.3Template模板 27611.2.4Ext.DomHelper.createTemplate函數 27811.2.5復雜模板XTemplate 27911.3用Ext.Utils.CSS切換主題 28111.4懸停提示 28211.4.1初始化 28211.4.2注冊提示 28311.4.3標簽提示 28311.4.4全局配置 28311.4.5個體配置 28411.5使用Ext.state保存狀態 28511.6fx實現的動畫效果 28811.7局部更新網頁內容 28811.8Ext.util.Format 29011.9使用Ext.util.CSS管理CSS樣式 29011.10使用Ext.util.ClickRepeater處理點擊事件 29111.11使用Ext.util.DelayedTask延時執行函數 29311.12使用Ext.util.TaskRunner執行循環任務 29411.13混合型集合Ext.util.MixedCollection 29511.14使用Ext.util.TextMetrices獲得文本所佔的高度和寬度 29911.15Ext.KeyNav處理導航按鍵 30011.16Ext.KeyMap為對象綁定按鍵功能 30211.17擴展 30411.17.1擴展Date 30411.17.2擴展String 30611.17.3擴展Function 30611.17.4擴展Number 30811.17.5擴展Array 30811.18Ext.ux.Portal 30911.19Ext.Desktop 31211.20本章小結 316第12章一個完整的EXT應用 31712.1確定整體布局 31712.2使用HTML和CSS設置靜態信息 31912.3對學生信息進行數據建模 32012.4在頁面中顯示學生信息列表 32412.5添加表單編輯學生信息 32912.6為表單添加提交事件 33212.7清空表單信息 33512.8刪除指定的學生信息 33612.9在Grid和Form之間進行數據交互 33712.10本章小結 338第13章通過Ext Framework合理地應用EXT 33913.1Ext Framework簡介 33913.2Ext Framework架構解析 34213.2.1主要的第三方包 34213.2.2後台類關系圖 34213.2.3前台組件關系圖 34413.3本章小結 347附錄A EXT常見問題 348附錄B EXT對AIR的支持 355附錄C EXT的版本變遷 364
㈡ 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
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)那樣有固定的代碼設計模式,而往往是不同的人就有不同的編程風格。在實際應用開發中,只有見多識廣,才能在自己的在腦中建立一個開發庫。
學習別人的示例對於我們開發幫助會非常大,示例包括基本組件的應用、綜合應用等多個方面。在此,簡單推薦幾個。
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 Ext.dd.DDProxy 層次
首先復申明java和extjs不是同一種語言,制他們類似處是都基於oo來設計。基於我對extjs了解,從語言設計的方面講有以下特點。
1.extjs架構於javascript之上(其本質區別是javascript是基於原型繼承,並具有閉包等動態語言的特性,這是java/c++不具備的),創建了對象組件和類的單繼承,更符合我們熟悉的靜態地面向對象語言的思維。
2.extjs具有類似mfc的類庫設計的層次結構,這讓我們可對其進行改造和擴充。
3.extjs類命名是基於命名空間的層次關系來的(就是你所指的包),具體可以參考extjs的類層次結構視圖,譬如ext本身就是最頂層的命名空間並不是一個類,就如你的問題ext.dd.ddproxy 其中ext.dd表明了命名空間的層次關系並不表示類,DDProxy才是一個類(如果帶上命名空間,類的全稱是ext.dd.DDproxy)
㈣ ExtJS Grid 搜索功能
大致思路,你參考下:
{
text: '搜索', iconCls:'icon-zoom',
handler: function(btn){ //點擊搜索時執行函數
var type= Ext.getCmp('combo_id').getValue(); //關鍵字類型
var value= Ext.getCmp('textfield_id').getValue(); //搜索值
var gridSearch = {keyType:type, searchStr:value}; //組合成一個對象去傳遞
var store = Ext.getCmp('grid_id').getStore(); //獲取grid的store
store.baseParams = {}; //綁定參數(在store訪問的那個路由中去接收並處理)
store.baseParams['gridSearch'] = Ext.encode(gridSearch);
store.lastOptions.params[store.paramNames.start] = 0;
store.removeAll();
store.commitChanges();
store.reload();
}
}
㈤ extjs 怎麼使用正則表達式
javascript本身支持復正則表達式,和制extjs沒有關系。
javascript中可以用反斜線將字元串括起來就表示一個正則表達式模式,例如
varregexp=/[0-9]{2,5}/;//regexp變數值就是一個正則模式,匹配2~5位數字
也可以用創建對象的標准語法來表示,例如:
varregexp=newRegExp("[0-9]{2,5}");//和上例等效
模式可以有附加參數(非必需),包括:
包含屬性 "g"、"i" 和 "m",分別用於指定全局匹配、區分大小寫的匹配和多行匹配。可以組合使用,例如「ig」。
例如:
varregexp=/[a-n]{3}/i;//忽略大小寫,匹配3個a到n的英文字母
//也可以寫成varregexp=newRegExp("[a-n]{3}","i")
js正則表達式有多個方法,常用的有exec、test、compile。
test() 方法檢索字元串中的指定值。返回值是 true 或 false。
exec() 方法檢索字元串中的指定值。返回值是被找到的值。如果沒有發現匹配,則返回 null。
compile() 方法用於改變 RegExp。
㈥ easyui和extjs哪個好
作為ExtJs和EasyUI都用得很熟練的一個老資格程序員,我發表一下我的看法。
首先兩個框架的組件都很豐富,商業應用都要收費。ExtJS的動態性和擴展性更好,從使用效果看,easyui的組件相對體驗更好一點。
ExtJS
優點:1.完全開源,我說的開源的意思並不是說不收費。
2.我非常贊賞它的架構設計,完全的面向對象的組件化設計。所有的組件都是從一些基礎的組件派生出來的,並且提供了overide,extend等擴展方式,可以說能夠任意擴展。可能一些半桶水的人覺得ExtJS很難用,那是因為他們只懂皮毛。
3.ExtJS的文檔和實例做得比EasyUI要好得多,基礎比較好的開發人員只用看官方的文檔、demo、適當參考源碼就能夠完成任何工作,遇到問題完全不用去網路或論壇問其他人。
4.可以完全動態開發,代碼都寫在JS文件里,不像ExtJS那樣非得在頁面放一個DOM元素。所以可以自己定製組件在任意頁面引用,復用性好。
缺點:1.可能太多人用,造成審美疲勞,反正我看膩了它的界面,自己定製界面主題有太難。
2.可能因為它太龐大,不像easyUI那樣基於頁面已有的HTML
DOM渲染,所以一般人覺得比較難(但是話有說會來,如果使用者的水平高的話,這其實也是也是它的優點。因為你要是在同一個界面點擊不同按鈕要動態顯示各種各樣不同的window、form等等的話,只要把這些JS引用到當前頁面就可以吧,見上述優點4)。
easyui
優點:
1.在頁面的DOM元素加一些屬性然後加幾行JS就可以動態構造出相應的組件。開發方式相對ExtJS直觀和簡潔一些。
2.組件相對體驗更好一點,界面好像跟干凈簡潔。
缺點:1.半開源,對於一個高手來說看不到源代碼是很痛苦的,事,因為他們總有這樣那樣的擴展需求。
2.一定要在頁面上放置相應的DOM元素才能渲染(如果不對dom元素設置隱藏的話,在頁面沒有渲染過程中會顯示一堆亂七八糟的東西)所以無法自己定製組件在其他頁面引用,要復用的話得搬磚一樣把JS和DOM都復制過來,遇到非常復雜的頁面那是相當雜亂和痛苦的。