Arranging objects dynamically depending on window size in ExtJs

Question

My form consists of two child panels. I'd like to arrange them as follows:

1) If browser's window is wider some limit, then panels should be arranged horizontally, side by side (e.g. using HBox layout).

2) If browser's window is narrow, then panels should be arranged vertically. Every panel should fit window's width.

When user changes size of window, panels are rearranged dinamically depending on current window width.

How this can be implemented in ExtJs4?

Boris Gappov Boris Gappov · Accepted Answer · 2014-02-01T23:51:09

To do this dynamically, you must remove the children, and create it again with a different layout. However, this is not always possible. I have proposed "manually" set the position and size. Here is working sample http://jsfiddle.net/Le4H7/2/ Just move splitter

enter image description here

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

Arranging objects dynamically depending on window size in ExtJs

1 Answers