ExtJS與.NET結(jié)合開發(fā)實(shí)例

1、基礎(chǔ)篇第一篇,本節(jié)主要向大家介紹Ext的最基礎(chǔ)的話題ExtJS是一個Ajax框架，是一個用javascript寫的，用于在客戶端創(chuàng)建豐富多彩的web應(yīng)用程序界面。ExtJS可以用來開發(fā)RIA也即富客戶端的AJAX應(yīng)用 ExtJS是一個用javascript寫的，主要用于創(chuàng)建前端用戶界面，是一個與后臺技術(shù)無關(guān)的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各種開發(fā)語言開發(fā)的應(yīng)用中。 ExtJs最開始基于YUI技術(shù)，由開發(fā)人員Jack Slocum開發(fā)，通過參考Java Swing等機(jī)制來組織可視化組件，無論從UI界面上CSS樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一

2、款不可多得的JavaScript客戶端技術(shù)的精品。朋友問我,Ext怎么學(xué)習(xí),我記得自己學(xué)的時候純純因?yàn)樗暮唵魏鸵曈X效果特別好,因?yàn)橄矚g了才有努力的堅(jiān)持不懈的激情.有朋友說能否寫點(diǎn)簡單的示例方便入門,我是覺得自己寫的都是很淺陋東西,實(shí)在不知道怎么簡單了,昨天晚上想了許久,覺得自己還是無比的粗淺,但依然有人說看不懂,我想可能是言語沒有說清楚,或者你在等到天上掉餡餅吧.因?yàn)?我覺得開始學(xué)習(xí)就是不斷的模仿,只要知道它的大致概念,在自己的項(xiàng)目中不斷的接觸,一天一天就會成長起來,建議最好根據(jù)自己的學(xué)習(xí)進(jìn)度寫個小網(wǎng)站,將所學(xué)的知識融會貫通一下,就像我寫了好幾個Ext的網(wǎng)站,雖然暫時都沒有發(fā)布出去,但自己經(jīng)

3、?？纯匆彩菍ψ约旱墓ぷ鞯募畎?接下來一段日子,盡量寫一些Ext2.2所有的對象的最簡單的用法.如果能夠堅(jiān)持,以后會寫一個對應(yīng)的提高系列.下面就開始Ext之旅吧Ext是什么?答曰:Ext是一個用jscript(javascript)所寫的一個ajax框架(我想大家都知道什么是ajax了吧,假想你已經(jīng)知道,那我就不說了).而javascript也是更知道它的概念了,就更不用說了吧,好,那就也不說了.什么是Ext呢,結(jié)合javascript和ajax,我想你閉眼猜都能夠猜出它的功能了吧.那就用自己的語言說下什么是Ext吧,呵呵,思考真的很重要的.學(xué)習(xí)的重要環(huán)節(jié)就是要不斷的自己總結(jié),總結(jié)就來自自己的

4、思考.Ext有多好呢?答曰:仁者見仁, HYPERLINK /deploy/dev/examples/samples.html t _blank 官方應(yīng)用示例自己好好看看吧,它的絢麗多姿是無法用語言描述的,你可能會很驚嘆,但我還要告訴你,這個 HYPERLINK /deploy/dev/examples/samples.html t _blank 官方應(yīng)用示例并沒有把Ext的所有的功能都羅列出來,僅僅是一部分,有更多的有太多的等你去發(fā)現(xiàn),星哥說了:太陽已經(jīng)落山了,時間不等人滴.Ext難嗎?答曰:太多的人問這個問題,就像我開始學(xué)習(xí)java一樣,我問了好多好多人,都說難,讓我學(xué)習(xí)的信心到最后都剩的

5、沒有一點(diǎn)兒了,于是學(xué)了當(dāng)時身邊誰也不懂的.呵呵.如果有人問我這個問題,我告訴你,真的很簡單,不是說我會了才這么說,其實(shí),我想說的是:大家玩游戲基本上都是無師自通的吧,現(xiàn)在明白了吧,如果你有玩游戲的那份精神和斗志,靠,天下事難難難者亦易易易也.在哪里下載Ext呢?答曰:好,你能夠這么問,看來我做說客還是可以的(信心指數(shù)又增加了),因?yàn)槲沂菑?.0版本,2.1版本,到現(xiàn)在的2.2版本,我真的說不出來他們到底有何具體的差別,但明顯的看見它明顯壯大了,不僅僅是體積,更是它的力量. HYPERLINK /products/extjs/download.php t _blank 下載地址 官方的版本,有各

6、個版本的,我建議學(xué)習(xí)最新的吧.Ext有核心嗎?答曰:看來只有我才能夠問這個問題呀,當(dāng)年比干無心而死,看來框架也是一樣的,沒有核心怎么可以呢.我想在javascript中大家也都知道什么是類了吧,簡單的說就是一個函數(shù)就是一個類,類里面還可以有很多的類,可以無限嵌套.而Ext就是有很多的類庫組成,也就是有很多的函數(shù)組成,只是現(xiàn)在天上飛的水里游的都成了對象了,所以很多技術(shù)也都用對象的語言來描述.Ext就是主要有哪些類庫組成呢?有人說肯定有API層,是的,有的,有些人總是喜歡稱底層是API(API是什么意思,全稱Application Programming Interface 應(yīng)用編程接口),喜歡就

7、喜歡吧,我管不著.但Ext說了,要改變這樣的稱呼,于是Ext稱之為Core,為什么呢?因?yàn)镋xt的底層在Core這個文件夾里面.core是什么意思呢?corekC:n.果核, 中心, 核心,我覺得稱底層為Core確實(shí)不錯,而且大寫的CORE還有一個意思:CORE=Congress of Racial Equality 爭取種族平等大會.感覺Ext的作者Jack Slocum是具有很濃烈的浪漫主義情懷的追求完美的一個程序員.說到Core了:core對Ext的DoM操作,事件處理以及所有的直接在頁面上可以展示的和不可以展示的組件等提供了基礎(chǔ)的功能.剛剛提到可顯示的控件也叫組件,我們在程序中可以直接

8、通過這些控件來實(shí)現(xiàn)非常友好,并且交互性也很好的應(yīng)用.特別一提的是在那些不可見的組件中,有一個utils類,該類提供了很多的很實(shí)用的功能,可以方便實(shí)現(xiàn)對接收和發(fā)送的數(shù)據(jù)進(jìn)行各種操作,實(shí)在是Ext框架不可或缺的一部分.如何介紹Ext的組件呢?答曰:這個問題我確實(shí)想了很長時間,因?yàn)橄窈芏嘬浖膸椭坛桃粯?它們總是把該軟件的所有功能都羅列出來,然后再逐個詳解,甚至很多功能可能你都從來都不需要,但你并不知道自己是否需要,就像最近在學(xué)習(xí)flash,總感到自己有茫然不知所措的感覺,學(xué)習(xí)的態(tài)度都會轉(zhuǎn)變.但,也不能夠說人家的幫助教程不好呀,畢竟是追求完整性和可用性方面,每個人的見解并不一樣. 好吧,我下定決心

9、了.先簡單把組件說下,然后對這些組件再詳細(xì)解說加示例,而且每個示例都追求可用和簡單,將來再寫一個深入的就能夠達(dá)到完整性,倒不是說一定要追求完整,而是,如果你僅僅寫了入門,卻沒有提高的版本,感覺自己并沒有把事情做好做完整,畢竟人人都希望有始有終呀.畢竟自己還想早點(diǎn)介紹點(diǎn)關(guān)于Flex的故事呢,唉,總是沒有時間.Ext的組件有哪些呢?答曰:Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType a

10、nd isXType. 下面就是這些可以使用了控件的列表了,我直接從它的幫助文檔復(fù)制過來,并同時加上了它的英文原文,因?yàn)槊看慰吹竭@段我總是能夠想起什么,呵呵:Ext組件主要包括一些常用組件,如表單組件,數(shù)據(jù)組件,導(dǎo)航組件,相信大家看名稱就知道什么意思了.xtype Class基本組件box Ext.BoxComponentbutton Ext.Buttoncolorpalette Ext.ColorPalettecomponent Ext.Componentcontainer Ext.Containercycle Ext.CycleButtondataview Ext.DataViewdate

11、picker Ext.DatePickereditor Ext.Editoreditorgrid Ext.grid.EditorGridPanelgrid Ext.grid.GridPanelpaging Ext.PagingToolbarpanel Ext.Panelprogress Ext.ProgressBarpropertygrid Ext.grid.PropertyGridslider Ext.Slidersplitbutton Ext.SplitButtonstatusbar Ext.StatusBartabpanel Ext.TabPaneltreepanel Ext.tree.

12、TreePanelviewport Ext.Viewportwindow Ext.Window導(dǎo)航組件toolbar Ext.Toolbartbbutton Ext.Toolbar.Buttontbfill Ext.Toolbar.Filltbitem Ext.Toolbar.Itemtbseparator Ext.Toolbar.Separatortbspacer Ext.Toolbar.Spacertbsplit Ext.Toolbar.SplitButtontbtext Ext.Toolbar.TextItem窗體組件form Ext.FormPanelcheckbox Ext.form

13、.Checkboxcombo Ext.form.ComboBoxdatefield Ext.form.DateFieldfield Ext.form.Fieldfieldset Ext.form.FieldSethidden Ext.form.Hiddenhtmleditor Ext.form.HtmlEditorlabel Ext.form.Labelnumberfield Ext.form.NumberFieldradio Ext.form.Radiotextarea Ext.form.TextAreatextfield Ext.form.TextFieldtimefield Ext.fo

14、rm.TimeFieldtrigger Ext.form.TriggerFieldExt的每個組件都是有一個指定的Xtype屬性值,通過該值就可以得到該組件的類型,同時也可以根據(jù)該組件來定義一個組件 例如:xtype:button,id:btnEnter,text:確定 /這就是定義了一個按鈕的組件.xtype:field,id:txtName /這就是定義了一個輸入框的組件.xtype:field,id:txtPwd,inputType:password /這就是定義了一個密碼框的組件.當(dāng)然你可以不用xtype 比如:var btnEnter = new Ext.Button(id:btnE

15、nter,text:確定 );/這就是定義了一個按鈕的組件.var txtName = new Ext.form.Textfield(id:txtName );/這就是定義了一個輸入框的組件.var txtPwd = new Ext.form.Textfield(id:txtPwd,inputType:password );/這就是定義了一個密碼框的組件.是不是很簡單,在下面會解說具體的示例,包括它的基本的語法結(jié)構(gòu),同時,你需要明確,這和你在javascript里面的用法不會有不同的地方,只是有些方法Ext已經(jīng)給我們封裝好了,我們只要有拿來主義的精神就可以.特別一說的是:Ext的一些很實(shí)用的類

16、都是全局的,無須new了,直接用就可以.在下節(jié)會介紹一些Ext的很好的很實(shí)用的也很簡單就能夠使用的Util類. HYPERLINK /mogen_yin/archive/2008/10/23/1317940.html 第二篇,精美的Ext式樣的消息框精美的消息框截圖了 感覺就像寫書一樣,好難,不過我有玩游戲的精神,難亦易也.如果你看到了上文,那么我想你手上現(xiàn)在應(yīng)該有Ext2.2的文件了吧.這里再說一次,所有的程序除非有說明,則全部是以2008 c#.net為前提,雖然Ext不在乎你使用什么語言,但我只會.net.好,首先建立一個新的網(wǎng)站吧,然后把你下載的Ext2.2文件復(fù)制到網(wǎng)站的任何一個目錄

17、里面,在頁面設(shè)置正確的路徑即可.如下圖所示:需要說明一點(diǎn)，以后所有的程序都不再羅列整個頁面，只寫出之間的語句 無標(biāo)題頁 /下面是整個Ext框架所必備的文件,除了中文映射老外不需要外 /樣式文件 /中文映射 /定義一個函數(shù)，在里面定義一個彈出按鈕,當(dāng)網(wǎng)頁上出現(xiàn)彈出按鈕后,點(diǎn)擊就會出現(xiàn)hello世界了. function ready() / 下面openMs就是出發(fā)事件后所執(zhí)行的函數(shù)var openMsg = function() /alert(good);比較下ext的彈出消息框是多么多么的令人狂喜 Ext.Msg.alert(提示消息，可以自定義,hello世界-hello世界-hello世界

18、-hello世界); ; /定義Ext的按鈕 var 彈出按鈕 = new Ext.Button ( id:btnOpen, /定義按鈕的ID text:彈出按鈕, /定義按鈕的標(biāo)題 handler:openMsg,/定義按鈕出發(fā)的事件，handler后面直接寫函數(shù)的名稱openMsg /也可以寫成下面這樣，本質(zhì)是一樣的，效果也是一樣的 /handler:function()Ext.Msg.alert(提示消息，可以自定義,hello世界-hello世界-hello世界-hello世界); , renderTo:document.body/將彈出按鈕渲染到窗體上 ); Ext.onReady(

19、ready);/里面的參數(shù)就是上面定義的函數(shù) /onReady是使用Ext的入口,只有在上面所說的Ext框架全部加載完成后,才會執(zhí)行Ext.onReady里面所包含的函數(shù)，就是說具體執(zhí)行什么函數(shù)，由Ext的onReady方法指定/當(dāng)然onReady這個Ext方法總共有三個參數(shù)，為了力求簡單，這里先使用一個參數(shù)，在提高篇里面則會詳細(xì)講解 上面是一個完整的網(wǎng)頁,路徑正確后,就可以直接在頁面顯示出來精美的消息框截圖了 另外，提一句，Ext的所有消息框都封裝在Ext.Msg類里面 HYPERLINK /mogen_yin/archive/2008/10/23/1318011.html 第三篇,常用的一

