Ext JS provides singleton class Ext.ComponentQuery to search for components in the HTML page with a syntax similar to a CSS selector.
The Ext.ComponentQuery class provides different methods to perform different tasks e.g. adding properties in a component class, creating an object of a component, get config properties of a component, query to search components etc..
Components can be retrieved in the following ways.
Query Type | Description |
---|---|
xtype | Components can be retrieved by their xtype. |
itemId or id | Components can be retrieved by their id or itemId. The id must be prefixed with #. |
Attributes | Components can be retrieved by their attributes or config properties. |
descendant | Components can be retrieved by the descendant. |
Direct child | Components can be retrieved by the direct child relationship. |
Parent | Ext.ComponentQuery.query('textfield ^ panel'); // retrieves all the panels which is parent of a textfield.
|
The following example demonstrates how to search components using Ext.ComponentQuery.query() method.
Ext.onReady(function () { Ext.create('Ext.container.Container', { id:'myContainer', renderTo: Ext.getBody(), padding: '5 5 5 5', layout: { type: 'vbox' }, items: [ { xtype: 'textfield', fieldLabel:'First Name' }, { xtype: 'textfield', fieldLabel: 'Last Name' }, { xtype: 'panel', layout:'vbox', items: [ { xtype: 'datefield', fieldLabel: 'Date of Birth' }, { xtype: 'container', items: [ { xtype: 'textfield', fieldLabel: 'email', itemId:'email' } ] } ] } ] }); var dateFields = Ext.ComponentQuery.query('container datefield'); console.log('DateField in Containers: '); console.log(dateFields); var dateFieldsInPanels = Ext.ComponentQuery.query('panel > datefield'); console.log('Child DateField in Panel: ' ); console.log(dateFieldsInPanels); var emailInMyContainer = Ext.ComponentQuery.query('#myContainer > #email'); console.log('#email inside #myContainer'); console.log(emailInMyContainer); });
Try it on https://fiddle.sencha.com/#fiddle/sb6
In the above example, the first query 'container datefield' searches all the datefield components inside any container in a document.
The second query 'panel > datefield' searches for all the datefields which is direct child of panel.
The third query '#myContainer #email' searches for the component whose id is 'email' inside a container whose id is 'myContainer'.
See Sencha documentation to learn more about Ext.ComponentQuery