Ext JS xtypeでコンテナからGUIアイテムを削除する

Question

パネルには3つの項目があります。最後の項目にはイベントハンドラのアタッチがあります。ハンドラでは、新しい項目（ウィジェット）が親パネルに追加されます。新しい項目を追加する前に、同じxtypeの古い項目を削除する必要があります。ここで

は動作しない例である：

Ext.define('Retroplanner.view.dimension.DimensionMapping', { 
    extend: 'Ext.form.Panel', 

    defaultListenerScope: true, 

    items: [{ 
      xtype: 'component', 
      html: '<h3> Dimension Mappings</h3>', 
     },{ 
      xtype: 'bm-separator' 
     },{ 
      xtype: 'siRemoteCombo', 
      ... 
      listeners: { 
       'select': 'onSiRemoteCombo' 
      } 
     } 
    ], 

    onSiRemoteCombo: function(cmb, rec, idx) {  
     var item; 
     for(item in this.items){ 
      //here item - is undefined, 
      //although this.items.length=3, as expected 
      //alert(item.xtype); 
      //isXType is not defined for undefined element: 
      if (item.isXType('propGrid')) { 
       this.remove(item); 
       break; 
      } 
     } 
     //the following code works as expected, if the previous is commented 
     var dimensionMapping = Ext.widget('propGrid'); 
     this.items.add(dimensionMapping); 
     this.updateLayout(); 
    } 
}); 

私はインデックスを使用しようとしましたが、それも動作しません。

Ext.define('Retroplanner.view.dimension.DimensionMapping', { 
... 
    defaultListenerScope: true, 

    items: [{ 
      xtype: 'component', 
      ... 
     },{ 
      xtype: 'bm-separator' 
     },{ 
      xtype: 'siRemoteCombo', 
      ... 
      listeners: { 
       'select': 'onSiRemoteCombo' 
      } 
     } 
    ], 

    onSiRemoteCombo: function(cmb, rec, idx) { 
     //the following code does not remove item in GUI interface. 
     if (this.items.length == 4) 
      this.remove(this.items[3], true); 

     var dimensionMapping = Ext.widget('propGrid'); 
     this.items.add(dimensionMapping); 
     this.updateLayout(); 
    } 
}); 

私はでアイテムを削除できるようにしたいと思いますxtypeには、idや他のタイプの参照がありません。しかし、それができない場合は、それを行う最善の方法は何ですか？ GUIコンポーネントをそのコンテナから削除する。

Answer 1

チェックアウトcomponent queries ExtJSコンポーネントの属性に基づいて、グローバルに、またはコンテナ内でExtJSコンポーネントを検索することができます。 Ext.container.Container#query、Ext.container.Container#downと Ext.container.Container#child方法を参照して、特定の容器からベースのクエリに簡単にアクセスするため

。また、Ext.Component#upを参照してください。

downまたはchildが適切です。このようなもの：

this.remove(this.down('propGrid')) 

ここでは動作中のフィドルです：https://fiddle.sencha.com/#view/editor&fiddle/27vhです。コンボから値を選択するだけで、グリッドが削除されます。

Answer 2

このしようと、prodGrid XTYPEで項目を削除するには：あなたはちょうど `this.remove（this.down（ 'propGridを'））行うことができるはず

onSiRemoteCombo: function(cmb, rec, idx) { 
    if (this.down('prodGrid')) 
     this.remove(this.down('prodGrid')) 

    var dimensionMapping = Ext.widget('propGrid'); 
    this.items.add(dimensionMapping); 
    this.updateLayout(); 
}