1.什么是ExtJs?
ExtJS可以用來開發RIA也即富客戶端的AJAX應用,是一個用javascript寫的,主要用於創建前端用戶界面,是一個與后台技術無關的前端Ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各種開發語言開發的應用中。
ExtJS的前身來自於YUI,經過不斷發展與改進,現在已經成為最完整與成熟的一套構建RIA Web應用的JavaScript基礎庫。利用ExtJS構建的RIA Web應用具有與桌面程序一樣的標准用戶界面與操作方式,並且能夠橫跨不同的瀏覽器平台。ExtJS已經成為開發具有完滿用戶體驗的Web應用完美選擇。
ExtJs最開始基於YUI技術,其UI組件模型和開發理念脫胎、成型於Yahoo組件庫YUI和Java平台上Swing兩者,並為開發者屏蔽了大量跨瀏覽器方面的處理。相對來說,EXT要比開發者直接針對DOM、W3C對象模型開發UI組件輕松。
2.ExtJs的特點
(1).純Html/CSS+JS技術,重新定義表示層的耦合;
(2).基於純Html/CSS+JS技術,提供豐富的跨瀏覽器UI組件,靈活采用JSON/XML數據源開發,使得服務端表示層的負荷真正減輕,從而達到客戶端的MVC應用;
(3).集成多種JS底層庫, 滿足開發者不同需求;
(4).Ext初期僅是對YUI的對話框擴展,后來逐漸有了自己的特色,深受網友的喜愛。發展至今,Ext除YUI外還支持Jquery Prototype等的JS庫,讓大家自由地選擇;
(5).多瀏覽器支持、支持多平台下的主流瀏覽器。
3.ExtJs的優缺點
(1).ExtJs的優點
<1>.UI組件豐富,外觀漂亮。
Ext JS庫有着豐富且漂亮的UI組件,大大縮短了我們的開發周期,而且組件擁有漂亮的布局,經過簡單的調用與配置就可以實現不錯的界面布局。ExtJS提供的各種組件可以用更加標准的方式展示數據降低了開發難度。
<2>.瀏覽器兼容性好。
使用ExtJS對瀏覽器沒有任何要求。可以說是一種綠色的富客戶端實現方式,ExtJs基本可以運行於現在主流的瀏覽器。
<3>.有很多動畫效果做得很不錯,提高了用戶的感知度。
<4>.和后台代碼無關。
不管后台用什么語言開發的都不會受影響,不管你是用C#也好 JAVA也好 還是PHP都和它沒關系。
<5>.將Web程序向桌面系統轉化。
ExtJS最大的優勢在於它將Web應用程序的操作方式向傳統桌面應用程序的操作方式進行轉化甚至消除了這種差異,從根本上提高了用戶的使用體驗,這是ExtJS應用前景廣闊的主要原因。
<6>.相對豐富的文檔和示例。
毫無疑問,剛剛接觸到ExtJS的人多數都是被它附帶的例子和開發文檔吸引過去的,它的文檔做的確實不錯。
(2).ExtJs的缺點
<1>.體積較大,速度稍慢。
由於使用了大量的UI組件,所以體積較大,導致頁面加載速度比較慢。
<2>.收費,好像不免費。
因為它太優秀了,所以從Ext JS 2.0以后的版本都是收費的。也許這一點不能算是它的缺點,但這確實阻礙了它的推廣與應用。
<3>.沒有合適的開發利器。
毫無疑問,一個好的開發工具可以大大的提高編碼的速度,但是對於ExtJS,始終沒有一個完美的開發工具,可以推薦的有Aptana Studio, Spket IDE,和Spket 提供的提示文件,但是都是各有優缺點,都不完美,只能一邊看SDK一邊寫代碼。
<4>.沒有界面設計工具。
雖然有人提供了一個在線的界面設計工具,但是和Visual Studio提供的ASP.Net設計工具來說,真的可以說是天壤之別。因此,只能一邊預覽,一邊寫代碼。
<5>.文檔不全。
雖然ExtJS提供的文檔很豐富,但是還是跟不上源代碼的更新速度,所以,經常要通過看源代碼,調試才能真正解決問題。
<6>.不能編譯。
這一點可以說是JavaScript的缺點(如果能編譯,就不叫JavaScript了),在實際的開發中,經常會敲錯一些代碼,比如大小寫錯誤等,不能通過編譯得到反饋,只能在運行時排錯,導致開發的效率比較低下。
4.ExtJs注意事項
(1).盡量使用ExtJS的方言。
ExtJS提供了很多有用的方法,解決客戶端JavaScript常見的開發任務,常見的有查詢HTMLDom,創建HTML元素,為HTML元素注冊事件響應函數等,這些大可以全部使用ExtJS提供的方法,使自己代碼構建與ExtJS之上,舉幾個例子:
查詢ID為container的DIV下所有的checkbox,可以使用:Ext.fly(‘container’).select(‘input[type=checkbox]’);
在ID為container的DIV內創建一個按鈕,可以使用:Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});
為ID為container的DIV的click事件注冊處理函數,使用:Ext.fly(‘container’).on(‘click’, handlerFn, scope);
(2).自定義事件比較好。
ExtJS的自定義事件很好用,可以實現一對多的通知,而且任何自定義事件都可以中途停止,只要有一個處理函數返回false。
(3).Store合並為一個文件。
用ExtJS顯示數據,自然就需要用到Ext.data.Store及其派生出來的類,可以考慮所有的Store合並到一個文件,這樣對重用有很大的幫助。
(4).腳本文件管理。
盡可能的每個模塊做成一個類,一個類一個文件,類似與Java或C# 的文件處理方法,每個文件注明其作用,依賴的文件等,如果太多的話可以考慮寫一個配置文件,通過讀配置文件來輸出腳本到客戶端。
(5).調試和部署注意。
調試和部署分別加載Debug和Release版本的腳本 ExtJS附帶的例子中沒有使用完整Debug版本的例子,所以很多人找不到完整的Debug版本的引用順序,通過對Source文件夾下的ext.jsb文件進行分析,就可以得到正確的加載順序,如下:
Debug
/ext-path/source/core/ext.js
/ext-path/source/adapter/ext-base.js
/ext-path/ext-all-debug.js
Release
/ext-path/adapter/ext/ext-base.js
/ext-path/ext-all.js
(6).對Script進行壓縮。
對項目中有大量的JavaScript的話,對其進行壓縮是很有必要的,這里我推薦的是ExtJS的論壇提供的JS Builder,可以通過配置文件來對Script和CSS進行壓縮,據說ExtJS就是用這個工具進行壓縮的,不過有一個缺點,就是不支持UTF-8編碼。
5.ExtJS組件體系圖
6.Ext JS API接口文檔
<1>.以下是所有工具欄可用按鈕名稱字符串

