Как получить все дочерние элементы родительского контейнера в extjs

Question

Я создаю динамические контейнеры в extjs. У меня есть родительский контейнер, itemId которого является «ParentContainer» и дочерним контейнером, чей элемент является «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. Идентификатор должен быть уникальным на вашем сайте, поэтому естественно, что возвращается только один компонент.

Предположительно вы хотели получить все дети от xtype (виджет псевдоним):

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

Обратите внимание, что это не только даст вам все дети этого контейнера, но и внуки, и так далее (из соответствующих xtype).

Если вы хотите, чтобы получить прямые детей, ваш запрос должен быть

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

Это получает вас все childcontainer виджетов, которые являются прямыми потомками вашего контейнера с ID ParentContainer.

Если вы хотите получить все прямые потомки (дети), независимо от xtype, свойство par.items содержит список всех детей из контейнера par.

Answer 2

Не знаете почему, но parent.query() не извлекает всех детей, когда дочерние компоненты имеют одинаковый «itemId». Но 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 
    } 
});