extjs4.1 - ExtJS 4.0.7 から 4.1 への移行 : コンポーネントの動的追加に失敗しました

Question

ユーザーが特定のパネルを 2 つの部分 (水平/垂直) に動的に分割できる必要があるという要件があります。このコードを使用して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]); 

「コンテナが定義されていません」で失敗しました。これは正しい方法ですか?? または何か良い方法はありますか？