根据ExtJs中的窗口大小动态排列对象

我的表单由两个子面板组成。我想安排如下：

1） 如果浏览器窗口较宽，则面板应水平并排排列（例如，使用HBox布局）

2） 如果浏览器窗口狭窄，则面板应垂直排列。每块嵌板都应与窗户的宽度相适应

当用户改变窗口的大小时，面板会根据当前窗口的宽度重新排列

---

如何在ExtJs4中实现这一点？

要动态实现这一点，必须删除子项，然后使用不同的布局再次创建它。然而，这并不总是可能的。我建议“手动”设置位置和大小。这是工作样本，请移动拆分器

var switchWidth = 400;

Ext.onReady(function(){
    Ext.create('Ext.container.Container',{
        id: 'mainContainer',
        title: 'Main panel',
        renderTo: Ext.getBody(),
        padding: 5,
        layout: 'absolute',
        items: [{
            xtype:'panel',
            title: 'First panel',
            id: 'firstPanel',
            anchor: '50%'
        },{
            xtype: 'panel',
            title: 'Second panel',
            id: 'secondPanel',
            margin: '0 -5 0 0'
        }],
        listeners:{
            afterrender: function(){
                setTimeout(function(){resizemainContainer();},100);
            }
        }
    });

    Ext.EventManager.onWindowResize(function(w, h){
        resizemainContainer();
    });
});

function resizemainContainer(){
    var size = Ext.getBody().getViewSize();
    var mainContainer = Ext.getCmp('mainContainer');
    if(mainContainer){
        var firstPanel = Ext.getCmp('firstPanel');
        var secondPanel = Ext.getCmp('secondPanel');
        if(size.width >= switchWidth){
            Ext.apply(firstPanel,{anchor:'50%'});
            firstPanel.setSize(size.width / 2, size.height - 10);
            secondPanel.setPosition(size.width / 2 + 5, 5);
            secondPanel.setSize(size.width / 2, size.height - 10);
        } else {
            Ext.apply(firstPanel,{anchor:'100%' });
            firstPanel.setSize(size.width, size.height / 2 - 5);
            secondPanel.setPosition(5,  size.height / 2 + 5);
            secondPanel.setSize(size.width,  size.height / 2 - 10);
        }
        mainContainer.setSize(size.width, size.height);
        mainContainer.doLayout();
    }
}