元件建立了，就有方法找到這些元件。在dom、jquery都有各自的方法查詢元素/元件，extjs也有自己獨特的方式查詢元件、元素。本次從全域性查詢、容器內查詢、form表單查詢、通用元件等4個方面介紹元件的查詢方式。
1. 全域性查詢方式
2. 容器內查詢
3. form查詢子元件
4. 通用元件查詢方式
全域性查詢方式指在整個extjs框架中查詢元件。
說明：此方法是在所有元件中查詢匹配此id的元件。
引數：
①id ：元件的id。
返回值：
：返回匹配的元件；若沒有找到返回undefined。
示例：
// 獲取id為reg_form的元件
var form = ext.getcmp('reg_form');
①selector ：匹配規則，可以為元件的xtype、id(字首加上#)、屬性以及css selector。
②root 可選：指定在哪個容器內進行查詢。 若省略，將進行全域性查詢。
返回值：
：返回匹配的元件陣列；若沒有找到匹配的，返回乙個空陣列。
示例：
// 1.xtype查詢：獲取所有文字輸入框(xtype:textfield)
var textfieldarray = ext.componentquery.query('textfield');
// 2.id查詢
var formarray = ext.componentquery.query('#query_form');
// 3.xype+屬性查詢：指定from元件，並且title屬性的值為'表單'
var formarray = ext.componentquery.query('form[title=表單]');
// 4.屬性查詢：title屬性的值為'表單'的元件
var formarray = ext.componentquery.query('[title=表單]');
說明：此方法是在容器內的第一層子元件內進行查詢。
引數：
①selector ：匹配規則，可以為元件的xtype、id(字首加上#)、屬性以及css selector。
返回值：
：返回匹配的元件；若沒有找到匹配的，返回null。
示例：
// 返回form表單下的第一層 xtype為fieldcontainer 的子元件
var fc = ext.getcmp('query_form').child('fieldcontainer');
①selector 可選：匹配規則，可以為元件的xtype、id(字首加上#)、屬性以及css selector。若省略，返回第乙個子元件。
返回值：
：返回匹配的元件；若沒有找到匹配的，返回null。
示例：
// 返回form表單下的第乙個 xtype為textfield 的子元件
var txt = ext.getcmp('query_form').down('textfield');
①selector 可選：匹配規則，可以為元件的xtype、id(字首加上#)、屬性以及css selector。若省略，返回所有子元件。
返回值：
：返回匹配的子元件陣列；若沒有找到匹配的，返回乙個空陣列。
示例：
// 返回form表單下的所有 xtype為textfield 的子元件
var txtarray = ext.getcmp('query_form').query('textfield');
①fn ：匹配函式；容器內的每個元件都會呼叫此函式，函式內返回false不會出現在返回的元件集合裡。
②scope 可選：作用域。 若省略，為呼叫的子元件。
返回值：
：返回匹配的子元件陣列；若沒有找到匹配的，返回乙個空陣列。
示例：
// 返回表單內有內容的元件
var cparray = ext.getcmp('query_form').queryby(function(cp)
return false;
})
引數：
①id ：元件的id，不需要加字首'#'；等同於containerobj.down('#' + id)。
返回值：
：返回匹配的子元件；若沒有找到匹配的，返回null。
示例：
// 獲取表單內id為 a1 的元件
var cp = ext.getcmp('query_form').querybyid('a1');
引數：
①id/name ：元件的id或name。
返回值：
返回匹配的表單元件；若沒有找到，返回null。
示例：
ext.create('ext.form.panel', ,,]
})
ext.getcmp('login_form').getform().findfield('loginname'); // 獲取登入名元件
ext.getcmp('login_form').getform().findfield('loginpwd'); // 獲取密碼元件
① up() : 向上查詢祖先容器。
② previoussibling() ：向上查詢兄弟元件(同一層級)。
③ nextsibling() ：向下查詢兄弟元件(同一層級)。
引數：
①selector 可選：匹配規則，可以為元件的xtype、id(字首加上#)、屬性以及css selector。若省略，返回第乙個上級父容器。
返回值：
：返回匹配的父容器；若沒有找到匹配的，返回null。
說明：可簡寫為 prev()。
引數：
①selector 可選：匹配規則，可以為元件的xtype、id(字首加上#)、屬性以及css selector。若省略，返回第乙個上級父容器。
返回值：
：返回匹配的元件；若沒有找到匹配的，返回null。
說明：可簡寫為next()。
引數：
①selector 可選：匹配規則，可以為元件的xtype、id(字首加上#)、屬性以及css selector。若省略，返回第乙個上級父容器。
返回值：
：返回匹配的元件；若沒有找到匹配的，返回null。
// 1.上級容器
var fc = txt.up(); // => fieldcontainer_b
var form = txt.up().up(); // => form表單
// 2.向上獲取同級元件
var txtb2 = txt.prev(); // => textfield_b2
var txtb1 = txt.prev().prev(); // => textfield_b1
// 3.向下獲取同級元件
var txtb4 = txt.next(); // => textfield_b4
var txtb5 = txt.next().next(); // => textfield_b5
web開發之路系列文章
ExtJs4 2的合併單元格
首先說明演算法非原創,感謝提供了絕大部分思路 我這兒就是改改 使4.1的 能適應在4.2裡而已.只是看到網上目前還沒有4.2合併單元格方法 貼出來拋磚引玉 也算是全宇宙首發吧 哈哈.這個方法並不完美 文末會提到 還請高手們幫忙改進 june8 ruantao1989 合併單元格 param grid...
EXTJS元件化 三 元件之間的曖昧關係
我忽然發現,菜鳥更願意與人分享他的學習成果.在開發過程中,當許多小組件拼合成乙個大元件之後,最先遇到的問題就是元件與元件之間的通訊和資料互動.如果你的元件封裝的比較死 即在建立的時候不需要配置屬性 則可以通過組建的自定義事件來完成元件與元件之間的專案呼叫.下面的介面其實沒有必要這麼做,這麼做的目的只...
四 元件的使用
元件可以直接通過new 關鍵子來建立，比如控制項乙個視窗，使用new ext.window 建立乙個 則使用new ext.gridpanel 除了一些普通的元件以外，一般都會在建構函式中通過傳遞構造引數來建立元件。元件的建構函式中一般都可以包含乙個物件，這個物件包含建立元件所需要的配置屬性及值，元...