字符串 中文名稱
------------- ------------------
toggle 收縮/展開
close 關閉
minimize 最小化
maximize 最大化
restore 重置
gear 自適應
pin 固定
unpin 解除固定
right 向右
left 向左
up 向上
down 向下
refresh 刷新
minus 縮小
plus 放大
help 幫助
search 搜索
save 保存
print 打印
<2>.以下是所有的布局字符串和類的對應關系,所有的布局類均繼承自 Ext.layout.ContainerLayout類
字符串 類 中文名稱
------------- ------------------ ------------------
absolute Ext.layout.absolute 絕對定位
accordion Ext.layout.Accordion 手風琴式
anchor Ext.layout.AnchorLayout 錨定
(新)auto Ext.layout.auto 自動
border Ext.layout.BorderLayout 邊界式
card Ext.layout.CardLayout 卡片式
column Ext.layout.ColumnLayout 列式
fit Ext.layout.FitLayout 自適應
form Ext.layout.FormLayout 表單式
(新)hbox Ext.layout.hbox 水平
(新)menu Ext.layout.menu 菜單式
table Ext.layout.TableLayout 表格式
(新)toolbar Ext.layout.toolbar 工具條式
(新)vbox Ext.layout.vbox 垂直
<3>.以下是所有的'xtype'和類的對應關系
xtype Class
------------- ------------------
box Ext.BoxComponent
button Ext.Button
buttongroup Ext.ButtonGroup
colorpalette Ext.ColorPalette
component Ext.Component
container Ext.Container
cycle Ext.CycleButton
dataview Ext.DataView
datepicker Ext.DatePicker
editor Ext.Editor
editorgrid Ext.grid.EditorGridPanel
flash Ext.FlashComponent
grid Ext.grid.GridPanel
listview Ext.ListView
panel Ext.Panel
progress Ext.ProgressBar
propertygrid Ext.grid.PropertyGrid
slider Ext.Slider
spacer Ext.Spacer
splitbutton Ext.SplitButton
tabpanel Ext.TabPanel
treepanel Ext.tree.TreePanel
viewport Ext.ViewPort
window Ext.Window
Toolbar components
---------------------------------------
paging Ext.PagingToolbar
toolbar Ext.Toolbar
tbbutton Ext.Toolbar.Button (過時的;使用 button)
tbfill Ext.Toolbar.Fill
tbitem Ext.Toolbar.Item
tbseparator Ext.Toolbar.Separator
tbspacer Ext.Toolbar.Spacer
tbsplit Ext.Toolbar.SplitButton (過時的;使用 splitbutton)
tbtext Ext.Toolbar.TextItem
Menu components
---------------------------------------
menu Ext.menu.Menu
colormenu Ext.menu.ColorMenu
datemenu Ext.menu.DateMenu
menubaseitem Ext.menu.BaseItem
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.TextItem
Form components
---------------------------------------
form Ext.form.FormPanel
checkbox Ext.form.Checkbox
checkboxgroup Ext.form.CheckboxGroup
combo Ext.form.ComboBox
datefield Ext.form.DateField
displayfield Ext.form.DisplayField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
Chart components
---------------------------------------
chart Ext.chart.Chart
barchart Ext.chart.BarChart
cartesianchart Ext.chart.CartesianChart
columnchart Ext.chart.ColumnChart
linechart Ext.chart.LineChart
piechart Ext.chart.PieChart
Store xtypes
---------------------------------------
arraystore Ext.data.ArrayStore
directstore Ext.data.DirectStore
groupingstore Ext.data.GroupingStore
jsonstore Ext.data.JsonStore
simplestore Ext.data.SimpleStore (過時的;使用 arraystore)
store Ext.data.Store
xmlstore Ext.data.XmlStore
參考博客:
《ExtJS》
《ExtJS 開發總結》
《Ext JS(1)Ext JS簡介》