extjs是在JavaScript基礎(chǔ)上封裝的UI框架，類似于jQuery的easyUI或MiniUI，extjs封裝層次更高，更注重面向?qū)ο蟮乃枷搿?/p>
extjs mvc 是針對(duì)extjs的一種分層框架（m:model，v:view，c:controller），目的是為了將extjs 界面控件（寫在view層）與事件處理（寫在controller層）拆分開(kāi)，便于開(kāi)發(fā)和維護(hù)。
因?yàn)楫?dāng)界面業(yè)務(wù)邏輯較復(fù)雜時(shí)，如果把界面控件和控件相關(guān)聯(lián)的事件放到一個(gè)js文件中，就會(huì)非?；靵y，單個(gè)js文件代碼量很大，不利于開(kāi)發(fā)和修改維護(hù)。
采用extjs mvc模式，把界面控件的代碼全部放到view層，而與這些控件相關(guān)聯(lián)的所有事件全部放到controller層，這樣的話代碼結(jié)果和程序邏輯就比較清晰，便于開(kāi)發(fā)。
model層主要是放與前臺(tái)綁定的store（數(shù)據(jù)集）所需的實(shí)體，可以單獨(dú)加一個(gè)store層與model層對(duì)應(yīng)。
1、首先，需要先創(chuàng)建一個(gè)基本可用的 ExtJS 模板， 這個(gè)很簡(jiǎn)單， 如下所示： 2、需要引用的腳本是 ExtJS 根目錄下的 ext-debug.js ， 不是 ext-all-debug.js， 這個(gè)文件非常小， 只有幾百K ， 當(dāng)讓這個(gè)只是最基本的 ExtJS 組件， 不包括任何的界面功能。3、配置 Ext.Loader 啟用動(dòng)態(tài)加載；4、ExtJS 中的動(dòng)態(tài)加載是由 Ext.Loader 來(lái)完成的， 默認(rèn)不啟用動(dòng)態(tài)加載， 所以接下來(lái)需要做的事配置 Ext.Loader 啟用動(dòng)態(tài)加載， 在上面模板的 body 標(biāo)簽內(nèi)添加如下代碼：注意：上面的代碼啟用了動(dòng)態(tài)加載， 禁用了瀏覽器緩存， 以及指定了 ExtJS 的所部署的路徑。
extjs 屬于js框架，基礎(chǔ)還是js的語(yǔ)法。 JavaScript 中的對(duì)象其實(shí)就是屬性（方法）的一個(gè)集合，并沒(méi)有嚴(yán)格意義的類的概念。 它提供了另外一種簡(jiǎn)單的方式來(lái)創(chuàng)建對(duì)象，即大括號(hào)（{}）語(yǔ)法： { property1:statement, property2:statement2, …, propertyN:statmentN } 通過(guò)大括號(hào)括住多個(gè)屬性或方法及其定義（這些屬性或方法用逗號(hào)隔開(kāi)）， 來(lái)實(shí)現(xiàn)對(duì)象的定義，這段代碼就直接定義個(gè)了具有n個(gè)屬性或方法的對(duì)象， 其中屬性名和其定義之間用冒號(hào)（:）隔開(kāi)。
var user={ name:"jack", //定義了name屬性，初始化為jack favoriteColor:["red","green","black","white"],//定義了顏色喜好數(shù)組 hello:function(){ //定義了方法hello alert("hello,"+this.name); }, sex:"male" //定義了性別屬性sex，初始化為sex } 和json格式差不多，不過(guò)函數(shù)也作為key值來(lái)表示，而這在ruby中，也是通用的 格式。不過(guò)用=> 來(lái)代替：而已。 簡(jiǎn)單來(lái)說(shuō)就是： []：數(shù)組 {}: 對(duì)象 var obj = [{tmp: "test1 ", tmp1: "test2 "},{tmp: "test3 ", tmp1: "test4 "}]; 相當(dāng)于 var obj = new array(); obj[0] = {tmp: "test1 ", tmp1: "test2 "} obj[1] = {tmp: "test3 ", tmp1: "test4 "}]
ExtJS是一個(gè)Ajax框架，是一個(gè)用javascript寫的，用于在客戶端創(chuàng)建豐富多彩的web應(yīng)用程序界面。ExtJS可以用來(lái)開(kāi)發(fā)RIA也即富客戶端的AJAX應(yīng)用。因此，可以把ExtJS用在.Net、Java、Php等各種開(kāi)發(fā)語(yǔ)言開(kāi)發(fā)的應(yīng)用中。
ExtJs最開(kāi)始基于YUI技術(shù)，由開(kāi)發(fā)人員JackSlocum開(kāi)發(fā)，通過(guò)參考JavaSwing等機(jī)制來(lái)組織可視化組件，無(wú)論從UI界面上CSS樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的JavaScript客戶端技術(shù)的精品。
Ext的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組件輕松。
JSLoader.load({ scripts:[basePath+"utiljs/GridUtil.js",basePath+"utiljs/JsonUtil.js"]//地址數(shù)據(jù) });
這兩種技術(shù)屬于不同的富瀏覽器開(kāi)發(fā)模式。flex屬于ria（富互聯(lián)網(wǎng)應(yīng)用），是通過(guò)mecromedia的flash技術(shù)以及actionscript腳本api構(gòu)建的一種技術(shù)。
首先將extjs文件夾復(fù)制到WebRoot目錄下，然后新建JSP
然后建相應(yīng)的JS文件 Ext.onReady(function(){ Ext.Msg.alert('ExtJs' ,'這是一個(gè)ExtJs的對(duì)話框。'); });或者把上面這段代碼放到JSP中也可以。啟動(dòng)服務(wù)器，打開(kāi)瀏覽器就可以看到效果了。package com.alpha.test;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.LineNumberReader;
public class GetMac {
/**
* java獲取客戶端網(wǎng)卡的MAC地址
*
* @param args
*/
public static void main(String[] args) {
GetMac get = new GetMac();
System.out.println("1="+get.getMAC());
System.out.println("2="+get.getMAC("127.0.0.1"));
}
// 1.獲取客戶端ip地址( 這個(gè)必須從客戶端傳到后臺(tái))：
// jsp頁(yè)面下，很簡(jiǎn)單，request.getRemoteAddr() ;
// 因?yàn)橄到y(tǒng)的VIew層是用JSF來(lái)實(shí)現(xiàn)的，因此頁(yè)面上沒(méi)法直接獲得類似request，在bean里做了個(gè)強(qiáng)制轉(zhuǎn)換
// public String getMyIP() {
// try {
// FacesContext fc = FacesContext.getCurrentInstance();
// HttpServletRequest request = (HttpServletRequest) fc
// .getExternalContext().getRequest();
// return request.getRemoteAddr();
// } catch (Exception e) {
// e.printStackTrace();
// }
// return "";
// }
// 2.獲取客戶端mac地址
// 調(diào)用window的命令，在后臺(tái)Bean里實(shí)現(xiàn) 通過(guò)ip來(lái)獲取mac地址。方法如下：
// 運(yùn)行速度【快】
public String getMAC() {
String mac = null;
try {
Process pro = Runtime.getRuntime().exec("cmd.exe /c ipconfig/all");
InputStream is = pro.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String message = br.readLine();
int index = -1;
while (message != null) {
if ((index = message.indexOf("Physical Address")) > 0) {
mac = message.substring(index + 36).trim();
break;
}
message = br.readLine();
}
System.out.println(mac);
br.close();
pro.destroy();
} catch (IOException e) {
System.out.println("Can't get mac address!");
return null;
}
return mac;
}
// 運(yùn)行速度【慢】
public String getMAC(String ip) {
String str = null;
String macAddress = null;
try {
Process p = Runtime.getRuntime().exec("nbtstat -A " + ip);
InputStreamReader ir = new InputStreamReader(p.getInputStream());
LineNumberReader input = new LineNumberReader(ir);
for (; true;) {
str = input.readLine();
if (str != null) {
if (str.indexOf("MAC Address") > 1) {
macAddress = str
.substring(str.indexOf("MAC Address") + 14);
break;
}
}
}
} catch (IOException e) {
e.printStackTrace(System.out);
return null;
}
return macAddress;
}
}
vargrid=Ext.getCmp('ColumnsPanel').findByType(‘grid’)[0];
在現(xiàn)代的網(wǎng)絡(luò)應(yīng)用程序開(kāi)發(fā)中，前端框架的選擇對(duì)項(xiàng)目的成功至關(guān)重要。一種被廣泛應(yīng)用的前端框架是ExtJS，它提供了豐富的組件庫(kù)和強(qiáng)大的功能，使開(kāi)發(fā)人員能夠快速構(gòu)建功能強(qiáng)大且美觀的用戶界面。
ExtJS是一款基于JavaScript的前端框架，由Sencha公司開(kāi)發(fā)。它的主要特點(diǎn)是提供了一套豐富的UI組件和工具，能夠幫助開(kāi)發(fā)人員快速搭建現(xiàn)代化的Web應(yīng)用程序。ExtJS不僅支持常見(jiàn)的UI組件，如表格、表單等，還提供了諸如圖表、樹(shù)形控件等高級(jí)組件，使開(kāi)發(fā)人員能夠輕松實(shí)現(xiàn)復(fù)雜的交互和動(dòng)畫效果。
在Web開(kāi)發(fā)中，經(jīng)常需要從后端服務(wù)器獲取JSON格式的數(shù)據(jù)，然后在前端頁(yè)面中進(jìn)行展示。使用ExtJS可以很方便地獲取和處理JSON數(shù)據(jù)，為用戶提供更加友好和動(dòng)態(tài)的用戶體驗(yàn)。
為了獲取JSON數(shù)據(jù)，可以通過(guò)ExtJS提供的Ext.Ajax類來(lái)發(fā)送Ajax請(qǐng)求。通過(guò)調(diào)用Ext.Ajax.request方法并指定請(qǐng)求的URL和參數(shù)，就可以從服務(wù)器端獲取JSON數(shù)據(jù)，并在前端頁(yè)面中進(jìn)行展示和處理。
以下是一個(gè)簡(jiǎn)單的示例代碼，演示如何通過(guò)ExtJS獲取JSON數(shù)據(jù)：
Ext.Ajax.request({
url: 'data.json',
method: 'GET',
success: function(response) {
var data = Ext.decode(response.responseText);
// 在這里處理獲取的JSON數(shù)據(jù)
},
failure: function(response) {
console.error('請(qǐng)求數(shù)據(jù)失?。? + response.statusText);
}
});
在上面的代碼中，我們通過(guò)Ext.Ajax.request方法向名為"data.json"的URL發(fā)送了一個(gè)GET請(qǐng)求，成功獲取數(shù)據(jù)后會(huì)調(diào)用success回調(diào)函數(shù)來(lái)處理JSON數(shù)據(jù)。通過(guò)Ext.decode方法可以將JSON字符串轉(zhuǎn)換為JavaScript對(duì)象，然后可以根據(jù)需要在頁(yè)面中展示或處理這些數(shù)據(jù)。
一旦獲取到JSON數(shù)據(jù)，我們通常需要在前端頁(yè)面中進(jìn)行展示或處理。ExtJS提供了豐富的組件和工具，可以幫助開(kāi)發(fā)人員輕松地展示和操作JSON數(shù)據(jù)。
例如，可以使用ExtJS提供的Grid組件來(lái)展示JSON數(shù)據(jù)，通過(guò)設(shè)置Grid的store屬性為獲取到的數(shù)據(jù)即可在頁(yè)面中展示數(shù)據(jù)表格。對(duì)于復(fù)雜的數(shù)據(jù)展示需求，還可以使用模板和自定義組件來(lái)實(shí)現(xiàn)更加靈活和個(gè)性化的界面展示效果。
另外，通過(guò)ExtJS的數(shù)據(jù)綁定和數(shù)據(jù)模型功能，開(kāi)發(fā)人員可以更加方便地管理前端頁(yè)面和后端數(shù)據(jù)之間的關(guān)聯(lián)，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定和實(shí)時(shí)更新，提升用戶體驗(yàn)和開(kāi)發(fā)效率。
通過(guò)ExtJS獲取和處理JSON數(shù)據(jù)是現(xiàn)代Web應(yīng)用開(kāi)發(fā)中的常見(jiàn)需求。ExtJS提供了豐富的工具和組件，幫助開(kāi)發(fā)人員快速、高效地構(gòu)建功能強(qiáng)大且美觀的前端界面，并實(shí)現(xiàn)與后端數(shù)據(jù)的交互和展示。掌握ExtJS獲取JSON數(shù)據(jù)的方法，對(duì)于提升開(kāi)發(fā)效率和用戶體驗(yàn)都具有重要意義。