20、些Ext方法在開始編寫每個Ext的組件用法之前，先對自己在工作中常用的一些Ext方法總結(jié)出來只羅列一些經(jīng)常用到的，偶爾也會用到的僅僅說明下Ext框架把一些我們平時在工作經(jīng)常遇到的情況封裝成了方法，有興趣的朋友讀讀它的源代碼，會發(fā)現(xiàn)里面封裝的語句和我們平時寫的沒有什么區(qū)別提一句，它的源代碼讀起來真的是一種享受，雖然有很多地方我還看不懂，但，我覺得它的源代碼確實(shí)是學(xué)習(xí)javascript的最好的教程ext-all-debug.js和ext-core-debug.js這兩個文件是調(diào)試文件，非常清晰，假如我有個月的時間休假，我是愿意把時間全部花在上面的第一想說的方法想來想去，覺得還是再說一次Ext類的

21、onReady()方法吧，它的作用就是指定當(dāng)Ext類的全部框架全部加載完成后執(zhí)行什么函數(shù)具體執(zhí)行什么函數(shù)就是它的參數(shù)第一：Ext.getCmp(對象ID):該方法只有一個參數(shù)，就是組件的 ID說明：在執(zhí)行下面的語句后，點(diǎn)擊確定會彈出定義的Ext按鈕的一些屬性值，同時將原來的值由確定更改為取消 function ready() /這個函數(shù)的主要作用有兩個： /一個獲取定義的buttonName按鈕。有消息彈出結(jié)果 /另一個就是將buttonName按鈕值由確定更改為取消 var setText = function() /通過getCmp方法獲取指定參數(shù)的對象，參數(shù)的值是某個已經(jīng)在頁面中初始化的

22、Ext對象的ID /getCmp()方法只有一個參數(shù)，就是組件的 ID var btn = Ext.getCmp(buttomID); /獲取按鈕ID var id = btn.id; /獲取按鈕文本 var text = btn.text; /獲取按鈕類型 var type = btn.type; var result = 執(zhí)行結(jié)果是：ID=+id+ text=+text+ type=+type; Ext.Msg.alert(提示消息,result); /setText是將按鈕的文本重新設(shè)置為新的文本“取消” Ext.getCmp(buttomID).setText(取消); ; /定義一個

23、按鈕 出發(fā)事件后執(zhí)行函數(shù)setText var buttonName = new Ext.Button ( id:buttomID, text:確定, renderTo:document.body, handler:setText ); Ext.onReady(ready); /第二: Ext.getBody();/該方法等同于document.body 呵呵 不用說了吧/以上是我經(jīng)常使用的2個方法,其他還有很多,我都不喜歡用,像:Ext.get(一個參數(shù));Ext.getDom(一個參數(shù));Ext.getDoc(不帶參數(shù));就不一一介紹了 HYPERLINK /mogen_yin/archi

24、ve/2008/10/24/1318520.html 第四篇,Ext中有兩個很重要的方法,一個是decode;一個是encode.在述說這個例子之前，我假想你已經(jīng)知道什么是Json數(shù)據(jù)了，那么在這里在溫習(xí)一下吧:JSON(JavaScript Object Notation) 是一種數(shù)據(jù)交換格式，采用完全獨(dú)立于語言的文本格式；JSON建構(gòu)于兩種結(jié)構(gòu)：“名稱/值”對的集合和值的有序列表下面詳細(xì)說明下：“名稱/值”對的集合（A collection of name/value pairs）。不同的語言中，它被理解為對象（object），紀(jì)錄（record），結(jié)構(gòu)（struct），字典（dictio

25、nary），哈希表（hash table），有鍵列表（keyed list），或者關(guān)聯(lián)數(shù)組 （associative array）。 值的有序列表（An ordered list of values）。在大部分語言中，它被理解為數(shù)組（array）。 JSON具有以下這些形式： 對象是一個無序的“名稱/值對”集合。一個對象以“”（左括號）開始，“”（右括號）結(jié)束。每個“名稱”后跟一個“:”（冒號）；“名稱/值 對”之間使用“,”（逗號）分隔。 數(shù)組是值（value）的有序集合。一個數(shù)組以“”（左中括號）開始，“”（右中括號）結(jié)束。值之間使用“,”（逗號）分隔。 值（value）可以是雙引號括起來

26、的字符串（string）、數(shù)值(number)、 ture、false、 null、對象（object）或者數(shù)組（array）。這些結(jié)構(gòu)可以嵌套。 字符串（string）是由雙引號包圍的任意數(shù)量Unicode字符的集合，使用反斜線轉(zhuǎn)義。一個字符（character）即一個單獨(dú)的字符串（character string）。 空白可以加入到任何符號之間以下來自百度的最新報告下面介紹Ext中兩個很重要的方法，其實(shí)，Ext中沒有多余的方法，每個方法都能夠恰當(dāng)好處的發(fā)揮它的作用,這里指它很重要，是因?yàn)樗鼈兲Ｓ昧?尤其是在與數(shù)據(jù)庫交換數(shù)據(jù)的時候Ext中有兩個很重要的方法,一個是decode;一個是enc

27、ode.顧名思義,一個是編碼,一個是解碼,你難道真的這么想嗎?嚴(yán)格的說,一個是將json字符串轉(zhuǎn)換成對象;一個是將對象轉(zhuǎn)換成json字符串下面這個示例主要介紹的是Ext.decode()和Ext.encode()的用法，其中使用到了json格式的串，首先是用到了Ext.decode()方法，將json格式的串轉(zhuǎn)換成對象，然后通過對象訪問對象所包含的各個屬性的值，通過消息框把它們顯示出來；之后在用Ext.encode()將已經(jīng)生成的對象轉(zhuǎn)換成開始定義的json格式的串，也通過消息框把它們顯示出來，加了一個函數(shù)，使得在第一個消息框彈出3秒鐘后再彈出第二個消息框用圖片說明吧/下面是將json字符串轉(zhuǎn)

28、換成對象后,通過對象訪問屬性生成的消息框 /下面是將上面生成的對象又轉(zhuǎn)換成json字符串后生成的消息框 具體看下示例吧 測試Ext.decode()和Ext.encode()方法 function ready() /再用一個示例說明下如何使用decode和encode，現(xiàn)在我們已經(jīng)知道什么是json數(shù)據(jù)格式了，也知道它的作用和語法了 /現(xiàn)在我們就開始演練吧 /先使用decode方法，這個方法是將json字符串轉(zhuǎn)換成對象的 /第一步：先定義一個json字符串吧 var 劉天王 = 姓名:劉德華,性別:男,老家:香港; /第二步：現(xiàn)在我們要把劉天王轉(zhuǎn)換成對象了 var who = Ext.deco

29、de(劉天王); /第三步：who成了對象后就相當(dāng)于是類的對象了，里面的姓名，性別，老家都成了who的屬性了，現(xiàn)在知道怎么通過對象訪問屬性了吧 var name = who.姓名; /獲取who對象的姓名屬性 var sex = who.性別; /獲取who對象的性別屬性 var home = who.老家; /獲取who對象的老家屬性 /第四步：下面將獲取的信息組合起來 var result = 劉天王資料的信息：姓名是-+name + ；性別-+sex+；老家-+home; /第五步：我們把獲取的who對象的信息用彈出消息的方式顯示出來吧 Ext.Msg.alert(劉天王的資料信息,re

30、sult); /以上就是將一個json字符串轉(zhuǎn)換成對象后，再逐個訪問對象的屬性的示例 /下面使用encode方法 /encode方法很簡單了，就是將上面生成的who對象再轉(zhuǎn)換成第一步定義的json字符串 /定義一個到時間執(zhí)行的函數(shù) var getJson = function() /你完全可以把這段寫在函數(shù)外面，之所以包含在里面純屬是為了在顯示第一個消息框后再隔3秒顯示下面這個消息窗口 var jsonStr = Ext.encode(who); /我們還是通過彈出消息的方式把這個json字符串顯示出來吧 Ext.Msg.alert(jsonStr信息內(nèi)容,jsonStr); ; /下面這個方

31、法意思是：在3秒之后會調(diào)用函數(shù)getJson執(zhí)行里面包含的腳本 setTimeout(getJson,3000); /補(bǔ)充點(diǎn)東西 /Ext.decode()和Ext.encode()分別是是 Ext.util.JSON.decode()和Ext.util.JSON.encode的簡寫 Ext.onReady(ready); 現(xiàn)在這個例子就可以說明Ext.decode()和Ext.encode()方法的完美作用了.用圖片說明吧/下面是將json字符串轉(zhuǎn)換成對象后,通過對象訪問屬性生成的消息框 /下面是將上面生成的對象又轉(zhuǎn)換成json字符串后生成的消息框 HYPERLINK /mogen_yin/

32、archive/2008/10/24/1318683.html 第五篇,Ext.util.Format類Ext.util.Format類是Ext對數(shù)據(jù)進(jìn)行格式化操作的一個類,這篇會把所有的方法都講解下,因?yàn)槊總€方法都會用到.因?yàn)槊總€方法都和我們用到的服務(wù)器端語言中所常用到的方法一樣,看了名稱就知道什么意思.這里我會把Ext封裝起來的源代碼復(fù)制出來,看了之后就能夠更加理解它的方法的意義了. function ready() /說明，這里會將每個方法執(zhí)行的結(jié)果都通過消息框的方式展現(xiàn)出來 /定義一個字符串 var testStr = abcdefghijklmnopqrstuvwxyz; /capi

33、talize調(diào)用方式：var capitalizeResult = Ext.util.Format.capitalize(testStr); /capitalize功能 var capitalizeValue = capitalize()方法的功能：將首字符串的第一個字母大寫！; Ext.Msg.alert(原字符串：+testStr,執(zhí)行Ext.util.Format.capitalize(testStr)方法+返回的結(jié)果：+capitalizeResult+capitalizeValue);/capitalize方法的源代碼 var capitalize = function(value)

34、 return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase(); ;效果圖: /ellipsis調(diào)用方式： var ellipsisResult = Ext.util.Format.ellipsis(testStr,9); /ellipsis功能 var ellipsisValue = capitalize()方法的功能：如果testStr的長度大于9，那么就將字符串截取總長度為9，但最后三個字符卻要用.表示，總長度為9的字符串實(shí)際上是由6個字符加上一個省落號表示的！ Ext.Msg.

35、alert(原字符串：+testStr,執(zhí)行Ext.util.Format.ellipsis(testStr,9)方法+返回的結(jié)果：+ellipsisResult+ellipsisValue);/ellipsis方法的源代碼 var ellipsis = function(value, len) if(value & value.length len) return value.substr(0, len-3)+.; return value; ;效果圖: /uppercase調(diào)用方式： var uppercaseResult = Ext.util.Format.uppercase(testS

36、tr); /uppercase功能 var uppercaseValue = uppercase()方法的功能：把字符串中轉(zhuǎn)換成大寫！ Ext.Msg.alert(原字符串：+testStr,執(zhí)行Ext.util.Format.uppercase(testStr)方法+返回的結(jié)果：+uppercaseResult+uppercaseValue);/uppercase方法的源代碼 var uppercase = function(value) return String(value).toUpperCase(); ;效果圖: /lowercase調(diào)用方式： var lowercaseResult

37、 = Ext.util.Format.lowercase(uppercaseResult); /lowercase功能 var lowercaseValue = lowercase()方法的功能：把字符串中轉(zhuǎn)換成小寫！ Ext.Msg.alert(字符串：+uppercaseResult,執(zhí)行Ext.util.Format.lowercase(lowercaseResult)方法+返回的結(jié)果：+lowercaseResult+lowercaseValue);/lowercase方法的源代碼 var lowercase = function(value) return String(value)

38、.toLowerCase(); ;效果圖: /substr調(diào)用方式： var substrResult = Ext.util.Format.substr(testStr,5,9); /substr功能 var substrValue = substr()方法的功能：將字符串按照指定的位置截取指定長度的新字符串！ Ext.Msg.alert(原字符串：+testStr,執(zhí)行Ext.util.Format.substr(testStr)方法+返回的結(jié)果：+substrResult+substrValue);/substr方法的源代碼var substr = function(value, star

39、t, length) return String(value).substr(start, length); ;效果圖: /usMoney調(diào)用方式： var usMoneyResult = Ext.util.Format.usMoney(1000); /usMoney功能 var usMoneyValue = usMoney()方法的功能：把字符串或者數(shù)字轉(zhuǎn)換成美圓字符串！ Ext.Msg.alert(字符串：+1000,執(zhí)行Ext.util.Format.usMoney(1000)方法+返回的結(jié)果：+usMoneyResult+usMoneyValue);/usMoney方法的源代碼 var

40、 usMoney = function(v) v = (Math.round(v-0)*100)/100; v = (v = Math.floor(v) ? v + .00 : (v*10 = Math.floor(v*10) ? v + 0 : v); v = String(v); var ps = v.split(.); var whole = ps0; var sub = ps1 ? .+ ps1 : .00; var r = /(d+)(d3)/; while (r.test(whole) whole = whole.replace(r, $1 + , + $2); v = whole

41、 + sub; if(v.charAt(0) = -) return -$ + v.substr(1); return $ + v; ;效果圖: /trim調(diào)用方式： var trimResult = Ext.util.Format.trim( 1000 ); /trim功能 var trimValue = trim()方法的功能：去掉字符串中的左右空格！ Ext.Msg.alert(原字符串：+ 1000 ,執(zhí)行Ext.util.Format.trim( 1000 )方法+返回的結(jié)果：+trimResult+trimValue);/trim方法的源代碼 var trim = function

42、(value) return String(value).replace(trimRe, ); ;效果圖: /fileSizeResult調(diào)用方式： var fileSizeResult = Ext.util.Format.fileSize(1024); /fileSizeResult功能 var fileSizeValue = fileSize()方法的功能：把代表字節(jié)的數(shù)據(jù)值轉(zhuǎn)換成代表文件大小的字符串，如1024就轉(zhuǎn)換成1kb！ Ext.Msg.alert(原字符串：1024,執(zhí)行Ext.util.Format.fileSize(1024)方法+返回的結(jié)果：+fileSizeResult+

43、fileSizeValue);/fileSize方法的源代碼 var fileSize = function(size) if(size 1024) return size + bytes; else if(size 1048576) return (Math.round(size*10) / 1024)/10) + KB; else return (Math.round(size*10) / 1048576)/10) + MB; ;效果圖: Ext.onReady(ready); 除此之外還有幾個方法,以后有時間會繼續(xù)說明,不過,很多方法我希望能夠自己測試下,然后就可以舉一反三了.多看看ex

44、t自帶的文檔,非常全,是英文的,對學(xué)習(xí)英語有很有幫助呢 HYPERLINK /mogen_yin/archive/2008/10/09/1307275.html 第六篇,Ext 智能 在VS2008中讓Intellisense提供對ExtJS的支持技巧：在VS2008中讓Intellisense提供對ExtJS的支持 第一步:在ext-base.js的第一行添加:window.addEventListener = false;第二步:在你編寫代碼的腳本加上:/ / 就這么簡單,加上之后,保存項(xiàng)目下就可以了.第六篇,Ext組件系列之-button組件的基本用法本篇介紹Ext.button組件的基

45、本用法:這個組件的許多屬性都很簡單,看名字就知道什么意思,那這里就不再描述. function ready() Ext.QuickTips.init(); var buttonName = new Ext.Button ( id:buttonName, text:Button組件基本用法, tooltip:提示信息：Button組件基本用法, /提示信息,如果需要顯示提示信息，需要使用Ext.QuickTips.init(); tooltipType:title, /定義顯示提示信息的類型，有qtip和title兩種方式，默認(rèn)是qtip type:button, /按鈕類型：可以是submit

46、, reset or button 默認(rèn)是 button autoShow:true, /默認(rèn)false hidden:false, /默認(rèn)false hideMode:offsets, /默認(rèn)display,可以取值：display，offsets，visibility cls:cssButton, /樣式定義,默認(rèn) disabled:false, /默認(rèn)false disabledClass:, /默認(rèn)x-item-disabled enableToggle:true, /默認(rèn)false pressed:false, /設(shè)置按鈕是否已經(jīng)被按下，默認(rèn)是false html:Ext,/默認(rèn) h

47、andleMouseEvents:true, /默認(rèn)true,如果為false,那么mouseoutmouseover就不能被觸發(fā) /x:number,y:number,在容器中的x,y坐標(biāo) handler:function()Ext.Msg.alert(提示消息框,測試Button組件：handler事件！);,/添加事件 listeners: /添加監(jiān)聽事件 可以結(jié)合handler測試這兩個事件哪個最先執(zhí)行 click:function() Ext.Msg.alert(提示消息框,測試Button組件：listeners事件！); Ext.getCmp(buttonName).hide()

48、;/隱藏按鈕 , cls:x-btn-text-icon, /添加圖標(biāo)前需要設(shè)置該屬性 icon:./Images/Menus/house.png, /圖標(biāo)的地址 /plugins : Object/Array擴(kuò)展插件時使用 repeat:false, /默認(rèn)false ,如果為true,需要設(shè)置mouseover事件 renderTo:Bind_Button /將組件的顯示效果渲染到某個節(jié)點(diǎn)的ID ); 比較常用的方法從字面上就能夠理解它們的意思還有更多的方法請參考Ext2.2官方文檔 enable();disable();destroy();focus();getText();hide()

49、;show(); setText( String text );setVisible( Boolean visible ); 使用該方法，意思是清除所有的監(jiān)聽事件，所以當(dāng)執(zhí)行該句后就不會再執(zhí)行l(wèi)isteners的click事件了。按鈕就不會被隱藏了。 buttonName.purgeListeners(); 也可以通過這種方式設(shè)置handler事件: buttonName.setHandler(function()Ext.Msg.alert(提示消息框,測試Button組件：setHandler事件！);); 下面的事件可以自己測試下 buttonName.on(click,function(

50、) Ext.Msg.alert(提示消息框,測試Button組件：click事件！); ); buttonName.on(mouseover,function() Ext.Msg.alert(提示消息框,測試Button組件：mouseover事件！); ); buttonName.on(mouseout,function() Ext.Msg.alert(提示消息框,測試Button組件：mouseout事件！); ); 比較常用的事件從字面上就能夠理解它們的意思還有更多的方法請參考Ext2.2官方文檔 mouseout : ( Button this, Event e ) ; mouseov

51、er : ( Button this, Event e ); beforedestroy : ( Ext.Component this ) ; beforehide : ( Ext.Component this ) ; beforerender : ( Ext.Component this ) beforeshow : ( Ext.Component this ) click : ( Button this, EventObject e ) destroy : ( Ext.Component this ) disable : ( Ext.Component this ) enable : (

52、Ext.Component this ) hide : ( Ext.Component this ) show : ( Ext.Component this ) render : ( Ext.Component this ) Ext.onReady(ready); HYPERLINK /mogen_yin/archive/2008/10/30/1323033.html 第七篇,Ext組件系列之-label組件的基本用法本篇介紹Ext.form.Label組件的基本用法:這里通過上一篇介紹的button按鈕的click事件來測試Ext.form.Label組件的用法,首先點(diǎn)隱藏的時候?qū)xt.f

53、orm.Label組件隱藏,而后又通過button 這個反復(fù)鍵來顯示Ext.form.Label組件,詳細(xì)看圖片效果以及代碼如圖所示,當(dāng)選擇隱藏的時候就出現(xiàn)下圖當(dāng)選擇上圖時,就又會出現(xiàn)下面看看代碼: function ready() Label組件僅僅是作為一個標(biāo)簽使用，所以用法較為簡單 var label = new Ext.form.Label ( id:labelID, text:測試label組件, height:100,/默認(rèn)auto width:100,/默認(rèn)auto autoShow:true,/默認(rèn)false autoWidth:true,/默認(rèn)false autoHeight

54、:true,/默認(rèn)false hidden:false,/默認(rèn)false hideMode:offsets,/默認(rèn)display,可以取值：display，offsets，visibility cls:cssLabel,/樣式定義,默認(rèn) disabled:true,/默認(rèn)false disabledClass:,/默認(rèn)x-item-disabled html:Ext,/默認(rèn) /x:number,y:number,在容器中的x,y坐標(biāo) renderTo:Bind_Label/將組件的顯示效果渲染到某個節(jié)點(diǎn)的ID ); /測試label這個是反復(fù)鍵選擇隱藏就設(shè)置為顯示反之就設(shè)置為隱藏 var bt

55、nEvent = new Ext.Button ( id:btnEvent, text:隱藏label組件, renderTo:Bind_Button ); var flag = 0; btnEvent.on(click,function() if(flag=0) label.setVisible(false); btnEvent.setText(顯示label組件); flag = 1; else label.setVisible(true); btnEvent.setText(隱藏label組件); flag = 0; ); /比較常用的方法主要有以下方法都較為簡單在本示例中你可以對所有的

56、方法自行測試下就知道是什么意思了 addClass( string cls ) destroy() disable() enable() focus( Boolean selectText, Boolean/Number delay ) getBox( Boolean local ) getEl() getId() getItemId() getPosition( Boolean local ) getSize() getXType() getXTypes() hide() isVisible() isXType( String xtype, Boolean shallow ) setDisa

57、bled( Boolean disabled ) setHeight( Number height ) setPosition( Number left, Number top ) setSize( Number/Object width, Number height ) setText( String text, Boolean encode ) setVisible( Boolean visible ) setWidth( Number width ) show() updateBox( Object box ) Ext.onReady(ready); 如圖所示,當(dāng)選擇隱藏的時候就出現(xiàn)下圖

58、當(dāng)選擇上圖時,就又會出現(xiàn) HYPERLINK /mogen_yin/archive/2008/10/30/1323145.html 第八篇,Ext組件系列之-textfield組件的基本用法本章介紹Ext.form.TextField組件的基本用法: /這里是把TextField很重要的屬性列出來實(shí)際在應(yīng)用的時候不需要將每個屬性都列出也許只需要一個屬性就夠了。 function ready() Ext.QuickTips.init(); var textfieldName = new Ext.form.TextField ( id:textfieldName, allowBlank:false

59、,/默認(rèn)是true,如果是false,就是不允許空 /假如不為空時，定義提示信息默認(rèn)的提示信息是：This field is required /要使提示內(nèi)容出現(xiàn)，需要添加 Ext.QuickTips.init(); blankText:請輸入數(shù)據(jù), disabled:false,/默認(rèn)是false emptyText:請正確輸入數(shù)據(jù),/默認(rèn)是null fieldLabel:用戶名稱,/默認(rèn)是 height:auto,/默認(rèn)是auto hidden:false,/默認(rèn)是false hideLabel:false,/默認(rèn)是false hideMode:offsets,/默認(rèn)display,可以取

60、值：display，offsets，visibility inputType:text,/輸入類型 這個很重要，可以是radio, text, password, file 默認(rèn)是text invalidText:invalidText：只能夠輸入數(shù)字,/默認(rèn)是：The value in this field is invalid maxLength:100,/能夠輸入的內(nèi)容的最大長度 maxLengthText:輸入內(nèi)容太長了,/超出最大長度的設(shè)置信息 minLength:2,/能夠輸入的內(nèi)容的最小長度minLengthText:輸入內(nèi)容太短了,/沒有達(dá)到最小長度的設(shè)置信息 readOnly