Question

我在extjs中创建动态容器。我有父项容器，其itemId是“ParentContainer”和子容器，其itemid是“ChildContainer”。现在我使用以下代码在父容器中添加子容器。

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

现在它工作正常，但问题是当我尝试使用以下代码检索父容器的所有子容器时，它只返回第一个子容器，但我需要所有子容器

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

我需要一个所有孩子的阵列，任何人都可以帮忙。感谢。

Answer 1

#ChildContainer处的哈希标记告诉我们您正在通过id获取组件。 id必须在您的网站上是唯一的，因此很自然地只返回一个组件。

据推测，您希望通过xtype（widget别名）获取所有孩子：

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

请注意，这不仅会为您提供该容器的所有孩子，还会为您提供孙子等等（适当的xtype）。

如果您只想获得直接子女，则您的查询应为

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

这将为您提供所有childcontainer小部件，这些小部件是ID为ParentContainer的容器的直接后代。

如果要获取所有直接后代（子项），无论xtype如何，par.items属性都包含容器par的所有子项的列表。

Answer 2

不确定原因，但 parent.query（）在子组件具有相同的＆＃34; itemId＆＃34;时未检索到所有子项。但 Ext.ComponentQuery.query（）会检索所有。

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
    }
});

如何在extjs中获取父容器的所有子级

2 个答案: