extjs4.1 - ExtJS 4.0.7 到 4.1 迁移：动态添加组件失败

Question

我有一个要求，用户必须能够动态地将给定的面板分成两部分（水平/垂直）。我使用这段代码在 ExtJS 4.0.7 中实现了同样的效果

splitPanel: function(direction)
{
    var subWizard1 = Ext.create('Ext.ux.SplitPanel', {
        contextMenuItems: this.contextMenuItems
    });

    var subWizard2 = Ext.create('Ext.ux.SplitPanel', {
        contextMenuItems: this.contextMenuItems
    });


    this.layout = {
        type: direction,
        align: 'stretch'
    };

    this.add([ subWizard1, subWizard2]);


    subWizard1.on({
        userSelection:
        {
            scope: this,
            fn : function(sourceEvent,sourceObject,options)
            {
                this.fireEvent('userSelection',sourceEvent,sourceObject,options);
            }
        }
    });
    subWizard2.on({
        userSelection:
        {
            scope: this,
            fn : function(sourceEvent,sourceObject,options)
            {
                this.fireEvent('userSelection',sourceEvent,sourceObject,options);
            }
        }
    });
}

Ext.ux.Split Wizard 的定义：-

Ext.define('Ext.ux.SplitPanel', {
    extend : 'Ext.panel.Panel',


    mixins: {
        splitPanelController: 'Ext.ux.SplitPanel.Controller'
    },

    initComponent : function() {    
        var config = {
            flex: 1,
            autoDestroy: true,
            autoRender: true,
            listeners: 
            {
               render: function() 
               {
                   //Adding a Context Menu Click Event Listener. Since this is a simple plain panel without any items (unlike grid,tree etc) 
                   // we need to add the contextmenu listener on the body DOM . Ext.getBody() returns the current document body as an Ext.element
                   this.body.on({
                       contextmenu: 
                       {
                           scope: this,
                           // disable the browser's default context menu
                           stopEvent: true,                    
                           fn:function(sourceEvent, sourceObject, options)
                           {
                               this.genContextMenu(sourceEvent, sourceObject , options);
                           }
                       } 
                   });
               }
            }
        };


        this.elemRepID = "";

        Ext.apply(this, Ext.apply(this.initialConfig, config));
        Ext.ux.SplitPanel.superclass.initComponent.apply(this, arguments);

        this.addEvents('userSelection');
    },
    onRender: function()
    {
        Ext.ux.SplitPanel.superclass.onRender.apply(this, arguments);
    }


});

'Ext.ux.SplitWizard' 中混合的'Ext.ux.SplitWizard.Controller' 具有从面板上的上下文菜单调用的“splitPanel”方法。这样，用户可以右键单击弹出上下文菜单的面板，使用它可以水平/垂直拆分面板，相应地调用“splitPanel”方法。

genContextMenu 方法：

genContextMenu : function(sourceEvent, sourceObject , options) {

    var menuItems = new Array();

    menuItems.push({
        text : 'Split',
        iconCls : 'ContextMenu-Split-icon',
        menu : {
            items : [ {
                text : 'Horizontally',
                scope : this,
                iconCls : 'ContextMenu-Split-Vertical-icon',
                handler : this.splitPanel.bind(this,'vbox')
            }, {
                text : 'Vertically',
                scope : this,
                iconCls : 'ContextMenu-Split-Horizontal-icon',
                handler : this.splitPanel.bind(this,'hbox')
            }, {
                text : 'UndoSplit',
                scope:    this,
                iconCls : 'ContextMenu-Undo',
                handler : this.undoSplit
            } ]
        }
    });

    var wizardContextMenu = Ext.create('Ext.menu.Menu', {
        margin : '0 0 10 0',
        floating : true,
        renderTo : Ext.getBody(),
        items : menuItems,
        listeners: 
        {
           render: function() 
           {
               // Disabling browser context menu from popping when right clicked on menu body.
               this.body.on({
                   contextmenu: 
                   {
                       scope: this,
                       stopEvent: true,                    
                       fn:    Ext.emptyFn                           
                   } 
               });
           }
        }
    });

    wizardContextMenu.showAt(sourceEvent.getXY());
}

这在 4.0.7 中运行良好。但是当我迁移到 4.1

this.add([ subWizard1, subWizard2]); 

因“容器未定义”而失败。这是正确的方法吗？还是有更好的方法？