extjsで親コンテナのすべての子を取得する方法

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はサイト全体で一意でなければならないので、1つのコンポーネントだけが返されるのは当然です。

は、おそらくあなたはXTYPE（ウィジェットの別名）ですべての子を取得したい：

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

これが適切なのあなたにすべてのそのコンテナの子でなく、孫を与えるというように（だけではないことに注意してくださいxtype）。

あなたが唯一の直接の子を取得したい場合は、クエリが

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

する必要がありますこれは、あなたのID ParentContainerを使用して、コンテナの直接の子孫であるすべてのchildcontainerウィジェットを取得します。

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