認識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]");
.