Ext JS從其容器中移除GUI項目按xtype

一個面板包含3個項目。最後一個項目有一個事件處理程序attache。在處理程序中，新項目（小部件）被添加到父面板。在添加新項目之前，應刪除相同xtype的舊項目。Ext JS從其容器中移除GUI項目按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組件。

來源

2017-10-07 Alexandr

你應該只能夠做'this.remove（this.down（ 'propGrid'））'在'onSiRemoteCombo（） '方法。 –

它看起來像onSiRemoteCombo的範圍將是siRemoteCombo實例。 siRemoteCombo擴展了什麼？它是一個組合框嗎？ –

結賬component queries。它允許您根據全局或容器內的屬性來搜索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。只需從組合中選擇一個值，網格將被刪除。

來源

2017-10-07 13:57:03 scebotari66

由於某種原因，沒有下降，沒有孩子不工作 – Alexandr

@Alexandr我已經更新了我的答案。看看小提琴。也許你沒有正確設置'xtype'，或者別的什麼.. – scebotari66

是的，謝謝你，你的代碼工作正常。調查我的一個。有些東西還是錯的。 – Alexandr

爲了與prodGrid的xtype刪除項目，試試這個：

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

來源

2017-10-07 14:08:17

Ext JS從其容器中移除GUI項目按xtype

回答

相關問題