一、Ext對象分為3種：htm控件，EXTJS元素，EXTJS組件
二、Ext選擇對象的方法：
選擇html控件：Ext.getDom(對象的ID)
選擇EXT元素：Ext.get(對象的ID)
選擇EXT組件：Ext.getCmp(對象的ID)
例子1(Ext.getDom和Ext.get方法)：
<html>
<head>
<title>Index</title>
<link href="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/resources/css/ext-all.css"
rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/ext-all-dev.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方法)：
首先，我們使用Ext.panel.Panel組件創建一個panel
<html>
<head>
<title>Index</title>
<link href="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/resources/css/ext-all.css"
rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/ext-all-dev.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
})
});
</script>
</head>
<body>
<div id="ExtComponent">
</div>
</body>
</html>
執行結果：
通過getCmp方法獲取生產的panel組件，改變他的標題
//通過Ext.getCmp方法獲取組件，改變組件的標題
Ext.getCmp("myPanel").setTitle("使用getCmp獲取組件")
執行結果：
注：Ext組件一般有一個方法可以把當前組件轉換為Ext元素，如From組件的getForm方法，textfield組件的getEl()方法，詳見EXT文檔
三、通過CSS語法選擇EXT組件
說明:在EXTJS4中，提供了query方法，通過CSS語法，查詢EXTJS4組件
注：query方法返回的是一個對象集而不是單個對象
例子：
首先，我們定義一個頁面：
<html>
<head>
<title>Index</title>
<link href="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/resources/css/ext-all.css"
rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/ext-all-dev.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',
//渲染到id為“myPanel2”的<div>標簽
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'
}]
})
});
</script>
</head>
<body>
<div id="myPanel1">
</div>
<div id="myPanel2">
</div>
</body>
</html>
執行結果：
獲取第一個panel，通過panel的title屬性：
Ext.ComponentQuery.query("panel [title=第一個panel]")[0]
獲取第一個textfield：
Ext.ComponentQuery.query("textfield")[0];
注意：第一個textfield組件並不是標題為name的那個文本框（第三個才是），這是應為EXT框架會根據需要自動生成一些組件，所以在選擇特定組件的時候，最好不要通過索引，而是通過特定的屬性
獲取標題為name的textfield控件
Ext.ComponentQuery.query('textfield[name=name]')
獲取標題為“第二個panel”的panel組件下面的所有textfiled組件
Ext.ComponentQuery.query('panel[title=第二個panel] textfield')
獲取標題為“第二個panel”的panel組件下一層的所有textfiled組件
Ext.ComponentQuery.query('panel[title=第二個panel]>textfield')
四、up、down、child方法
說明：
up：根據CSS語法獲取當前組件上層的控件，如果有多個符合條件，只返回第一個
down:根據CSS語法獲取當前組件下層的控件，如果有多個符合條件，只返回第一個
child:根據CSS語法獲取當前組件下一層的控件，如果有多個符合條件，只返回第一個
例子：
采用講述query方法時使用的頁面
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]");