View Full Version : Ext.ux.NotificationPagingToolbarPlugin

29 May 2008, 4:44 AM
Some days ago I was thinking about a way to show little notification to the user (like "record added with success" or similar) browsing a grid.

Initially I used some MessageBoxes but they are too restrictive and annoying.

I have a stroke of genius and I write this plugin for Ext.PagingToolbar. This plugin add a text element between the page ComboBox and the detailMessage (look the attached image).

Here's the code


Ext.ux.NotificationPagingToolbarPlugin = function(o) {
Ext.apply(this, o);

Ext.ux.NotificationPagingToolbarPlugin.prototype = {

elementConfig: { style: { "font-weight": "bold", color:'#15428B' } },
delay: 10000,

init: function(toolbar) {
toolbar.on('render', this.onInitView, this);
toolbar.setNotificationMessage = this.setNotificationMessage.createDelegate(this);

onInitView: function(toolbar) {
this.nm = Ext.fly(toolbar.el.dom).createChild(this.elementConfig);

setNotificationMessage: function(message) {
if(this.delay > 0) {
this.timeout = setTimeout(this.emptyNotificationMessage.createDelegate(this), this.delay);

emptyNotificationMessage: function() {


You can use in this way:

var toolbar = new Ext.ux.SearchPagingToolbar({
pageSize: 30,
store: MyStore,
displayInfo: true,
plugins: [new Ext.ux.NotificationPagingToolbarPlugin()]
toolbar.setNotificationMessage("My notification");

You can also configure timeout ms (0 for avoid) and element configuration (like css style) passing a object (with timeout and elementConfig properties) to the constructor.

If you have some problems or ideas, please post here

PS1: in my attached image, I use also PageSizePlugin but its't required for NotificationPagingToolbarPlugin

29 May 2008, 7:12 AM
Tarini: How do you get that editable # of records to show at once option? (the combo-box dropdown).

29 May 2008, 10:33 AM
Tarini: How do you get that editable # of records to show at once option? (the combo-box dropdown).

It's an another plugin (PageSizePlugin). Search it in the forum