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

Question

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

1）如果浏览器的窗口有一些限制，那么面板应该水平排列，并排放置（例如使用HBox布局）。

2）如果浏览器的窗口很窄，那么面板应垂直排列。每个面板都应该适合窗口的宽度。

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

如何在ExtJs4中实现这一点？

Answer 1

要动态执行此操作，您必须删除子项，然后使用其他布局再次创建它们。但是，这并不总是可行的。我建议“手动”设置位置和大小。这是工作样本http://jsfiddle.net/Le4H7/2/只需移动拆分器

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();
    }
}