Different ways of querying the container hierarchy in Sencha Touch 2

Today, we are going to see the three functions query(), child() and down() that are used to query the direct child and sublevel child component in the container hierarchy. Let's take the below code for our demonstration purpose and explains the various ways for querying the container hierarchy.

Code:

Ext.define('MyApp.view.TestTabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.testtabpanel',

    config: {
        items: [{
            xtype: 'container',
            title: 'Tab 1',
            itemId: 'container1',
            items: [{
                xtype: 'formpanel',
                height: '100%',
                itemId: 'formpanel',
                items: [{
                    xtype: 'textfield',
                    label: 'Name',
                    labelWrap: true,
                    name: 'name',
                    itemId: 'name',
                    required: true,
                    placeHolder: 'Enter Name'
                }, {
                    xtype: 'textfield',
                    label: 'Email',
                    labelWrap: true,
                    name: 'email',
                    itemId: 'email',
                    required: true,
                    placeHolder: 'Enter Email Address'
                }]
            }]
        }]
    }
});

In order to access the TabPanel Component (TestTabPanel) using Component Query. Here is the code.

var tabPanel = Ext.ComponentQuery.query('testtabpanel')[0];

Child():

The child() method will return only the direct children in a container. This method can accept id, itemId and xtype as parameters.

In order to access the Container component (with title Tab 1) using itemId. Here is the code.

var container = tabPanel.child('#container1');

If you try to access the FormPanel Component using child(). the below code will return NULL.

var formpanel = tabPanel.child('#formpanel');

Down():

The down() method is used to query all the sublevel  child components in a container not just direct children.This method can accept id, itemId and xtype as parameters and returns only one (first) matched component.

In order to access the FormPanel component using itemId. Here is the code.

var formpanel = tabPanel.down('#formpanel');

You can also access the child components (Name, Email) in the FormPanel Component. Here is the code

var namefield = tabPanel.down('#name');
var emailfield = tabPanel.down('#email');

Query();

The query() method is similar to down() method, which is used to query  all the sublevel child components in a container not just direct children.This method can accept id, itemId and xtype as parameters. Only difference is the return type, this method will return more than one matched components as an array.

In order to access the FormPanel component using itemId. Here is the code.

var formpanel = tabPanel.query('#formpanel')[0];

You can also access the child components (Name, Email) in the FormPanel Component. Here is the code

var namefield = tabPanel.query('#name')[0];
var emailfield = tabPanel.query('#email')[0];

Hope, you enjoyed this Post.