PDA

View Full Version : Ext.ux.plugins.NotificationPanelPlugin



tarini
10 Jun 2008, 2:30 AM
This plugins is used to create a little area in a Panel Toolbar to show some notification/error message. It extends a mine previous plugin (Ext.ux.NotificationPagingToolbarPlugin (http://extjs.com/forum/showthread.php?p=174904))


It automatically adds:
- 2 items to the toolbar (a TextItem ad a FillItem)
- 2 methods to the panel (showNotificationMessage and showErrorMessage)

using this plugin it's very easy:

just add this on the plugin configuration:

plugins: [new Ext.ux.plugins.NotificationPanelPlugin()]

and using methods to show message:

var myPanel = new Ext.Panel({....})
myPanel.showNotificationMessage("This is a notification");
myPanel.showErrorMessage("This is an error");

Here's the code:

Ext.ns("Ext.ux.plugins");

Ext.ux.plugins.NotificationPanelPlugin = function(o) {
Ext.apply(this, o);
}

Ext.ux.plugins.NotificationPanelPlugin.prototype = {

notificationColor: '#15428B',
errorColor: '#F00',
delay: 10000,

init: function(panel) {
panel.on("render", this.createToolbar, this);
panel.showNotificationMessage = this.showNotificationMessage.createDelegate(this);
panel.showErrorMessage = this.showErrorMessage.createDelegate(this);
panel.showMessage = this.showErrorMessage.createDelegate(this);
this.panel = panel;
},

createToolbar: function() {
var panel = this.panel;
var toolbar = panel.getBottomToolbar();
var fill = new Ext.Toolbar.Fill();
var text = new Ext.Toolbar.TextItem("");
Ext.fly(text.getEl()).setStyle({"font-weight": "bold"});
toolbar.insertButton(0, [text, fill]);
panel.notificationElement = text;
},

showNotificationMessage: function(message) {
this.showMessage(message, this.notificationColor);
},

showErrorMessage: function(message) {
this.showMessage(message, this.errorColor)
},

showMessage: function(message, color) {
Ext.fly(this.panel.notificationElement.getEl()).setStyle({color: color});
Ext.fly(this.panel.notificationElement.getEl()).update(message);
if(this.timeout) clearTimeout(this.timeout);
this.timeout = setTimeout(this.clean.createDelegate(this), this.delay);
},

clean: function() {
Ext.fly(this.panel.notificationElement.getEl()).update();
}

}


If you have some problems or ideas, please post here


Here's a screenshot: