how to get all child items in container on Sencha Touch 2

In my project, there came a situation to get all the child items in a container. After searching Sencha API documentation, I found the getInnerItems() method which i like to share here.

This method will returns all the inner items of a container. inner means that the item is not docked or floating.


Let me demonstrate this by providing an example

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, in order to get all the inner items of the container we need to use getInnerItems() which will return array.

var innerItems = maincontainer.getInnerItems();
console.log(innerItems);

You can view the list of inner items in the browser console output using console.log() something like this

Hope, you enjoyed this Post.