Ext.ux.window.Notification

[javapurna]

Hi eirik.lorentsen,

how to show list of notifications .for suppose 10 notifications coming from database at once (Array[10])

i am create like below

for(var i=0;i<event.data.length;i++){
var notification =Ext.create("MotApp.util.Notification", {
  title: 'Notification',
  position: "br",// Options: br, bl, tr, tl, t, l, b, r
  cls: "ux-notification-window ux-notification-success",
  iconCls: "ux-notification-icon-information",

  spacing: 15,
  html:event.data[i].message,
  autoCloseDelay: 7000,
});
notification.show();		        		}

event.data contains Array[10] objects . i am iterating and displaying . but all notifications close at a time.




)

[brian428]

If you set them all to close after 7000 ms, then that's when they'll all close.

Also, showing 10 simultaneous notifications is a really poor UX choice. Either reduce the noise, or combine them into one notification.

[JK3jp5qMJwKW]

He released a new version: 2.1.3http://www.eirik.net/Ext/ux/window/Notification.js

[SurenderBhyan1]

Hi Erik,
Great Job

one query:
How I can constraint notification with in window screen as my requirement is to show multiple notification based on a loop counter.

https://fiddle.sencha.com/#fiddle/t52

[eirik.lorentsen]

If by constraint you mean keeping them all visible within the window at the same time, then you need to adjust the width making them smaller. The notifications can not overlap or spread out over multiple lines. You could also rotate the entry point. Entring the first in the br corner, the second in the bl corner etc.

Hi Erik,
Great Job

one query:
How I can constraint notification with in window screen as my requirement is to show multiple notification based on a loop counter.

https://fiddle.sencha.com/#fiddle/t52

[SurenderBhyan1]

Thank you Erik,
Entry points and useXAxis config are nice choice and I understand notification should contains short messages. But In my case I have messages are of varying length and long one and at the same time there can be multiple notification so I need to move them automatically in another column if notification goes out of screen. I don' want to go with entry point here.

Below are two Screenshot, these will clear my requirement

Screenshot 1: Happening Now
Notifications_1.png


Screenshot 2: Requirement
Notifications.png



Thank you for assistance in getting my experience to a higher level

[eirik.lorentsen]

I don't think there is any easy way to meet your requirement the way the extension works today. But if you calculate the size of the container and then modify the way the coordinates are calculated to allow for several columns, then you might be able to pull it off. I don't have time to make any specific suggestions, but if anyone do solve it then i can try to include a general solution into the code.

Thank you Erik,
Entry points and useXAxis config are nice choice and I understand notification should contains short messages. But In my case I have messages are of varying length and long one and at the same time there can be multiple notification so I need to move them automatically in another column if notification goes out of screen. I don' want to go with entry point here.

Below are two Screenshot, these will clear my requirement

Screenshot 1: Happening Now
Notifications_1.png


Screenshot 2: Requirement
Notifications.png



Thank you for assistance in getting my experience to a higher level

[korndeang]

Not work for me line: 288: error message : me.manager = null

[korndeang]

Not work many problem Ext v6

My code:

Ext.define('App.view.widgets.Notification', {
    extend: 'Ext.ux.window.Notification',
    alias: 'widget.notification',
    corner: 'tr',
    manager: 'real',
    cls: 'ux-notification-light',
    iconCls: 'ux-notification-icon-information',
    stickOnClick: true,
    closable: true,
    title: 'information',
    html: '',
    slideInDelay: 800,
    slideDownDelay: 1500,
    resizable: false,
    slideInAnimation: 'elasticIn',
    slideDownAnimation: 'elasticIn',
    
    setErrorIcon: function() {
        this.iconCls = 'ux-notification-icon-error'
    },
    setTitle: function(title) {
        this.title = title;
    },
    setMessage: function(message) {
        this.html = message;
    },
    
    showMessage: function(message) {
        this.html = message;
        this.autoDestroyDelay = message.length * 150 + 3000;
        this.show();
    }
    
});

getNotifications: function (alignment) {
        var me = this;
        
        if (!me.manager.notifications[alignment]) { //line 288  error this variable: alignment
            me.manager.notifications[alignment] = [];
        }

        return me.manager.notifications[alignment];
    },