If you are looking for a lightweight implementation of Toast or Notification windows this is * NOT the class you want. This class builds upon the implementation by Edouard Fattal. * This class creates a specialized Window for notification messages and offers the following features:
* *
* var group2 = new Ext.ux.window.MessageWindowGroup({
* //override any defaults or add to base class instance
* groupId: 2, //groupId not implemented at this time
* zseed: 2000 //change the zseed (default = 9000)
* });
* var mw1 = new Ext.ux.window.MessageWindow({
* manager: group2//specify the MessageWindowGroup manager (instead of using default manager)
* });
* var mw2 = new Ext.ux.window.MessageWindow({
* manager: group2//specify the MessageWindowGroup manager (instead of using default manager)
* });
* var mw3 = new Ext.ux.window.MessageWindow({
* //will use default manager
* });
*
* hideFx: {
* delay: 5000, //time in milliseconds to delay the start of the effect
* duration: 0.25, //duration of the effect
* mode: 'standard', // null = will not hide
* // 'standard' = traditional window hide (vanish)
* // 'standard' = traditional window hide (vanish)
* // anything else will use the default of ghost
* useProxy: true //default is false to hide window instead
* }
*
* msgs: [
* {text: 'Some text message 1', url:'http://extjs.com/support/training/'},
* {text: 'Some text message 2 »', url:'http://extjs.com/support/training/'}
* ],
*
* //configure a different origin than the default bottom right corner of the window:
* origin: {
* //get window's Ext.element:
* el: Ext.get('northRegion'), //element to align to (defaults to document)
* pos: "bl-bl",//position to align to (see {@link Ext.Element#alignTo} for more details defaults to "br-br").
* offX: 10, //amount to offset horizontally (-20 by default)
* offY: 0 //amount to offset vertically (-20 by default)
* },
*
* pinState effect
* -------- ------
* null window will show/hide itself, user can not control
* 'pin' window will initially show itself in pinned state, user will need to click unpin to hide
* 'unpin' window will initially show itself in unpinned state, user will need to click pin to keep open
*
*/
pinState: 'unpin',
/**
* @cfg {Boolean} plain
* True to render the window body with a transparent background so that it will blend into the framing
* elements, false to add a lighter background color to visually highlight the body element and separate it
* more distinctly from the surrounding frame (defaults to false).
*/
plain: false,
/**
* @cfg {Boolean} resizable
* True to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to false).
*/
resizable: false,
/**
* @cfg {String} resizeHandles
* A valid {@link Ext.Resizable} handles config string (defaults to 'all'). Only applies when resizable = true.
*/
/**
* @cfg {String} textHelp
* Qtip text to display for help tool (defaults to 'Get hel'). Only applicable if help = true.
*/
textHelp: 'Get help',
/**
* @cfg {String} textPin
* Qtip text to display for pin tool. Only applicable if {@link pinState} == 'pin' or 'unpin'.
*/
textPin: 'Pin this to prevent closing',
/**
* @cfg {String} textUnpin
* Qtip text to display for unpin tool. Only applicable if {@link pinState} == 'pin' or 'unpin'.
*/
textUnpin: 'Unpin this to close',
/**
* @cfg {Number} x
* The X position of the left edge of the Window on initial showing. Defaults to centering the Window within
* the width of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to).
*/
/**
* @cfg {Number} y
* The Y position of the top edge of the Window on initial showing. Defaults to centering the Window within
* the height of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to).
*/
/** @private */
initHidden : true,
/** @private */
initComponent : function () {
Ext.apply(this, {
collapsible: false,
footer: false,
minHeight: 20,
stateful: false
});
//if interval is specified automatically show message windows
if (this.interval) {
this.startAutoRefresh();
}
//set up automatic hide/close of window if so configured
if (this.autoHide) {
if (this.pinState === 'unpin') {
this.task = new Ext.util.DelayedTask(this.hide, this);
}
}
//new
else {
this.closable = true;
}
//added this.closable
//call parent
Ext.ux.window.MessageWindow.superclass.initComponent.call(this);
//add listeners
this.on({
hide: {
scope: this,
fn: function () {
if (this.autoDestroy) {
if (this.fireEvent("beforeclose", this) !== false) {
this.fireEvent('close', this);
this.destroy();
}
}
}
},
mouseout: {
scope: this,
fn: this.onMouseout
}
});
//add events
this.addEvents(
/**
* @event activate
* Fires after the window has been visually activated via {@link setActive}.
* @param {Ext.ux.window.MessageWindow} this
*/
/**
* @event deactivate
* Fires after the window has been visually deactivated via {@link setActive}.
* @param {Ext.ux.window.MessageWindow} this
*/
/**
* @event resize
* Fires after the window has been resized.
* @param {Ext.ux.window.MessageWindow} this
* @param {Number} width The window's new width
* @param {Number} height The window's new height
*/
/**
* @event maximize
* Fires after the window has been maximized.
* @param {Ext.ux.window.MessageWindow} this
*/
/**
* @event minimize
* Fires after the window has been minimized.
* @param {Ext.ux.window.MessageWindow} this
*/
/**
* @event restore
* Fires after the window has been restored to its original size after being maximized.
* @param {Ext.ux.window.MessageWindow} this
*/
/**
* @event pinned
* Fires after the window has been pinned.
* @param {Ext.ux.window.MessageWindow} this
*/
'afterpin',
/**
* @event unpinned
* Fires after the window has been unpinned.
* @param {Ext.ux.window.MessageWindow} this
*/
'afterunpin',
/**
* @event click
* Fires after the window has been clicked.
* @param {Ext.ux.window.MessageWindow} this
* @param {Ext.ux.window.MessageWindow} msg The message from the message array if configured.
*/
'click');
},
//override
/** @private */
initEvents: function () {
//use a slighly enhanced Ext.ux.window.MessageWindowMgr instead of the default WindowMgr
this.manager = this.manager || Ext.ux.window.MessageWindowMgr;
//the parent class will register, so no need to do it here:
//this.manager = this.manager || Ext.WindowMgr;
Ext.ux.window.MessageWindow.superclass.initEvents.call(this);
},
focus: function () {
Ext.ux.window.MessageWindow.superclass.focus.call(this);
},
/** @private */
toFront: function () {
if(this.manager.bringToFront(this)){
//only focus if configured as such
if(this.focusOnShow){
this.focus();
}
}
return this;
},
/** @private */
initTools: function () {
this.addTool({
id: 'unpin', // image points left
handler: this.handlePin,
//set initial visibility (also check if pinState is null)
hidden: (!this.pinState || this.pinState === 'pin'),
qtip: this.textPin,
scope: this
});
this.addTool({
id: 'pin',// image points down
handler: this.handleUnpin,
hidden: (!this.pinState || this.pinState === 'unpin'),
qtip: this.textUnpin,
scope: this
});
if (this.help) {
this.addTool({
id: 'help',
handler: this.handleHelp,
qtip: this.textHelp,
scope: this
});
}
},
/** @private */
onRender: function (ct, position) {
Ext.ux.window.MessageWindow.superclass.onRender.call(this, ct, position);
//after call to parent class onRender this.el exists.
//clip part of the window (for example the recurring messages that
//eject from a border have the bottom rounded edge, etc. clipped off.
if (this.clip) {
switch (this.clip) {
case 'bottom':
Ext.destroy(this.getEl().child('.' + this.baseCls + '-bl'));
break;
}
}
//add a class when hovering over in order to disable
//any updates to the window while hovering over
if (true) {
this.el.addClassOnOver(this.hoverCls);
}
//add click listener to body
Ext.fly(this.body.dom).on('click', this.handleClick, this);
},
/**
* Toggles the active pin state.
*/
togglePinState: function (event) {
//check which tool is visible
if (this.tools.unpin.isVisible()) {
this.handlePin(event, this.tools.unpin, this);
} else {
this.handleUnpin(event, this.tools.pin, this);
}
},
/**
* Override to the Panel Class createElement method. This method is called by
* Panel Class' onRender(). Normally the panel class will create a header in the
* *-tc class, to utilize the default box class for styling we'll move the header
* inside the *-mc class to utilize
Ext.Element.boxMarkup: