想點擊菜單後裝入容器

Question

我有一個視：

Ext.define('MyApp.view.MyViewport', { 
extend: 'Ext.container.Viewport', 

layout: { 
    type: 'fit' 
}, 

initComponent: function() { 
    var me = this; 

    Ext.applyIf(me, { 
     items: [ 
      { 
       xtype: 'panel', 
       layout: { 
        type: 'fit' 
       }, 
       title: 'Just4Rental', 
       dockedItems: [ 
        { 
         xtype: 'toolbar', 
         dock: 'top', 
         items: [ 
          { 
           xtype: 'splitbutton', 
           text: 'Afdeling', 
           menu: { 
            xtype: 'menu', 
            minWidth: 200, 
            width: 200, 
            items: [ 
             { 
              xtype: 'menuitem', 
              text: 'Accountmanager', 
              listeners: { 
               click: { 
                fn: me.onMenuitemClick, 
                scope: me 
               } 
              } 
             }, 
             { 
              xtype: 'menuitem', 
              text: 'Planning' 
             }, 
             { 
              xtype: 'menuitem', 
              text: 'Magazijn' 
             }, 
             { 
              xtype: 'menuitem', 
              text: 'TD' 
             }, 
             { 
              xtype: 'menuitem', 
              text: 'HRM' 
             }, 
             { 
              xtype: 'menuitem', 
              width: 250, 
              text: 'Wagenpark' 
             }, 
             { 
              xtype: 'menuitem', 
              text: 'Voorbereiding' 
             }, 
             { 
              xtype: 'menuitem', 
              text: 'Locaties' 
             }, 
             { 
              xtype: 'menuitem', 
              text: 'Administratie' 
             } 
            ] 
           } 
          }, 
          { 
           xtype: 'tbfill' 
          }, 
          { 
           xtype: 'tbtext', 
           text: 'Accountmanager' 
          } 
         ] 
        } 
       ], 
       items: [ 
        { 
         xtype: 'container', 
         id: 'inhoudAfdeling', 
         layout: { 
          type: 'fit' 
         } 
        } 
       ] 
      } 
     ] 
    }); 

    me.callParent(arguments); 
}, 

onMenuitemClick: function(item, e, eOpts) { 
    Ext.widget('accountManager').renderTo('inhoudAfdeling'); 
} 
}); 

當我點擊一個菜單項，這種情況下，的AccountManager：

xtype: 'menuitem', 
text: 'Accountmanager', 
listeners: { 
    click: { 
    fn: me.onMenuitemClick, 
    scope: me 
      } 
      } 

我想加載不同'inhoudAfdeling'容器中的容器。我想加載是此容器：

Ext.define('MyApp.view.accountManager', { 
extend: 'Ext.container.Container', 
alias: 'widget.accountManager', 

id: 'Accountmanager', 
layout: { 
    align: 'stretch', 
    type: 'vbox' 
}, 

initComponent: function() { 
    var me = this; 

    Ext.applyIf(me, { 
     items: [ 
      { 
       xtype: 'container', 
       flex: 1, 
       id: 'bovenBox', 
       layout: { 
        align: 'stretch', 
        type: 'hbox' 
       }, 
      ........ 

我試圖Ext.widget（ '的AccountManager'）renderTo（ 'inhoudAfdeling'），但不工作。任何人的想法？

Answer 1

renderTo用於渲染組件到現有的DOM元素。正如文檔中提到的，它應該/不能用於將組件添加到其他組件。

嘗試你想要的東西添加到容器上使用add：

onMenuitemClick: function(item, e, eOpts) { 
    // explicit instantiation 
    Ext.getCmp('inhoudAfdeling').add(Ext.widget('accountManager')); 
    // implicit instantiation 
    Ext.getCmp('inhoudAfdeling').add({xtype: 'accountManager'}); 
}