ExtJs特點、優缺點及注意事項


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             打印
View Code

<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簡介


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM