extjs是在JavaScript基礎(chǔ)上封裝的UI框架，類似于jQuery的easyUI或MiniUI，extjs封裝層次更高，更注重面向?qū)ο蟮乃枷搿?/p>
extjs mvc 是針對extjs的一種分層框架（m:model，v:view，c:controller），目的是為了將extjs 界面控件（寫在view層）與事件處理（寫在controller層）拆分開，便于開發(fā)和維護(hù)。
因為當(dāng)界面業(yè)務(wù)邏輯較復(fù)雜時，如果把界面控件和控件相關(guān)聯(lián)的事件放到一個js文件中，就會非常混亂，單個js文件代碼量很大，不利于開發(fā)和修改維護(hù)。
采用extjs mvc模式，把界面控件的代碼全部放到view層，而與這些控件相關(guān)聯(lián)的所有事件全部放到controller層，這樣的話代碼結(jié)果和程序邏輯就比較清晰，便于開發(fā)。
model層主要是放與前臺綁定的store（數(shù)據(jù)集）所需的實體，可以單獨加一個store層與model層對應(yīng)。
1、首先，需要先創(chuàng)建一個基本可用的 ExtJS 模板， 這個很簡單， 如下所示： 2、需要引用的腳本是 ExtJS 根目錄下的 ext-debug.js ， 不是 ext-all-debug.js， 這個文件非常小， 只有幾百K ， 當(dāng)讓這個只是最基本的 ExtJS 組件， 不包括任何的界面功能。3、配置 Ext.Loader 啟用動態(tài)加載；4、ExtJS 中的動態(tài)加載是由 Ext.Loader 來完成的， 默認(rèn)不啟用動態(tài)加載， 所以接下來需要做的事配置 Ext.Loader 啟用動態(tài)加載， 在上面模板的 body 標(biāo)簽內(nèi)添加如下代碼：注意：上面的代碼啟用了動態(tài)加載， 禁用了瀏覽器緩存， 以及指定了 ExtJS 的所部署的路徑。
extjs 屬于js框架，基礎(chǔ)還是js的語法。 JavaScript 中的對象其實就是屬性（方法）的一個集合，并沒有嚴(yán)格意義的類的概念。 它提供了另外一種簡單的方式來創(chuàng)建對象，即大括號（{}）語法： { property1:statement, property2:statement2, …, propertyN:statmentN } 通過大括號括住多個屬性或方法及其定義（這些屬性或方法用逗號隔開）， 來實現(xiàn)對象的定義，這段代碼就直接定義個了具有n個屬性或方法的對象， 其中屬性名和其定義之間用冒號（:）隔開。
var user={ name:"jack", //定義了name屬性，初始化為jack favoriteColor:["red","green","black","white"],//定義了顏色喜好數(shù)組 hello:function(){ //定義了方法hello alert("hello,"+this.name); }, sex:"male" //定義了性別屬性sex，初始化為sex } 和json格式差不多，不過函數(shù)也作為key值來表示，而這在ruby中，也是通用的 格式。不過用=> 來代替：而已。 簡單來說就是： []：數(shù)組 {}: 對象 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是一個Ajax框架，是一個用javascript寫的，用于在客戶端創(chuàng)建豐富多彩的web應(yīng)用程序界面。ExtJS可以用來開發(fā)RIA也即富客戶端的AJAX應(yīng)用。因此，可以把ExtJS用在.Net、Java、Php等各種開發(fā)語言開發(fā)的應(yīng)用中。
ExtJs最開始基于YUI技術(shù)，由開發(fā)人員JackSlocum開發(fā)，通過參考JavaSwing等機制來組織可視化組件，無論從UI界面上CSS樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的JavaScript客戶端技術(shù)的精品。
Ext的UI組件模型和開發(fā)理念脫胎、成型于Yahoo組件庫YUI和Java平臺上Swing兩者，并為開發(fā)者屏蔽了大量跨瀏覽器方面的處理。
相對來說，EXT要比開發(fā)者直接針對DOM、W3C對象模型開發(fā)UI組件輕松。
JSLoader.load({ scripts:[basePath+"utiljs/GridUtil.js",basePath+"utiljs/JsonUtil.js"]//地址數(shù)據(jù) });
這兩種技術(shù)屬于不同的富瀏覽器開發(fā)模式。flex屬于ria（富互聯(lián)網(wǎng)應(yīng)用），是通過mecromedia的flash技術(shù)以及actionscript腳本api構(gòu)建的一種技術(shù)。
首先將extjs文件夾復(fù)制到WebRoot目錄下，然后新建JSP
然后建相應(yīng)的JS文件 Ext.onReady(function(){ Ext.Msg.alert('ExtJs' ,'這是一個ExtJs的對話框。'); });或者把上面這段代碼放到JSP中也可以。啟動服務(wù)器，打開瀏覽器就可以看到效果了。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地址( 這個必須從客戶端傳到后臺)：
// jsp頁面下，很簡單，request.getRemoteAddr() ;
// 因為系統(tǒng)的VIew層是用JSF來實現(xiàn)的，因此頁面上沒法直接獲得類似request，在bean里做了個強制轉(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的命令，在后臺Bean里實現(xiàn) 通過ip來獲取mac地址。方法如下：
// 運行速度【快】
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;
}
// 運行速度【慢】
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)用程序開發(fā)中，前端框架的選擇對項目的成功至關(guān)重要。一種被廣泛應(yīng)用的前端框架是ExtJS，它提供了豐富的組件庫和強大的功能，使開發(fā)人員能夠快速構(gòu)建功能強大且美觀的用戶界面。
ExtJS是一款基于JavaScript的前端框架，由Sencha公司開發(fā)。它的主要特點是提供了一套豐富的UI組件和工具，能夠幫助開發(fā)人員快速搭建現(xiàn)代化的Web應(yīng)用程序。ExtJS不僅支持常見的UI組件，如表格、表單等，還提供了諸如圖表、樹形控件等高級組件，使開發(fā)人員能夠輕松實現(xiàn)復(fù)雜的交互和動畫效果。
在Web開發(fā)中，經(jīng)常需要從后端服務(wù)器獲取JSON格式的數(shù)據(jù)，然后在前端頁面中進(jìn)行展示。使用ExtJS可以很方便地獲取和處理JSON數(shù)據(jù)，為用戶提供更加友好和動態(tài)的用戶體驗。
為了獲取JSON數(shù)據(jù)，可以通過ExtJS提供的Ext.Ajax類來發(fā)送Ajax請求。通過調(diào)用Ext.Ajax.request方法并指定請求的URL和參數(shù)，就可以從服務(wù)器端獲取JSON數(shù)據(jù)，并在前端頁面中進(jìn)行展示和處理。
以下是一個簡單的示例代碼，演示如何通過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('請求數(shù)據(jù)失敗：' + response.statusText);
}
});
在上面的代碼中，我們通過Ext.Ajax.request方法向名為"data.json"的URL發(fā)送了一個GET請求，成功獲取數(shù)據(jù)后會調(diào)用success回調(diào)函數(shù)來處理JSON數(shù)據(jù)。通過Ext.decode方法可以將JSON字符串轉(zhuǎn)換為JavaScript對象，然后可以根據(jù)需要在頁面中展示或處理這些數(shù)據(jù)。
一旦獲取到JSON數(shù)據(jù)，我們通常需要在前端頁面中進(jìn)行展示或處理。ExtJS提供了豐富的組件和工具，可以幫助開發(fā)人員輕松地展示和操作JSON數(shù)據(jù)。
例如，可以使用ExtJS提供的Grid組件來展示JSON數(shù)據(jù)，通過設(shè)置Grid的store屬性為獲取到的數(shù)據(jù)即可在頁面中展示數(shù)據(jù)表格。對于復(fù)雜的數(shù)據(jù)展示需求，還可以使用模板和自定義組件來實現(xiàn)更加靈活和個性化的界面展示效果。
另外，通過ExtJS的數(shù)據(jù)綁定和數(shù)據(jù)模型功能，開發(fā)人員可以更加方便地管理前端頁面和后端數(shù)據(jù)之間的關(guān)聯(lián)，實現(xiàn)數(shù)據(jù)的雙向綁定和實時更新，提升用戶體驗和開發(fā)效率。
通過ExtJS獲取和處理JSON數(shù)據(jù)是現(xiàn)代Web應(yīng)用開發(fā)中的常見需求。ExtJS提供了豐富的工具和組件，幫助開發(fā)人員快速、高效地構(gòu)建功能強大且美觀的前端界面，并實現(xiàn)與后端數(shù)據(jù)的交互和展示。掌握ExtJS獲取JSON數(shù)據(jù)的方法，對于提升開發(fā)效率和用戶體驗都具有重要意義。
