How to get all childs of the parent container in extjs

Question

I am creating dynamic containers in extjs. I have parent container whose itemId is "ParentContainer" and child container whose itemid is "ChildContainer". Now I am adding child container inside parent container by using the following code.

var child = Ext.createWidget('childcontainer');
var parent = Ext.ComponentQuery.query('#ParentContainer')[0];
parent.add(child);

Now its working fine but the issue is when I am trying to retrieve all the childs of the parent container by using the following code, it only returns first child but I need all of the childs

var par = Ext.ComponentQuery.query('#ParentContainer')[0];
var childs = par.query('#ChildContainer');

I need an array of all the childs, can anybody help. Thanks.

score 1 · Answer 1 · answered Nov 09 '16 at 20:27

The hash tag at #ChildContainer tells us that you are getting the component by id. The id has to be unique across your site, so it's natural that only one component is returned.

Presumably you wanted to get all children by xtype (widget alias):

var childs = par.query('childcontainer');

Please note that this does not only give you all children of that container, but also grandchildren and so on (of the appropriate xtype).

If you only want to get direct children, your query should be

Ext.ComponentQuery.query('#ParentContainer>childcontainer')

This gets you all childcontainer widgets that are direct descendants of your container with ID ParentContainer.

If you want to get all direct descendants (children), regardless of xtype, the par.items property contains a list of all children of the container par.

Hash tag at #ChildContainer can also be used to get by itemId which maynot be unique unlike "Id" — Srikanth, Nov 09 '16 at 20:33

score 0 · Answer 2 · answered Nov 09 '16 at 21:21

Not sure why, but parent.query() is not retrieving all children when the child components have same "itemId". But the Ext.ComponentQuery.query() does retrieve all.

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var containerPanel = Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            itemId: 'parentPanel',
            width: 400,
            height: 200,
            title: 'Container Panel',
            layout: 'column'
        });

        containerPanel.add({
            xtype: 'panel',
            itemId: 'childPanel',
            title: 'Child Panel 1',
            height: 100,
            columnWidth: 0.5
        });
        containerPanel.add({
            xtype: 'panel',
            itemId: 'childPanel',
            title: 'Child Panel 2',
            height: 100,
            columnWidth: 0.5
        });
        var parent = Ext.ComponentQuery.query("#parentPanel")[0];
        alert(parent.title);
        //using parent.query() retrieves only one child panel
        var childsArray1 = parent.query("#childPanel");
        alert("childs1 length ->" + childsArray1.length); //length is 1

        //using Ext.ComponentQuery.query() retrieves both child panels
        var childsArray2 = Ext.ComponentQuery.query('#childPanel');
        alert("childsArray2 length ->" + childsArray2.length); //length is 2
    }
});

How to get all childs of the parent container in extjs

2 Answers2