認識ExtJs的開發包
下載路徑：http://www.sencha.com/products/extjs/download/
解壓有20多兆，別怕，真正執行的沒這麼大。認識下這個包的檔案結構吧。
- builds目錄是ExtJs壓縮後的程式碼，經過壓縮後的程式碼體積小，載入快。
- docs中是ExtJs文件，包括ExtJs的API,算是開發過程中必備法寶啦吧。
- examples中是官方的演示例項。
- locale是多國語言的資原始檔，其中ext-lang-zh_CN.js是簡體中文，把他引入頁面中，會將提示等顯示資訊自動轉化為中文簡體。
- overview是ExtJs的功能簡述，其中從整體上闡述啦ExtJs的功能和結構。
- pkgs中是ExtJs各部分功能的打包檔案
- resource是ExtJs要用到的圖片檔案與樣式表檔案，ExtJs引以為傲的漂亮外觀就全部由這個目錄中的檔案所控制。
- src是未壓縮的原始碼目錄。
- bootstrap.js是ExtJs庫的引導檔案，通過引數可以自動切換ext-all.js和ext-all-debyg.js。
- ext-all.js檔案是ExtJs的核心庫，是必須要引入的。
- ext-all-debug.js檔案是ext-all.js的除錯版，在除錯時需要使用的除錯版本檔案。
ExtJs命名規範
1.類的命名規範
- 類名僅可包含字母、數字。數字大多數情況下不推薦使用，除非是在一些技術術語中。不要使用中劃線、下劃線等非字元
MyCompany.useful_util.Debug_Toolbar //不要使用下劃線
MyCompany.util.Base64 //技術術語可以包含數字 -
類應該通過正確命名的“包（Packages）”來組織。最小包情況時，類名應該緊隨最頂層的“名字空間（Namespace）”：
MyCompany.data.CoolProxy //“包”通過“.”來組織 MyCompany.Application //最小包情況
-
最頂層的“名字空間（Namespaces）”和“類名（ClassNames）”應該使用“駝峰命名法（CamelCased）”，其他都是用小寫字母：
MyCompany.form.action.AutoLoad -
非Sencha官方釋出的類，不要使用“Ext”作為最頂層名字空間。
-
縮寫詞也要遵守“駝峰命名法（CamelCased）” ：
Ext.data.JSONProxy 替換為Ext.data.JsonProxy MyCompary.parser.HTMLParser 替換為 MyCompany.util.HtmlParser MyCompany.server.HTTP 替換為MyCompany.server.Http
2、原始檔的命名規則
- 類名直接對映到檔案儲存路徑，每個類一個檔案：
Ext.util.Observable 儲存在 path/to/src/Ext/util/Observable.js Ext.form.action.Submit 儲存在 path/to/src/Ext/form/action/Submit.js MyOrg.chart.axis.Numeric 儲存在 path/to/src/MyOrg/chart/axis/Numeric.js
3、方法和變數的命名規則
- 方法和變數命名同類一樣，僅可包含字母、數字。數字大多數情況下不推薦使用，除非是在一些技術術語中。不要使用中劃線、下劃線等非字元；
- 方法和變數命名應該使用“駝峰命名法（CamelCased）”，縮寫詞也一樣；
encodeUsingMd5() //技術術語可以包含數字 getHTML() //替換為getHtml() getJSONResponse() //替換為getJsonResponse() parseXMLContent() //替換為parseXmlContent() var isGoodName var base64Encoder //技術術語可以包含數字 var xmlReader var httpServer
4、屬性的命名規則
-
非靜態的類屬性命名規則同上；
-
靜態的類屬性命名全部使用大寫字母：
EXT基本方法、屬性（onReady、define、create）
onReady:只有在Ext框架全部載入完後才能在客戶端的程式碼中使用Ext，而Ext的onReady正是用來註冊在Ext框架及頁面的html程式碼載入完後，所要執行的函式。
呼叫onReady方法時可以帶三個引數，
第一個引數是必須的，表示要執行的函式或匿名函式，
第二參數列示函式的作用域，
第三個參數列示函式執行的一些其它特性，比如延遲多少毫秒執行等，大多數情況下只需要第一個引數即可。
<script type="text/javascript">
function sayHellow() {
alert("hi , everyone !"); //可執行
Ext.Msg.alert("title", "hi , everyone !"); //報錯，關於呈現Ext元素元件的都只能在onReady中執行。
}
sayHellow()
// Ext.onReady(sayHellow);
</script>
define：建立類，可以繼承其他類，也可以被繼承
Ext.onReady(function () { //建立一個類，類名：TextClass，具有兩個屬性：A、B Ext.define('TextClass', { A: 'a', B: 'b' }); //例項化類 var textClass = new TextClass(); //輸出屬性名 Ext.Msg.alert('類屬性', textClass.A + " " + textClass.B); //textClass.A結果為a，textClass.B結果為b });
Ext.onReady(function () { //建立一個類，類名：TextClass，具有兩個屬性：A、B Ext.define('TextClass', { A: 'a', B: 'b' }); //建立一個類，繼承TextClass Ext.define("TextClass2", { extend: 'TextClass', //繼承TextClass C: 'c'//TextClass2特有的屬性 }) var textClass2 = new TextClass2(); Ext.Msg.alert("TextClass2屬性", textClass2.A + " " + textClass2.B + " " + textClass2.C) //輸出結果為 a b c });
create ：例項化類，在EXTJS4中建議用create方法例項化類
Ext.onReady(function () { //建立一個類，類名：TextClass，具有兩個屬性：A、B Ext.define('TextClass', { A: 'a', B: 'b' }); var textClass = Ext.create("TextClass") Ext.Msg.alert('textClass屬性', textClass.A + ' ' + textClass.B) //輸出結果為 a b });
EXT基本方法、屬性（apply、applyIf、constructor）
ExtJS物件導向 這文中有介紹。
Ext.onReady(function () { //建立一個類，類名：TextClass，具有兩個屬性：A、B Ext.define('TextClass', { A: 'a', B: 'b', constructor: function (o) { //複製o中的所有屬性到自身 Ext.apply(this, o); } }); var textClass = Ext.create("TextClass", { A: 'A', B: 'B', C: 'C' }) Ext.Msg.alert('textClass屬性', textClass.A + ' ' + textClass.B + ' ' + textClass.C) //顯示 ： A B C });
Ext.onReady(function () { //建立一個類，類名：TextClass，具有兩個屬性：A、B Ext.define('TextClass', { A: 'a', B: 'b', constructor: function (o) { //複製o中的所有屬性到自身,如果類中存在同名屬性，就不復制 Ext.applyIf(this, o); } }); var textClass = Ext.create("TextClass", { A: 'A', B: 'B', C: 'C' }) Ext.Msg.alert('textClass屬性', textClass.A + ' ' + textClass.B + ' ' + textClass.C) //顯示 a b C });
EXT基本方法、屬性（mixins、statics、config、require）
mixins：類似於物件導向中的多繼承
Ext.onReady(function () { //建立一個類，類名：TextClass，具有兩個屬性：A、B Ext.define('TextClass', { A: 'a', B: 'b' }); //建立一個類，類名：TextClass，具有兩個屬性：A、B Ext.define('TextClass2', { C: 'c', write: function () { alert('A:' + this.A + ';B:' + this.B + ';C:' + this.C) } }) Ext.define('TextClass3', { //繼承TextClass、TextClass2 mixins: { TextClass: 'TextClass', TextClass2: 'TextClass2' } }) var textClass = Ext.create("TextClass3") textClass.write(); //顯示結果：A:a;B:b;C:c });
statics：定義靜態變數
Ext.onReady(function () { //建立一個類，類名：TextClass，具有兩個屬性：A、B Ext.define('TextClass', { A: 'a', B: 'b', statics: { C: 'C' } }); //沒有例項化TextClass類 Ext.Msg.alert('TextClass類的靜態屬性C的值是：', TextClass.C) //顯示結果：C });
config：屬性包裝器，為屬性提供get和set方法
Ext.onReady(function () { //建立一個類，類名：TextClass，具有兩個屬性：A、B Ext.define('TextClass', { A: 'a', B: 'b', statics: { C: 'C' }, config: { configProperty: 'how can i get this property' } }); var textClass = Ext.create('TextClass'); //通過set方法設定屬性的值，注意，包裝器會把屬性的頭字母大寫 textClass.setConfigProperty("set this property's value"); //通過get方法展示屬性值 Ext.Msg.alert('configProperty屬性的值是：', textClass.getConfigProperty()); //顯示結果：set this property's value });
require：動態載入js檔案，這個頁面需要用到哪些元件,然後就預先載入,多餘不用載入的元件就不管他.提高執行速度.一般寫在指令碼開始的地方。
Ext.require([ 'Ext.tab.*', 'Ext.window.*', 'Ext.tip.*', 'Ext.layout.container.Border' ]);
EXT物件選擇
Ext物件分為3種：htm控制元件，EXTJS元素，EXTJS元件（html控制元件--封裝-->ExtJs元素--封裝-->extjs元件）
- 選擇html控制元件：Ext.getDom(物件的ID)
- 選擇EXT元素：Ext.get(物件的ID)
- 選擇EXT元件：Ext.getCmp(物件的ID)
1、Ext.getDom和Ext.get方法
<html>
<head>
<title>Index</title>
<link href="Extjs4/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Extjs4/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
//通過Ext.get方法獲取第一個文字框物件，返回的是Ext元素
Ext.get("text1").set({
value: 'Ext.get方法獲取的Ext元素'
});
//通過Ext.getDom方法獲取第二個文字框物件，返回的是html控制元件
Ext.getDom("text2").value = "Ext.getDom方法獲取的html控制元件";
//通過Ext.get方法獲取第三個文字框物件，返回的是Ext元素，通過Ext元素的dom屬性，返回html控制元件
//注：通過EXT元素的dom屬性，可以將EXT元素轉換為對應的html控制元件
Ext.get("text3").dom.value = "Ext.get方法獲取的Ext元素,通過dom屬性轉化為html控制元件"
});
</script>
</head>
<body>
<div id="Ext4-Panel">
輸入框1：<input type="text" id="text1" style="width:400px"/><br />
輸入框2：<input type="text" id="text2" style="width:400px"/><br />
輸入框3：<input type="text" id="text3" style="width:400px"/><br />
<input type="button" id="show" value="展示選擇結果" />
</div>
</body>
</html>
2、Ext.getCmp方法
<html>
<head>
<title>Index</title>
<link href="Extjs4/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Extjs4/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
//建立一個panel
Ext.create("Ext.panel.Panel", {
//id
id: 'myPanel',
//標題
title: 'Ext的panel元件',
//渲染到id為“ExtComponent”的<div>標籤
renderTo: 'ExtComponent',
//寬
width: 300,
//高
height: 300
})
setTimeout('Ext.getCmp("myPanel").setTitle("使用getCmp獲取元件")', 5000); //5秒後標題變為：“使用getCmp獲取元件”
});
</script>
</head>
<body>
<div id="ExtComponent">
</div>
</body>
</html>
3、通過CSS語法選擇EXT元件
<html>
<head>
<title>Index</title>
<link href="Extjs4/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Extjs4/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
//建立一個panel
Ext.create("Ext.panel.Panel", {
//標題
title: '第一個panel',
//渲染到id為“myPanel1”的<div>標籤
renderTo: 'myPanel1',
//寬
width: 300,
//高
height: 100,
items: [{
//這個panel包含一個textfield元件
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
}, {
//這個panel包含一個textfield元件
xtype: 'textfield',
name: 'age',
fieldLabel: 'Age'
}]
})
//建立一個panel
Ext.create("Ext.panel.Panel", {
title: '第二個panel',
renderTo: 'myPanel2',
width: 300,
height: 150,
items: [{
//這個panel包含另一個panel
xtype: 'panel',
height: '50',
items: [{
//被包含的panel包含一個textfield元件
xtype: 'textfield',
name: 'telephone',
fieldLabel: 'Telephone'
}]
}, {
//這個panel包含一個textfield元件
xtype: 'textfield',
name: 'address',
fieldLabel: 'address'
}]
})
var one = Ext.ComponentQuery.query("panel [title=第一個panel]")[0].title;
//Ext.Msg.alert("Title", one); //顯示結果 : 第一個panel
Ext.ComponentQuery.query("textfield")[0].value = "123";
var two = Ext.ComponentQuery.query("textfield")[2].name;
//第一個textfield元件並不是標題為name的那個文字框（第三個才是），
//這是應為EXT框架會根據需要自動生成一些元件，所以在選擇特定元件的時候，最好不要通過索引，而是通過特定的屬性
//Ext.Msg.alert("Title", two); //顯示結果 : name
var three = Ext.ComponentQuery.query('textfield[name=name]')[0].name;
Ext.Msg.alert("Title", three); //顯示結果 : name
//獲取標題為“第二個panel”的panel元件下面的所有textfiled元件
Ext.ComponentQuery.query('panel[title=第二個panel] textfield')
//獲取標題為“第二個panel”的panel元件下一層的所有textfiled元件
Ext.ComponentQuery.query('panel[title=第二個panel]>textfield')
});
</script>
</head>
<body>
<div id="myPanel1">
</div>
<div id="myPanel2">
</div>
</body>
</html>
4、up、down、child方法
up：根據CSS語法獲取當前元件上層的控制元件，如果有多個符合條件，只返回第一個
down:根據CSS語法獲取當前元件下層的控制元件，如果有多個符合條件，只返回第一個
child:根據CSS語法獲取當前元件下一層的控制元件，如果有多個符合條件，只返回第一個
up方法：
//獲取屬性name為telephone的textfield元件 var t = Ext.ComponentQuery.query("textfield[name=telephone]")[0] //獲取元件t上面的第一個panel元件 t.up("panel");
child方法：
//獲取屬性title為"第二個panel"的panel元件 var t = Ext.ComponentQuery.query("panel[title=第二個panel]")[0] //獲取元件t下面一層的屬性name為“address”的textfield元件 t.child("textfield[name=address]");
down方法：
//獲取屬性title為"第二個panel"的panel元件 var t = Ext.ComponentQuery.query("panel[title=第二個panel]")[0] //獲取元件t下面一層的屬性name為“address”的textfield元件 //注意，用child方法時無法取到了，因為child方法只能取元件t下面一層的控制元件 t.down("textfield[name=telephone]");
.