Skip to content

Instantly share code, notes, and snippets.

@Eccenux Eccenux/CascadeWindows.js
Last active Feb 2, 2016

Embed
What would you like to do?
Cascade window position plugin.
/* 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
}
});
// 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'
}
],
//...
});
// 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
}
}
],
//...
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.