extjs - 想要在菜单点击后加载一个容器

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