Events not working anymore after Container.add

[warrean]

Hi

I have a View with 2 containers (resp. layouts: vbox and hbox). In the view's controller I want to move the items from container1 to container2.

However, when I do this I can't use the functionality anymore (in this example it's a fieldtext and I can't type in it anymore). When I add them back to the container they were original in, the events work again.

I suspect the events aren't transferred along with the components, and so the browser doesn't register anything.

View:

Ext.define('T.view.OrientationChange', { 
    extend: 'Ext.Container',
    id: 'orichangeview',

    config: {
        layout: 'fit',
        items: [
            {
                itemId: 'hboxContainer',
                layout: 'hbox'
            },
            {
                itemId: 'vboxContainer',
                layout: 'vbox',
                items: [
                        {
                            xtype: 'textareafield',
                            id: 'commentField',
                            placeHolder: 'Comment...'
                        }
                       ]
            }
        ]
    }
});

Controller:

Ext.define('T.controller.OriChangeController', {
    extend: 'Ext.app.Controller',
 
   config: {
        refs: {
            hboxContainer: '#hboxContainer',
            vboxContainer: '#vboxContainer',
            commentF: '#commentField'
        },


        control: {
            'viewport': {
                orientationchange: 'orichange'
            }
        }
    },


    orichange: function() {
        var me = this, items;
        console.log('ori change');
        if (Ext.Viewport.getOrientation() == 'landscape') {
            me.getHboxContainer().add(me.getCommentF());
        } else {
            me.getVboxContainer().add(me.getCommentF());
        }
    }
});

So how do I keep functionality?

[warrean]

Apparently I had to hide the other container, it was blocking the events! So simple.. :-)