1. #101
    Sencha User
    Join Date
    Aug 2008
    Posts
    31
    Vote Rating
    0
    Bodom78 is on a distinguished road

      0  

    Default


    Thanks oulenspiegel,

    I'm about to use notifications in another project and will test out your modified version to see if there are any issues.

  2. #102
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    63
    Vote Rating
    1
    nmcbride is on a distinguished road

      0  

    Default


    Quote Originally Posted by oulenspiegel View Post
    This is a version with my modifications. It handles such an issues:

    1. Wrong y positions in the case of multiple notifications (notifications overlapping)
    2. Wrong x notifications positions (at least at Chrome) when after the first notification y-scrollbar appears which results in body element resize
    3. y-scrollbar appearance when using notification for the document w/o y-scrollbar.

    Code:
    Ext.namespace("Ext.ux");
    
    Ext.ux.NotificationMgr = {
    notifications: [],
    originalBodyOverflowY: null
    };
    
    Ext.ux.Notification = Ext.extend(Ext.Window, {
        initComponent: function(){
            Ext.apply(this, {
                iconCls: this.iconCls || 'x-icon-information',
                cls: 'x-notification',
                width: 200,
                autoHeight: true,
                plain: false,
                draggable: false,
                shadow:false,
                bodyStyle: 'text-align:center'
            });
            if(this.autoDestroy) {
                this.task = new Ext.util.DelayedTask(this.hide, this);
            } else {
                this.closable = true;
            }
            Ext.ux.Notification.superclass.initComponent.apply(this);
        },
        setMessage: function(msg){
            this.body.update(msg);
        },
        setTitle: function(title, iconCls){
            Ext.ux.Notification.superclass.setTitle.call(this, title, iconCls||this.iconCls);
        },
        onDestroy: function(){
            Ext.ux.NotificationMgr.notifications.remove(this);
            Ext.ux.Notification.superclass.onDestroy.call(this);   
        },
        cancelHiding: function(){
            this.addClass('fixed');
            if(this.autoDestroy) {
                this.task.cancel();
            }
        },
        afterShow: function(){
            Ext.ux.Notification.superclass.afterShow.call(this);
            Ext.fly(this.body.dom).on('click', this.cancelHiding, this);
            if(this.autoDestroy) {
                this.task.delay(this.hideDelay || 5000);
           }
        },
        animShow: function() {
    		// save original body overflowY
    		if (Ext.ux.NotificationMgr.originalBodyOverflowY == null)
    		{
    			Ext.ux.NotificationMgr.originalBodyOverflowY = document.body.style.overflowY;
    		}
    
    		// if the body haven't horizontal scrollbar it should not appear
    		if (document.body.clientHeight == document.body.scrollHeight)
    		{
    			document.body.style.overflowY = 'hidden';
    		}
    		
            this.setSize(200, 100);
            pos = -5;
    		
    		for (var i = 0; i < Ext.ux.NotificationMgr.notifications.length; i++)
    		{
    			pos -= Ext.ux.NotificationMgr.notifications[i].getSize().height + 15;
    		}
    		
            Ext.ux.NotificationMgr.notifications.push(this);
    		
            this.el.alignTo(document.body, "br-br", [ -20, pos ]);
    		
            this.el.slideIn('b', {
                duration: 1,
                callback: this.afterShow,
                scope: this
            });
        },
        animHide: function(){
            this.el.ghost("b", {
                duration: 1,
                remove: false,
                callback : function () {
                    Ext.ux.NotificationMgr.notifications.remove(this);
    				
    				if (Ext.ux.NotificationMgr.notifications.length == 0)
    				{
    					document.body.style.overflowY = Ext.ux.NotificationMgr.originalBodyOverflowY;
    				}
    				
                    this.destroy();
                }.createDelegate(this)
    
            });
        },
        focus: Ext.emptyFn
    });
    The problem with this is that if you are on a page with a vertical scroll bar, when the notification pops up it removes it so the whole page shifts to the right which is very noticeable.

  3. #103
    Sencha User HarryC's Avatar
    Join Date
    Mar 2007
    Location
    London, England
    Posts
    89
    Vote Rating
    0
    HarryC is on a distinguished road

      0  

    Default multiple notifications

    multiple notifications


    I'm not sure what I'm doing wrong with this plugin, but whenever I use it I get multiple notifications. Say I have a button that when pressed shows a notification. It works the first time, but when you press it a second time you get 2 notifications. A third time, 3; and so on. It looks bad and gets slow.

    Anyone else have this and know what I'm doing wrong?

    (I'm using Ext 3.3.1, but I've always had this issue with the plugin. Basically stopped using it months ago because of this, but now I really would like to use it).

  4. #104
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    0
    white-hat is on a distinguished road

      0  

    Default Error: Object expected

    Error: Object expected


    Good evening,

    i started using Ext4 a few weeks before and today i tried to play around with notifications.
    If i start it i receive an error (IE):


    Meldung: Objekt expected
    Zeile: 31
    Zeichen: 10
    Code: 0
    URI: xyz.de/extComm/webDesk/sandbox/sandbox.js



    Ext4.onReady(function() {


    var viewport = new Ext.Viewport({
    layout: 'border',
    items: [
    {
    region: 'center',
    title: 'Toast Windows',
    items: [
    {
    xtype: 'button',
    text: 'Eject new toast window',
    style: 'margin: 20px',
    listeners: {
    click: function(){
    ---> Thats line 31 new Ext.ux.Notification({


    ...





    I have included
    protoculous-packer.js
    Ext.ux.Notification.js

    so i dont think thats the issue.
    Did i forget something?

    Sorry for my silly questions but i tried to fix the whole day.

    Best regards from germany
    Bo

  5. #105
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    very useful plugin, thanks for sharing dear friend.. I just want to learn how can I solve "spot" problem after the window is hidden.. the spot that's around of the window stays.. By the way I'm using Ext 3.x.. Can someone help me? I attached the pic of this situation..

    Thanks in advance..
    With regards..
    1.png2.png
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  6. #106
    Sencha User eirik.lorentsen's Avatar
    Join Date
    Aug 2011
    Location
    Santiago, Chile
    Posts
    33
    Vote Rating
    6
    eirik.lorentsen is on a distinguished road

      0  

    Default


    I have ported / rewritten a 4.x version of this extension that can be found here:
    http://www.sencha.com/forum/showthread.php?t=145503

    I placed it in the Ext.ux.window.Notification namespace.
    And it has some improvements from the old version:
    • Multiple managers and notifications stacks
      The static manager object is eliminated completely, allowing notifications to attach to different components using their x and y coordinates to slide in the notifications.
    • All four corners of document/manager can be used: 'br', 'bl', 'tr', 'tl'.
    • Both x and y axis can be used. Notifications can slide in sideways.
    • When a notification is destroyed any notifications above it slide down automatically.
    • Easy customization of css, animations, delays, spacings/padding etc.

  7. #107
    Sencha User
    Join Date
    Mar 2011
    Posts
    4
    Vote Rating
    0
    Marc.Ziman is on a distinguished road

      0  

    Default


    I'm using Ext 3.3.1. When the notification starts to hide, its sides disappear though the corners are intact. This happens on IE8, my target browser a choice over which I have no control. Firefox is ok. Does anyone have any suggestions? Thanks.
    Attached Images

  8. #108
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    244
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    Hi Erik,
    Love the styling that you did. I tried to apply it to a normal window and it doesn't work properly... Can you provide me the styling that you used to be applied instead to ExtJS 3.x


    .ux-notification-light .x-window-header { background-color: transparent;}body .ux-notification-light { background-color: white; background-image: url('images/fader.png');}.ux-notification-light .x-window-body { text-align: center; padding: 15px 5px 18px 5px; width: 200px; background-color: transparent; border: 0px solid white;}
    Quote Originally Posted by eirik.lorentsen View Post
    I have ported / rewritten a 4.x version of this extension that can be found here:
    http://www.sencha.com/forum/showthread.php?t=145503

    I placed it in the Ext.ux.window.Notification namespace.
    And it has some improvements from the old version:
    • Multiple managers and notifications stacks
      The static manager object is eliminated completely, allowing notifications to attach to different components using their x and y coordinates to slide in the notifications.
    • All four corners of document/manager can be used: 'br', 'bl', 'tr', 'tl'.
    • Both x and y axis can be used. Notifications can slide in sideways.
    • When a notification is destroyed any notifications above it slide down automatically.
    • Easy customization of css, animations, delays, spacings/padding etc.

  9. #109
    Sencha User eirik.lorentsen's Avatar
    Join Date
    Aug 2011
    Location
    Santiago, Chile
    Posts
    33
    Vote Rating
    6
    eirik.lorentsen is on a distinguished road

      0  

    Default


    Grolubao:
    I'm sorry but I haven't applied the styling to any 3.x code.
    But if you set the config of the window to:
    border: false,
    preventHeader: true
    and add a cls where you use the fader image as background then you should be well on your way.
    Especially if you don't care about older (<IE9) browsers.

  10. #110
    Sencha User
    Join Date
    Apr 2012
    Posts
    10
    Vote Rating
    0
    gurunath is on a distinguished road

      0  

    Default


    hi all I tried this code on 4.1 but dont know how mywindow displays at centre please help me out,
    one more thing when animShow method is called?
    I puted an alert but it never displays

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar