科|學(xué)|技|術(shù)ExtJS組件技術(shù)分析陶超(西南交通大學(xué)信息科學(xué)與技術(shù)學(xué)院 四川●成都611756)摘要互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展使得基于WEB的應(yīng)用越來越普遍,大量云端應(yīng)用層出不窮,網(wǎng)頁內(nèi)容復(fù)雜程度已不可同日而語。因此當(dāng)開發(fā)人員開始厭倦采用傳統(tǒng)的JSP作為前臺技術(shù)進行WEB開發(fā),而其他相應(yīng)的前臺技術(shù)如JSF等并不成熟時,以EXT為代表的HTML5開發(fā)框架出現(xiàn)了并迅速成為前端技術(shù)的主流。本文主要介紹了EXT4.x版本中的重要組件和數(shù)據(jù)交互技術(shù)。關(guān)鍵詞Ext Grid 組件Chart 組件中圖分類號:TP311.52文獻標(biāo)識碼:A0引言對于一-個簡單的Grid來說，確定了store 和ColumnModel在眾多的AJAX框架中，最流行的莫過于EXT了，它不就基本可以正常工作了。如果要自定義它的樣式，可以使用但提供了AJAX的基本功能，更重要的是它提供了大量封裝它的config屬性一-設(shè)置。好的Ul組件,在此基礎(chǔ)上,開發(fā)人員可以很方便地使用這些接下來如果要添加一一個修改數(shù)據(jù)的功能,就需要借助ge-組件迅速開發(fā)出美觀的WEB應(yīng)用界面。本文將涉及EXT中tSelectionModel(方法了。 當(dāng)我們點擊選中了Grid 的某一行重要的組件Grid以及新奇的Chart組件等?；蚴悄硯仔袝r,運行以下語句時:1 ExuJS簡介var record = grid.getSelectionModel0.getSelection0;Ext是一一個Ajax框架,用于在客戶端創(chuàng)建豐富多彩的web就會得到一個record類型的數(shù)組，使用record類型數(shù)組應(yīng)用程序界面,是在Yahoo!UI的基礎(chǔ)上發(fā)展而來的。官方網(wǎng)可以獲取Grid行數(shù)據(jù)中的每一項,或是將選定行的數(shù)據(jù)加載址: www.sencha.com.到一個表單中以供修改。ExtJS可以用來開發(fā)RIA也即富客戶端的AJAX應(yīng)用，是2.2 Ext chart一個用javascript寫的，主要用于創(chuàng)建前端用戶界面，是- -個Ext的chart組件包含了對多種圖表如柱狀圖、折線圖、點與后臺技術(shù)無關(guān)的前端ajax框架。因此，可以把ExuJS用在圖、餅圖、區(qū)域圖、盤表圖、雷達圖等的封裝,借助它開發(fā)人員Net、Java、 Php等各種開發(fā)語言開發(fā)的應(yīng)用中。ExtJs 最開始可以迅速構(gòu)建出美觀整齊的統(tǒng)計圖表?；赮UI技術(shù)，由開發(fā)人員JackSlocum開發(fā),通過參考JavaS-先來看看圖表的幾大配置屬性:wing等機制來組織可視化組件，無論從UI界面上CSS樣式axes:用來配置坐標(biāo)，可以配置多個坐標(biāo)。type: 配置坐標(biāo)的應(yīng)用，到數(shù)據(jù)解析上的異常處理,都可算是一款不可多得的的類型。一 般用 到的是Numeric、Category. position: 配置坐JavaScript 客戶端技術(shù)的精品。標(biāo)的位置，比如上下左右。.Ext的UI組件模型和開發(fā)理念脫胎、成型于Yahoo組件fields:可以配置多個字段,用來設(shè)置坐標(biāo)顯示的值。其實庫YUI和Java平臺上Swing兩者,并為開發(fā)者屏蔽了大量跨這 個配置和series 中的yFiled配置項是沒有關(guān)系的。series:瀏覽器方面的處理。相對來說，EXT要比開發(fā)者直接針對用來配置圖表。DOM、W3C對象模型開發(fā)UI組件輕松。對于一個圖表來說首先應(yīng)先配置它的坐標(biāo)軸,即axes屬2 ExuS常用組件性。--般axes中含有兩個坐標(biāo)軸的配置信息。每條坐標(biāo)軸都2.1 Ext Grid .要定義type屬性，一般 是Numeric 和Category。Numeric 即從Ext2.0到Ext4.x版本,Grid組件的功能-.直在不斷更數(shù)字類型,例如chart會根據(jù)Numeric類型的坐標(biāo)值大小繪制新，性能也在不斷提升,可見它在整個Ext框架中具有舉足輕柱狀圖的條 柱高度。而Category類型的坐標(biāo)軸可標(biāo)示不同的重的地位。Grid 其實是對Table的一種封裝， 并支持列排序，統(tǒng)計對象。接下來是坐標(biāo)軸的位置position,有 上下左右等。自動滾動，自定義列寬度,配合toolbar 可實現(xiàn)數(shù)據(jù)分頁。它能而 fields配置坐標(biāo)軸對應(yīng)的數(shù)據(jù)項, title可以設(shè)置各個坐標(biāo)軸夠支持多種數(shù)據(jù)類型，如二維數(shù)組、Json數(shù)據(jù)和XML數(shù)據(jù),甚的名稱標(biāo)題。至包括我們自定義的數(shù)據(jù)類型。Ext 為我們提供了一個橋梁3總結(jié)Ext.data.Store, 通過它我們可以把任何格式的數(shù)據(jù)轉(zhuǎn)化成Grid相比Ext 3.x版本，Ext 4.x版本提供了沙箱模式，動態(tài)加可以使用的形式，這樣就不需要為每種數(shù)據(jù)格式寫-一個Grid載等新技術(shù),類系統(tǒng)也做了較大改動，從而給予了開發(fā)者更大的實現(xiàn)了。的發(fā)揮空間。但是也受到了眾多社區(qū)關(guān)于性能低下的指責(zé),首先，一個表格應(yīng)該有列定義，即定義表頭ColumnMo-對此Ext4.2做了更多性能方面的優(yōu)化，使得框架本身更能適del,定義每個列的表頭名和在store中對應(yīng)的數(shù)據(jù)項。其次應(yīng)應(yīng)當(dāng)前htm15的發(fā)展趨勢。指定相應(yīng)的store,即上述代碼中的rolestore,其定義如下:定義一個store首先要確定其中的數(shù)據(jù)項名稱及數(shù)據(jù)類參考 文獻型等，即代碼中的Model,再者設(shè)置數(shù)據(jù)獲取方式,代碼中使用[1] 郭峰.ExtJS中國煤化工出版社.2010.[2] 衛(wèi)軍,夏慧軍[M1.北京:機械工業(yè)出的是ajax異步請求遠(yuǎn)程數(shù)據(jù)。版社,2011.YHCNMHG- -科教導(dǎo)刊(電子版) . 2013年第十一期(下)一