View Full Version : Ext.ux.plugins.NotificationPanelPlugin

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.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});
if(this.timeout) clearTimeout(this.timeout);
this.timeout = setTimeout(this.clean.createDelegate(this), this.delay);

clean: function() {


If you have some problems or ideas, please post here

Here's a screenshot: