---

• Next »
• « Previous

ComponentQuery:

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

---

---

• Next »
• « Previous