How to get child item reference in a container on Sencha Touch 2

My previous post explains how to get all the inner (child) elements in the container. Today, we are going to see how to get reference of the child items in the container using query() method.

This query() method will be used to get the reference of the child items present at any level in the parent tree.


Let me demonstrate this by providing an example (taken from previous post)

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.Container',

    config: {
        itemId: 'mycontainer',

        items: [{

            xtype: 'toolbar',
            docked: 'top',
            itemId: 'containertoolbar',
            title: 'Container Demo'

        }, {

            xtype: 'formpanel',
            itemId: 'containerformpanel',
            minHeight: '50%',

            items: [{
                xtype: 'textfield',
                itemId: 'username',
                label: 'Username',
                labelWrap: true,
                placeHolder: 'Enter Username'
            }, {
                xtype: 'passwordfield',
                itemId: 'password',
                label: 'Password',
                labelWrap: true,
                placeHolder: 'Enter Password'
            }]
        }, {

            xtype: 'panel',
            height: '100%',
            html: 'This is Panel',
            itemId: 'containerpanel',
            style: 'background-color:orange;',
            styleHtmlContent: true
        }]
   }
});

Explanation:

We have a container with three direct child items (toolbar, form panel, panel). Inside form panel, there are two text fields (Username, Password). Each child items contains the unique id using itemId configuration, which is used to get the reference of the child item.

Following is the output, when i run the above code in the Google Chrome

In order to get the reference of the main container, we are going to use Ext.ComponentQuery.query() method which will return array.

var maincontainer = Ext.ComponentQuery.query('container#mycontainer')[0];

After that, if you want to access the username textfield present inside the form panel using the itemId configuration which will return an array, here is the code

var usernameObj = maincontainer.query('#username')[0];

if you want to access the panel component (direct child item of the container) using the itemId configuration which will return an array, here is the code

var panelObj = maincontainer.query('#containerpanel')[0];

Hope, you enjoyed this Post.