tarini
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.namespace('Ext.ux');
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);
toolbar.add('-');
toolbar.addElement(this.nm);
},
setNotificationMessage: function(message) {
this.nm.update(message);
if(this.delay > 0) {
clearTimeout(this.timeout);
this.timeout = setTimeout(this.emptyNotificationMessage.createDelegate(this), this.delay);
}
},
emptyNotificationMessage: function() {
this.nm.update();
}
};
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
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.namespace('Ext.ux');
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);
toolbar.add('-');
toolbar.addElement(this.nm);
},
setNotificationMessage: function(message) {
this.nm.update(message);
if(this.delay > 0) {
clearTimeout(this.timeout);
this.timeout = setTimeout(this.emptyNotificationMessage.createDelegate(this), this.delay);
}
},
emptyNotificationMessage: function() {
this.nm.update();
}
};
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