1.ExtJS環境搭建

①先在官網下載spket-1.6.23，extjs-4.1.1，解壓，將解壓後的資料夾plugins,features放到MyEclipse\MyEclipse 10\dropins內，我的是MyEclipse10,可以這樣用。然後開啟MyEclipse10，在window-->Preferences會發現出現選項Spket，表示外掛安裝成功。點Spket-->JavaScript Profile,New一個profile，name隨便寫，不過建議寫ExtJS,點Add Library,在library裡選ExtJS，再add file,選擇sdk.jsb3，全選。最後再點Default，記住，一定要點Default。這檔案是給智慧提示的。注意：路徑一定要為extjs-4.1.1\build\sdk.jsb3,而不是隨便一個路徑上的sdk.jsb3，必須要在extjs-4.1.1資料夾中去找。否則寫js檔案時，不會出現提示。

下午就因為換了路徑而死活找不到問題所在，最後才發現。

②這時再在window-->Preferences-->General-->Editors-->File Associatior，選“.js”，將Spket JavaScript Editor設為Default，這是預設使用Spket開啟js檔案的。

③解壓後的extjs-4.1.1有examples和resources資料夾，匯入專案中（就是直接複製），匯入前右鍵點選專案名稱，選Propreties-->Builders，將JavaScript Validator勾掉，否則匯入這兩個資料夾時，MyEclipse會卡死,最後只能重灌MyEclipse。

④再匯入ext-all-debug.js和ext-lang-zh_CN.js，在jsp頁面裡邊這樣寫：

<!-- 引入ext的樣式檔案 -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<!-- 引入ext核心檔案，開發模式 -->
<script type="text/javascript" charset="utf-8" src="extjs/ext-all-debug.js"></script>
<!-- 引入國際化檔案 -->
<script type="text/javascript" charset="utf-8" src="extjs/ext-lang-zh_CN.js"></script>
<!-- 引入外部js檔案，要是直接在jsp裡邊寫，反應會很慢 -->
<script type="text/javascript" charset="utf-8" src="base/001_helloworld.js"></script>
 

注意，使用extjs時，js檔案不要寫到jsp裡邊，要從外部引入，否則此時在jsp裡寫javascript語句會非常卡。

測試使用時會發現MessageBox中title文字會比較小，這時要將resources/css/ext-all.css中的11px全部替換為12px即可。

2.Ext.onReady()表示確保頁面全部載入完後才執行javascript語句，是一個入口函式，相當於java裡邊的main函式。

3.若屬性在config裡面，則系統會預設給出set或get方法。只是在extjs中不智慧提示，需要手打。如：

//ExtJS 建立類 例項化物件
	Ext.define('Person',{//建立新類
		config:{     //配置項
			name:'張三', 
			age:20
		},
		say:function(){
			alert('say...');
		},
		constructor:function(config){//將配置項初始化,新建類時最好寫上建構函式.下邊為推薦寫法
			var self = this;
			self.initConfig(config);//初始化類 傳遞引數
		}
	});

	//例項化物件
	var p = Ext.create('Person',{ 
		name:'李四',      //該處為逗號，不是分號
		id:50,            //不能通過這樣的方式來給子類增加新屬性，因為在父類config裡沒有定義    
		age:21            //最後一步後邊沒有任何符號，這和js不同。js每步後都為分號
	});
	alert(p.getName());//getName()是系統自動補充，但不會給出提示，需要我們手打。
	alert(p.getAge());
	alert(p.id);//此時會顯示id為undefined
	alert(p.getId());//會報錯，p.getAge is not a function 因為在父類中沒定義
	p.say();
)};

在上邊，構造器最常見的寫法是下邊的，但不推薦，而通過新建變數接收this值得方式更安全，推薦使用上邊寫法。

constructor:function(config){
			this.initConfig(config);//初始化類 傳遞引數
		}

而在js中是這樣建類的

function Person(id,name){//新建類
	this.id = id;
	this.name = name;
}

var p = new Person(10,"李四");//例項化物件

4.ext要建立一個類，用Ext.define;例項化物件則用Ext.create。
   Ext.define可以建立類，可以繼承其它類，也可以被繼承。可配預設屬性：
   extend(注意，後面沒有s)：繼承其它的類
   mixins：將其他的類融入到當前類，類似於多繼承。observable是經常被mixins的
   constructor：建構函式，推薦最好寫上。
如：

Ext.define('Ext.Ajax',{
	mixins{   //新增混合方法
		observable:'Ext.util.observable'


	}
});

5.render表示渲染，渲染的意思就是
比如new Ext.Panel();此時頁面上是沒有這個panel的，什麼都看不到，它只是存在於記憶體中的javascript物件。當呼叫panel.render('div1');時，就是把這個物件中對應的配置放到html中，這時才能看到帶有ext樣式的panel.或可用renderTo:Ext.getBody()等方法渲染到body中(必須寫這一句，否則不會在頁面顯示)

6.js新建的類中如何新增方法？

function Person1(id,name){
		this.id = id;
		this.name = name;
		this.say = function(){//一定要寫this，否則會在例項化物件時提示say is not a function
			alert("js中的say方法");
		};
	};

var p = new Person1();

7.

Ext.MessageBox.alert(String title,String Msg,[Function fn],[Object scope]);

作用是顯示一對話方塊，其中title為標題，Msg為內容，fn為回撥函式，“[]”裡邊的都是可選，scope為作用域。如：

Ext.MessageBox.alert("這是標題", "資訊提示對話方塊！", function(){  
    alert("你好"); //對話方塊有一“確定”按鈕，點下會彈出“你好”  
});

這是給對話方塊添加了方法

8.Ext.widget是隻有如TestField,checkBox,button等選單類元件

9.對於單例(即singleton)類的理解：單例類就是這個類，不管new多少次，只建立一個物件，可以直接使用。如在新建的window中使用

single:true;

則show()後，window只彈出一次。若不使用上句，則每一次show(),就會彈出一個window

10.Ext.apply 將原物件的所有屬性和方法複製到目標物件
Ext.applyif 將原物件的所有目標物件未包含的屬性和方法複製到目標物件
Ext.Array.each 遍歷陣列，類似於for(var x in array)

11.syntax error是語法錯誤

12.建立面板的過程

Ext.onReady(function(){    //這是extjs的規定寫法，必須這樣寫
	//panel
	Ext.create('Ext.panel.Panel',{   //建立pannel可以是Ext.panel.Panel，或Ext.Panel,不能是單獨的pannel或Pannel.同理，建立按鈕可用Ext.create('Ext.Button',{});
		title:'這是面板',
		width:'50%',
		height:'60%',
		html:'<div id="mydiv">這是div</div><input type="text" id="inp">',   //pannel中可加html元素
		renderTo:Ext.getBody(),   //通過該句使面板從記憶體顯示到頁面
		frame:true   //這句作用就是使面板有背景色，稜角圓潤些，更好看
	});
});

13.alias即給方法增加別名，在某些時候使用會很方便

var obj = {
		obj1:{
			obj2:{
				obj3:{
					say:function(){
						alert("哈哈")
					}
				}
			}
		}
	}
var myobj = Ext.Function.alias(obj.obj1.obj2.obj3,'say');
myobj();//該句的作用和obj.obj1.obj2.obj3.say()一樣，都出現一樣的結果

結果就是彈窗提示"哈哈"

正常情況下，若不起別名，想使用say方法，則要用obj.obj1.obj2.obj3.say(),這時就體現出別名的好處了，直接使用別名，而不是那一長串字元。

14.對於享元模式，用fly寫享元模式，與以前的寫法稍有不同，應該處理完一個內容再處理另一個，否則出錯。例如：

//fly則是利用享元模式
	var sp2 = Ext.fly('sp2');
	sp2.applyStyles({
		backgroundColor:'red',
		fontsize:'50px'
	});
	
	var sp1 = Ext.fly('sp1');
	sp1.applyStyles({
		backgroundColor:'yellow',
		fontsize:'20px'
	});

結果為：

若寫成這樣：

//fly則是利用享元模式
	var sp2 = Ext.fly('sp2');
	var sp1 = Ext.fly('sp1');
	sp1.applyStyles({
		backgroundColor:'yellow',
		fontsize:'20px'
	});
	
	sp2.applyStyles({
		backgroundColor:'red',
		fontsize:'50px'
	});

結果就變成：

誰在下邊就改誰，無論修飾的是不是該元素。這也是享元模式的特點。

15.js中的陣列是用[]括起來的，而在java中則是用{}包括。