Cascade window position plugin.

CascadeWindows.js

/* global Ext */

/**
 * Cascade window position plugin.
 *
 * To use this plugin just add to your window
 * 1. `'Ext.ux.CascadeWindows'` in `requires` property
 * 2. `ptype: 'cascadewindows'` in `plugins` property
 *
 * @author Maciej "Nux" Jaros
 * @license CC-BY
 * https://gist.github.com/Eccenux/75fc9f903fc594e23de7
 * 
 * Tested on ExtJS 4.x
 */
Ext.define('Ext.ux.CascadeWindows', {
	extend: 'Ext.AbstractPlugin',
	alias: 'plugin.cascadewindows',
	mixins: {
		observable: 'Ext.util.Observable'
	},
	/**
	 * Extended window object.
	 */
	window : null,
	/**
	 * Offset to apply depending on previously opened window.
	 */
	offset : {
		x: 0,
		y: 50
	},
	/**
	 * Offest upon reaching maximum width or height.
	 */
	offsetUponMax : {
		x: 20,
		y: 20
	},
	/**
	 * Start postion upon reaching maximum width or height.
	 */
	postionUponMax : {
		x: 0,
		y: 100
	},
	/**
	 * Minimum visible on x/y.
	 */
	minimumVisible : {
		x: 300,
		y: 50
	},
	/**
	 * Plugin init.
	 * @param {Ext.window.Window} clientWindow
	 */
	init: function(clientWindow) {
		var me = this;
		var config = this.getInitialConfig();
		this.window = clientWindow;
		clientWindow.on('beforeshow', function() {
			me.setupPosition();
			// save current as previous
			me.self.prevWindow = me.window;
		});
	},
	/**
	 * Setup current window postion.
	 *
	 * Note. Resets when previous window is closed or unavilable.
	 */
	setupPosition: function() {
		var current = this.window;
		var previous = this.self.prevWindow;
		if (previous && previous.isVisible()) {
			var previousPosition = previous.getPosition();
			var previousPosition = {
				x: previousPosition[0],
				y: previousPosition[1]
			};
			var newPostion = {
				x : previousPosition.x + this.offset.x,
				y : previousPosition.y + this.offset.y
			};
			// get container to check for availble width/height
			var containerSize = (current.ownerCt ? current.ownerCt.getViewSize() : Ext.getBody().getViewSize());
			if (newPostion.x > containerSize.width - this.minimumVisible.x) {
				newPostion.x = this.postionUponMax.x;
				newPostion.y += this.offsetUponMax.y;
			}
			if (newPostion.y > containerSize.height - this.minimumVisible.y) {
				newPostion.y = this.postionUponMax.y;
				newPostion.x += this.offsetUponMax.x;
			}
			// set position
			current.x = newPostion.x;
			current.y = newPostion.y;
			// debug
			//console.log(previousPosition, newPostion);
		}
	},
	/**
	 * Class properties (common to all instances).
	 */
	statics : {
		prevWindow : null
	}
});

example-minimum.js

// this is bare minimum example
// of course you might extend Ext.Window or anything similar.
Ext.define('App.view.MyWindow', {
	extend: 'Ext.Panel',
	//...
	requires: [
		'Ext.ux.CascadeWindows'
	],
	plugins: [
		{
			ptype: 'cascadewindows'
		}
	],
	//...
});

example-override-default-offsets.js

// in this example you override `offset` to move window to both down and right (defulat is 50 pixels down)
Ext.define('App.view.MyWindow', {
	extend: 'Ext.Panel',
	//...
	requires: [
		'Ext.ux.CascadeWindows'
	],
	plugins: [
		{
			ptype: 'cascadewindows',
			offset : {
				x: 50,
				y: 50
			}
		}
	],
	//...
});