ExtJS組件技術(shù)分析

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