ExtJS opening new windows as tiled

Question

I am using ExtJS and have a desktop-like application running. One thing that is bugging me is when a new window is opened (bound within the center region of a viewport) it always opens in the top left of the viewport.

If multiple windows are opened, I want them to tile so they dont just sit ontop of one another...

any ideas?

(My initial thought was to cycle throught the windows in the WindowMgr and check if there is currently one at 0,0. If yes, check 100,100 etc until one is free.)

Hope this makes sense!

Answer 1

I do pretty much as you already describe:

Ext.Window.prototype._autoTile = function() {
    var x = 10,
        y = 10;

    Ext.WindowMgr.each(function( win ) {
        if ( win === this )  return;

        var pos = win.getPosition();

        if ( pos[0] > (x - 15)
            && pos[0] < (x + 15)
            && pos[1] > (y - 15)
            && pos[1] < (y + 15)
        ) {
            x += 15;
            y += 15;
        }
    }, this);

    this.setPagePosition(x, y);
};

Ext.Window.prototype.initComponent =
    Ext.Window.prototype.initComponent.createSequence(function() {
        if ( this.autoTile ) {
            this.on('show', this._autoTile, this, {single: true});
        }
    });

var win = new Ext.Window({
    width: 300,
    height: 300,
    autoTile: true
});

win.show();

This implementation was adequate for my needs but could stand to be made more complex with such things as checks for whether the repositioned window is breaking out of the viewport boundary.

Answer 2

There's nothing built in to do this so I think the approach you outlined above is quite reasonable. Also keep in mind you may need to deal with hidden/minimized/maximized windows depending on what your application allows.

Answer 3

As has been stated there is no built-in functionality to support this.

There is an old discussion thread on the ExtJS forums about this, its for version 2.x however, but perhaps you can pickup some ideas for your implementation there.