Once the components are created, there is a way to find them. DOM and Jquery have their own methods to find elements/components, and ExtJS also has its own unique way to find components and elements. This time, we introduce the search method of components from four aspects: global search, in-container search, form search, and common components.
content
4. How to find common components
1. Global search method
The global search method refers to finding components in the entire ExtJS framework.
1.1 Ext.getCmp(id) : Returns the component corresponding to this id
Description : This method is to find a component matching this id among all components.
Parameters :
①id {string} : The id of the component.
Return value :
{Ext.Component} : Returns the matching component; returns undefined if not found.
Example :
|
1
2
|
// 获取id为reg_form的组件
var
form = Ext.getCmp(
'reg_form'
);
|
1.2 Ext.ComponentQuery.query(selector, [root]) : returns an array of matching components
Parameters :
①selector {string} : Matching rules, which can be the xtype, id (prefix with #), attributes and Css Selector of the component.
②root {Ext.container.Container} Optional: specify which container to query. If omitted, a global lookup will be performed.
Return value :
{Ext.Component[]} : Returns an array of matched components; if no match is found, returns an empty array.
Example :
|
1
2
3
4
5
6
7
8
9
10
11
|
// 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=表单]'
);
|
2. Find inside the container
The following methods are used to find the corresponding subcomponent or subcontainer within the container type component .
2.1 containerObj.child(selecter) : Returns the first matching first-level child component
Description : This method is to find in the first level of subcomponents in the container.
Parameters :
①selector {string} : Matching rules, which can be the xtype, id (prefix with #), attributes and Css Selector of the component.
Return value :
{Ext.Component} : Returns the matching component; if no match is found, returns null.
Example :
|
1
2
|
// 返回form表单下的第一层 xtype为fieldcontainer 的子组件
var
fc = Ext.getCmp(
'query_form'
).child(
'fieldcontainer'
);
|
2.2 containerObj.down([selecter]) : Returns the first matching subcomponent
Parameters :
①selector {string} Optional: matching rules, which can be the component's xtype, id (prefix with #), attributes, and Css Selector. If omitted, returns the first child component.
Return value :
{Ext.Component} : Returns the matching component; if no match is found, returns null.
Example :
|
1
2
|
// 返回form表单下的第一个 xtype为textfield 的子组件
var
txt = Ext.getCmp(
'query_form'
).down(
'textfield'
);
|
2.3 containerObj.query([selecter]) : Returns an array of components, including sub-components in the current container that meet the matching rules
Parameters :
①selector {string} Optional: matching rules, which can be the component's xtype, id (prefix with #), attributes, and Css Selector. If omitted, all child components are returned.
Return value :
{Ext.Component[]} : Returns an array of matched subcomponents; if no match is found, returns an empty array.
Example:
|
1
2
|
// 返回form表单下的所有 xtype为textfield 的子组件
var
txtArray = Ext.getCmp(
'query_form'
).query(
'textfield'
);
|
2.4 containerObj.queryBy(fn, [scope]) : Returns an array of components, including the sub-components of the current container function condition
Parameters :
①fn {function} : matching function; each component in the container will call this function, and the return false in the function will not appear in the returned component set.
②scope {object} Optional: scope. If omitted, it is the child component of the call.
Return value :
{Ext.Component[]} : Returns an array of matched subcomponents; if no match is found, returns an empty array.
Example :
|
1
2
3
4
5
6
7
|
// 返回表单内有内容的组件
var
cpArray = Ext.getCmp(
'query_form'
).queryBy(
function
(cp){
if
(cp.getValue){
return
cp.getValue().length>0;
}
return
false
;
})
|
Note : Only when the fn function returns false, this component will not be added to the returned component array; return undefined, null will be added to the component array.
2.5 containerObj. queryById(id) : Returns a child component in a container that matches this id
Parameters :
①id {string} : The id of the component, without prefix '#'; equivalent to containerObj.down('#' + id).
Return value :
{Ext.Component} : Returns the matched child component; if no match is found, returns null.
Example :
|
1
2
|
// 获取表单内Id为 A1 的组件
var
cp = Ext.getCmp(
'query_form'
).queryById(
'A1'
);
|
3. form find child component
Not all components will be assigned an Id, and most of the components in the form form use the name attribute.
3.1 formObj.getForm().findField(id/name) : Returns the form component with the specified id or name in the form
Parameters :
①id/name {string}: The id or name of the component.
Return value :
{Ext.form.field.Field} returns the matching form component; if not found, returns null.
Example :
Login form:
|
1
2
3
4
5
6
7
8
|
Ext.create(
'Ext.form.Panel'
, {
id:
'login_form'
,
title:
'登录'
,
items:[
{ xtype:
'textfield'
, name:
'loginName'
,fieldLabel:
'登录名'
},
{ xtype:
'textfield'
, name:
'loginPwd'
,fieldLabel:
'密码'
},
]
})
|
Get the value :
|
1
2
|
Ext.getCmp(
'login_form'
).getForm().findField(
'loginName'
);
// 获取登录名组件
Ext.getCmp(
'login_form'
).getForm().findField(
'loginPwd'
);
// 获取密码组件
|
4. How to find common components
The general component search method refers to the search method supported by all components, mainly including the following:
① up() : Find ancestor containers up.
② previousSibling() : Find sibling components (same level) up.
③ nextSibling() : Look down for sibling components (same level).
4.1 c omponentObj.up ([ selecter ]) : returns the matched ancestor container
Parameters :
①selector {string} Optional: matching rules, which can be the component's xtype, id (prefix with #), attributes, and Css Selector. If omitted, returns the first superior parent container.
Return value :
{Ext.container.Container} : Returns the matching parent container; if no match is found, returns null.
4.2 componentObj.previousSibling([selecter]) : Returns the sibling component found up (same level)
Description : Can be abbreviated as prev().
Parameters :
①selector {string} Optional: matching rules, which can be the component's xtype, id (prefix with #), attributes, and Css Selector. If omitted, returns the first superior parent container.
Return value :
{Ext.Component} : Returns the matching component; if no match is found, returns null.
4.3 componentObj.nextSibling([selecter]) : Returns the sibling component (same level) found down
Description : Can be abbreviated as next().
Parameters :
①selector {string} Optional: matching rules, which can be the component's xtype, id (prefix with #), attributes, and Css Selector. If omitted, returns the first superior parent container.
Return value :
{Ext.Component} : Returns the matching component; if no match is found, returns null.
Example
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
txt = Ext.getCmp(
'textfield_B3'
);
// 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
|