|
1.什么是ExtJs?
ExtJS可以用來(lái)開(kāi)發(fā)RIA也即富客戶端的AJAX應(yīng)用，是一個(gè)用javascript寫(xiě)的,，主要用于創(chuàng)建前端用戶界面,，是一個(gè)與后臺(tái)技術(shù)無(wú)關(guān)的前端Ajax框架。因此,，可以把ExtJS用在.Net,、Java、Php等各種開(kāi)發(fā)語(yǔ)言開(kāi)發(fā)的應(yīng)用中,。
ExtJS的前身來(lái)自于YUI,，經(jīng)過(guò)不斷發(fā)展與改進(jìn)，現(xiàn)在已經(jīng)成為最完整與成熟的一套構(gòu)建RIA Web應(yīng)用的JavaScript基礎(chǔ)庫(kù),。利用ExtJS構(gòu)建的RIA Web應(yīng)用具有與桌面程序一樣的標(biāo)準(zhǔn)用戶界面與操作方式,，并且能夠橫跨不同的瀏覽器平臺(tái)。ExtJS已經(jīng)成為開(kāi)發(fā)具有完滿用戶體驗(yàn)的Web應(yīng)用完美選擇,。
ExtJs最開(kāi)始基于YUI技術(shù),，其UI組件模型和開(kāi)發(fā)理念脫胎、成型于Yahoo組件庫(kù)YUI和Java平臺(tái)上Swing兩者,，并為開(kāi)發(fā)者屏蔽了大量跨瀏覽器方面的處理,。相對(duì)來(lái)說(shuō)，EXT要比開(kāi)發(fā)者直接針對(duì)DOM,、W3C對(duì)象模型開(kāi)發(fā)UI組件輕松,。
2.ExtJs的特點(diǎn)
(1).純Html/CSS+JS技術(shù),重新定義表示層的耦合；
(2).基于純Html/CSS+JS技術(shù),，提供豐富的跨瀏覽器UI組件,，靈活采用JSON/XML數(shù)據(jù)源開(kāi)發(fā),，使得服務(wù)端表示層的負(fù)荷真正減輕,，從而達(dá)到客戶端的MVC應(yīng)用；
(3).集成多種JS底層庫(kù)， 滿足開(kāi)發(fā)者不同需求,；
(4).Ext初期僅是對(duì)YUI的對(duì)話框擴(kuò)展,，后來(lái)逐漸有了自己的特色，深受網(wǎng)友的喜愛(ài),。發(fā)展至今,，Ext除YUI外還支持Jquery Prototype等的JS庫(kù)，讓大家自由地選擇,；
(5).多瀏覽器支持,、支持多平臺(tái)下的主流瀏覽器。
3.ExtJs的優(yōu)缺點(diǎn)
(1).ExtJs的優(yōu)點(diǎn)
<1>.UI組件豐富,，外觀漂亮,。
Ext JS庫(kù)有著豐富且漂亮的UI組件，大大縮短了我們的開(kāi)發(fā)周期,，而且組件擁有漂亮的布局,，經(jīng)過(guò)簡(jiǎn)單的調(diào)用與配置就可以實(shí)現(xiàn)不錯(cuò)的界面布局。ExtJS提供的各種組件可以用更加標(biāo)準(zhǔn)的方式展示數(shù)據(jù)降低了開(kāi)發(fā)難度,。
<2>.瀏覽器兼容性好,。
使用ExtJS對(duì)瀏覽器沒(méi)有任何要求?？梢哉f(shuō)是一種綠色的富客戶端實(shí)現(xiàn)方式,，ExtJs基本可以運(yùn)行于現(xiàn)在主流的瀏覽器。
<3>.有很多動(dòng)畫(huà)效果做得很不錯(cuò),，提高了用戶的感知度,。
<4>.和后臺(tái)代碼無(wú)關(guān)。
不管后臺(tái)用什么語(yǔ)言開(kāi)發(fā)的都不會(huì)受影響,，不管你是用C#也好 JAVA也好 還是PHP都和它沒(méi)關(guān)系,。
<5>.將Web程序向桌面系統(tǒng)轉(zhuǎn)化。
ExtJS最大的優(yōu)勢(shì)在于它將Web應(yīng)用程序的操作方式向傳統(tǒng)桌面應(yīng)用程序的操作方式進(jìn)行轉(zhuǎn)化甚至消除了這種差異,，從根本上提高了用戶的使用體驗(yàn),，這是ExtJS應(yīng)用前景廣闊的主要原因。
<6>.相對(duì)豐富的文檔和示例,。
毫無(wú)疑問(wèn),，剛剛接觸到ExtJS的人多數(shù)都是被它附帶的例子和開(kāi)發(fā)文檔吸引過(guò)去的，它的文檔做的確實(shí)不錯(cuò),。
(2).ExtJs的缺點(diǎn)
<1>.體積較大,，速度稍慢。
由于使用了大量的UI組件,，所以體積較大,，導(dǎo)致頁(yè)面加載速度比較慢,。
<2>.收費(fèi),好像不免費(fèi),。
因?yàn)樗珒?yōu)秀了,，所以從Ext JS 2.0以后的版本都是收費(fèi)的。也許這一點(diǎn)不能算是它的缺點(diǎn),，但這確實(shí)阻礙了它的推廣與應(yīng)用,。
<3>.沒(méi)有合適的開(kāi)發(fā)利器。
毫無(wú)疑問(wèn),，一個(gè)好的開(kāi)發(fā)工具可以大大的提高編碼的速度,，但是對(duì)于ExtJS，始終沒(méi)有一個(gè)完美的開(kāi)發(fā)工具,，可以推薦的有Aptana Studio,， Spket IDE，和Spket 提供的提示文件,，但是都是各有優(yōu)缺點(diǎn),，都不完美，只能一邊看SDK一邊寫(xiě)代碼,。
<4>.沒(méi)有界面設(shè)計(jì)工具,。
雖然有人提供了一個(gè)在線的界面設(shè)計(jì)工具，但是和Visual Studio提供的ASP.Net設(shè)計(jì)工具來(lái)說(shuō),，真的可以說(shuō)是天壤之別,。因此，只能一邊預(yù)覽,，一邊寫(xiě)代碼,。
<5>.文檔不全。
雖然ExtJS提供的文檔很豐富,，但是還是跟不上源代碼的更新速度,，所以，經(jīng)常要通過(guò)看源代碼,，調(diào)試才能真正解決問(wèn)題,。
<6>.不能編譯。
這一點(diǎn)可以說(shuō)是JavaScript的缺點(diǎn)（如果能編譯,，就不叫JavaScript了）,，在實(shí)際的開(kāi)發(fā)中，經(jīng)常會(huì)敲錯(cuò)一些代碼,，比如大小寫(xiě)錯(cuò)誤等,，不能通過(guò)編譯得到反饋，只能在運(yùn)行時(shí)排錯(cuò),，導(dǎo)致開(kāi)發(fā)的效率比較低下,。
4.ExtJs注意事項(xiàng)
(1).盡量使用ExtJS的方言,。
ExtJS提供了很多有用的方法，解決客戶端JavaScript常見(jiàn)的開(kāi)發(fā)任務(wù),，常見(jiàn)的有查詢HTMLDom,，創(chuàng)建HTML元素,，為HTML元素注冊(cè)事件響應(yīng)函數(shù)等,，這些大可以全部使用ExtJS提供的方法，使自己代碼構(gòu)建與ExtJS之上,，舉幾個(gè)例子：
查詢ID為container的DIV下所有的checkbox,，可以使用：Ext.fly(‘container’).select(‘input[type=checkbox]’);
在ID為container的DIV內(nèi)創(chuàng)建一個(gè)按鈕，可以使用：Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});
為ID為container的DIV的click事件注冊(cè)處理函數(shù),，使用：Ext.fly(‘container’).on(‘click’, handlerFn, scope);
(2).自定義事件比較好,。
ExtJS的自定義事件很好用，可以實(shí)現(xiàn)一對(duì)多的通知,，而且任何自定義事件都可以中途停止,，只要有一個(gè)處理函數(shù)返回false。
(3).Store合并為一個(gè)文件,。
用ExtJS顯示數(shù)據(jù),，自然就需要用到Ext.data.Store及其派生出來(lái)的類，可以考慮所有的Store合并到一個(gè)文件,，這樣對(duì)重用有很大的幫助,。
(4).腳本文件管理。
盡可能的每個(gè)模塊做成一個(gè)類,，一個(gè)類一個(gè)文件,，類似與Java或C# 的文件處理方法，每個(gè)文件注明其作用,，依賴的文件等,，如果太多的話可以考慮寫(xiě)一個(gè)配置文件，通過(guò)讀配置文件來(lái)輸出腳本到客戶端,。
(5).調(diào)試和部署注意,。
調(diào)試和部署分別加載Debug和Release版本的腳本 ExtJS附帶的例子中沒(méi)有使用完整Debug版本的例子，所以很多人找不到完整的Debug版本的引用順序,，通過(guò)對(duì)Source文件夾下的ext.jsb文件進(jìn)行分析,，就可以得到正確的加載順序，如下：
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).對(duì)Script進(jìn)行壓縮,。
對(duì)項(xiàng)目中有大量的JavaScript的話,，對(duì)其進(jìn)行壓縮是很有必要的，這里我推薦的是ExtJS的論壇提供的JS Builder,，可以通過(guò)配置文件來(lái)對(duì)Script和CSS進(jìn)行壓縮,，據(jù)說(shuō)ExtJS就是用這個(gè)工具進(jìn)行壓縮的,，不過(guò)有一個(gè)缺點(diǎn)，就是不支持UTF-8編碼,。
5.ExtJS組件體系圖
6.Ext JS API接口文檔
<1>.以下是所有工具欄可用按鈕名稱字符串
View Code <2>.以下是所有的布局字符串和類的對(duì)應(yīng)關(guān)系,，所有的布局類均繼承自 Ext.layout.ContainerLayout類
字符串 類 中文名稱
------------- ------------------ ------------------
absolute Ext.layout.absolute 絕對(duì)定位
accordion Ext.layout.Accordion 手風(fēng)琴式
anchor Ext.layout.AnchorLayout 錨定
(新)auto Ext.layout.auto 自動(dòng)
border Ext.layout.BorderLayout 邊界式
card Ext.layout.CardLayout 卡片式
column Ext.layout.ColumnLayout 列式
fit Ext.layout.FitLayout 自適應(yīng)
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'和類的對(duì)應(yīng)關(guān)系
 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 (過(guò)時(shí)的；使用 button)
tbfill Ext.Toolbar.Fill
tbitem Ext.Toolbar.Item
tbseparator Ext.Toolbar.Separator
tbspacer Ext.Toolbar.Spacer
tbsplit Ext.Toolbar.SplitButton (過(guò)時(shí)的,；使用 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 (過(guò)時(shí)的,；使用 arraystore)
store Ext.data.Store
xmlstore Ext.data.XmlStore
參考博客：
《ExtJS》
《ExtJS 開(kāi)發(fā)總結(jié)》
《Ext JS（1）Ext JS簡(jiǎn)介》
|
