Page 10 of 11 FirstFirst ... 891011 LastLast
Results 91 to 100 of 110

Thread: Ext.ux.Notification

  1. #91

    Default

    Using ExtJS 3.1.1 not works fine, the shadow not disapears...

  2. #92
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    293

    Thumbs up Patched for 3.1.1

    Don't blame, there is no shadow, but works just as intended
    Code:
    Ext.namespace("Ext.ux");
    Ext.ux.NotificationMgr = {
    positions: []
    };
    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.positions.remove(this.pos);
            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(){
            this.pos = 0;
            while(Ext.ux.NotificationMgr.positions.indexOf(this.pos)>-1)
                this.pos++;
            Ext.ux.NotificationMgr.positions.push(this.pos);
            this.setSize(200,100);
            this.el.alignTo(document, "br-br", [ -20, -20-((this.getSize().height+10)*this.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.positions.remove(this.pos);
                    this.destroy();
                }.createDelegate(this)
    
            });
        },
        focus: Ext.emptyFn
    });
    Use it without included protoculus library , save space, use mp3, not wav..
    Code:
     function show_info(typeCode, titleHtml, bodyHtml){
        //type 1 - error
        //type 2 - info
        var headerIcon = (typeCode == 'error') ? 'ico-exclamation' : 'ico-info' ;
        new Ext.ux.Notification({
            iconCls: headerIcon,
            title: titleHtml,
            html: bodyHtml,
            autoDestroy: true,
            hideDelay:  1800,
            listeners: {
                    'beforerender': function(){
                       Ext.ux.Sound.play('ext.ux2/Notification/notify.mp3');
                    }
            }
    }).show(document);
    }

  3. #93
    Sencha User MoimHossain's Avatar
    Join Date
    May 2010
    Location
    Netherlands
    Posts
    35

    Default Notification doesn't remove shadows

    Guys, this is indeed a nice work. However, when I tried to use this into my application, I find that the shadows are not removed when the notification closes (I am using autohide mode) in IE7.

    I am using a layout exactly like the the Ext API documentation program (a viewport into the middle, a tab control with a first tab that renders a html page). And for the notification I am showing it as

    show(document)

    so, it's using the document as the host. Look at the image below.



    As you can see the botton -right portion of my application, I have a status bar and the white portion is the html page inside the first tab page. And this is what happens after the notification gets hidden.

    I am using all the CSS that I found into the online demo of this cool component. Still it doesn't work for me.

    Can any body help me please?

  4. #94
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751

    Default

    open your eyes MoimHossain,

    thorsten already posted a fix:
    http://www.sencha.com/forum/showthre...563#post424563

    with kind regards
    tobiu
    Best regards
    Tobias Uhlig

  5. #95
    Sencha User MoimHossain's Avatar
    Join Date
    May 2010
    Location
    Netherlands
    Posts
    35

    Default

    Quote Originally Posted by tobiu View Post
    open your eyes MoimHossain,

    thorsten already posted a fix:
    http://www.sencha.com/forum/showthre...563#post424563

    with kind regards
    tobiu
    Thanks Buddy, I just opened my eyes and got that nice fix. Thanks again for your reply Cheers

  6. #96

  7. #97

    Default lighter color at the top of the window

    Does anyone know why the toast window demo has a lighter color at the top of the window and the Notification has not. I am using Notification with Ext 3.2.
    Is this a Ext.Window property?


    toast_vs_Notification.gif

  8. #98
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    It's probably different sprite(s).
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  9. #99
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751

    Default

    if you mean the toast-demo at the first page of this topic, thats with ext 2.x
    the css and images have changed quite a lot.
    Best regards
    Tobias Uhlig

  10. #100
    Sencha User oulenspiegel's Avatar
    Join Date
    Jan 2011
    Location
    Moscow, Russia
    Posts
    3

    Default

    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
    });

Page 10 of 11 FirstFirst ... 891011 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •