orientation change

HTML

<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all.css">

JavaScript

var viewport = Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        xtype: 'panel',
        itemId: 'landscape-panel',
        layout: 'hbox',
        items: [{
            xtype: 'component',
            width: 100,
            height: 100,
            html: '<div>component 1</div>'
        }, {
            xtype: 'component',
            width: 100,
            height: 100,
            html: '<div>component 2</div>'
        }]
    }, {
        xtype: 'panel',
        itemId: 'portrait-panel',
        layout: 'vbox',
        hidden: true
    }],
    renderTo: Ext.getBody()
});

window.orientationChange = function (orientation) {
    var ppanel = viewport.down('#portrait-panel'),
        lpanel = viewport.down('#landscape-panel'),
        items,
        isHorizontal = (orientation === 'H');
    
    if (isHorizontal) {
        items = ppanel.items.items;
        if (items.length > 0) {
            lpanel.add(items);
            ppanel.removeAll(false);
        }
    } else {
        items = lpanel.items.items;
        if (items.length > 0) {
            ppanel.add(items);
            lpanel.removeAll(false);
        }
    }
    ppanel.setVisible(!isHorizontal);
    lpanel.setVisible(isHorizontal);
};