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

      0  

    Default Version 1.3

    Version 1.3


    Minor changes on how the component is destroyed.

  2. #22
    Sencha User
    Join Date
    May 2011
    Location
    Manchester, United Kingdom
    Posts
    19
    Vote Rating
    0
    kreeve_ctisn is on a distinguished road

      0  

    Default


    Hi,thanks for the nice plugin/extension..

    for future versions can you remove the title default as would be good to not have to pass title: null or other such to overwrite the component's version "Notification"

  3. #23
    Ext JS Premium Member twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    223
    Vote Rating
    3
    twaindev is on a distinguished road

      0  

    Default


    Thanks for the updates. I really like the new style.

  4. #24
    Sencha User fancing's Avatar
    Join Date
    Aug 2007
    Posts
    25
    Vote Rating
    0
    fancing is on a distinguished road

      0  

    Default


    Good extension, i added it to my site.
    Weibo: @曾少宁_ZengSN
    Twitter: @zengsn
    Website: http://zsn.cc

  5. #25
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    184
    Vote Rating
    53
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Default


    Thanks for sharing!
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  6. #26
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    88
    Vote Rating
    0
    SMMJ_Dev will become famous soon enough

      0  

    Default


    Just an FYI,

    I was able to get your light style for notifications to work with all browsers.

    I am now calling your notification like below in order to use the ui property that is meant for different component styles.
    Code:
    Ext.widget('uxNotification',{
                            corner:'tr',
                            ui:'light',
                            closable: true,
                            title: '',
                            useXAxis: true,
                            stickOnClick:true,
                            resizable:false,
                            iconCls: 'ux-notification-icon-information',
                            html: 'Using document as manager. No title and closable: false. Entering from the tr corner using x-axis.'
                        }).show();
    After that you have to have the style setup in either ext-all.css or create your own style. I created my own style script instead of ext-all.css just because I have changed alot of colors etc.

    Anyways, place this inside of your scss script to create the styles for you. This is the custom scss mixin I created for developing the notification styles:
    Code:
    @mixin extjs-notification-window-ui(
        $ui,
        $textAlignment:center,
        $padding:15px 5px 15px 5px,
        $width:200px,
        $bodyBackgroundColor:#FFFFFF,
        $windowBackgroundColor:#FFFFFF,
        $headerBackgroundColor:null,
        $bodyBorder:null,
        $windowImage:null,
        $headerBorder:null
    ){
        @if $ui == null {
            $ui:"";
        }
        @else {
            $ui:-#{$ui};
        }
        .ux-notification-window .x-window-body#{$ui}{
            text-align:$textAlignment;
            padding:$padding;
            width:$width;
            background-color:$bodyBackgroundColor;
            border:$bodyBorder;
        }
        .ux-notification-icon-information{
            background-image:url('icon_info.png');
        }
        .ux-notification-icon-error{
            background-image:url('icon_error.png');
        }
        .x-window-header#{$ui}-top{
            background-color:$headerBackgroundColor;
            border:$headerBorder;
        }
        body .ux-notification-window{
            background-color:$windowBackgroundColor;
            background-image:$windowImage;
        }
        .x-nlg .x-window-header#{$ui}-top-mc, .x-nlg .x-window#{$ui}-mc{
            background-color:$windowBackgroundColor;
        }
        .x-nlg .x-window#{$ui}-mc{
            background-color:$bodyBackgroundColor;
            background-image:$windowImage;
        }
    }
    Then inside of your scss file add the call to make the regular style and the "light" style:
    Code:
    @include extjs-notification-window-ui(null,center,15px 5px 15px 5px,200px,null,null,null,null,null);
    @include extjs-notification-window-ui("light",center,15px 5px 18px 5px,200px,transparent,#FFFFFF,transparent,0px solid white,url('fader.png'),0px none transparent);
    @include extjs-window-ui($ui-label:"light",$ui-border-radius:$window-border-radius,$ui-border-color:$window-border-color,$ui-inner-border-color:$window-inner-border-color,
                    $ui-header-color:$window-header-color,$ui-body-border-color:$window-body-border-color,$ui-body-background-color:$window-body-background-color,
                $ui-body-color:$window-body-color,$ui-background-color:#FFFFFF
            );
    If you just want the CSS w/o doing the compiling etc, this is what the CSS produces:
    Code:
    /* line 69, ../sass/ext-portal-all.scss */
    .ux-notification-window .x-window-body {
      text-align: center;
      padding: 15px 5px 15px 5px;
      width: 200px;
      background-color: null;
      border: null;
    }
    
    
    /* line 76, ../sass/ext-portal-all.scss */
    .ux-notification-icon-information {
      background-image: url("icon_info.png");
    }
    
    
    /* line 79, ../sass/ext-portal-all.scss */
    .ux-notification-icon-error {
      background-image: url("icon_error.png");
    }
    
    
    /* line 82, ../sass/ext-portal-all.scss */
    .x-window-header-top {
      background-color: null;
      border: null;
    }
    
    
    /* line 86, ../sass/ext-portal-all.scss */
    body .ux-notification-window {
      background-color: null;
      background-image: null;
    }
    
    
    /* line 90, ../sass/ext-portal-all.scss */
    .x-nlg .x-window-header-top-mc, .x-nlg .x-window-mc {
      background-color: null;
    }
    
    
    /* line 93, ../sass/ext-portal-all.scss */
    .x-nlg .x-window-mc {
      background-color: null;
      background-image: null;
    }
    
    
    /* line 69, ../sass/ext-portal-all.scss */
    .ux-notification-window .x-window-body-light {
      text-align: center;
      padding: 15px 5px 18px 5px;
      width: 200px;
      background-color: transparent;
      border: 0px solid white;
    }
    
    
    /* line 76, ../sass/ext-portal-all.scss */
    .ux-notification-icon-information {
      background-image: url("icon_info.png");
    }
    
    
    /* line 79, ../sass/ext-portal-all.scss */
    .ux-notification-icon-error {
      background-image: url("icon_error.png");
    }
    
    
    /* line 82, ../sass/ext-portal-all.scss */
    .x-window-header-light-top {
      background-color: transparent;
      border: 0px none transparent;
    }
    
    
    /* line 86, ../sass/ext-portal-all.scss */
    body .ux-notification-window {
      background-color: white;
      background-image: url("fader.png");
    }
    
    
    /* line 90, ../sass/ext-portal-all.scss */
    .x-nlg .x-window-header-light-top-mc, .x-nlg .x-window-light-mc {
      background-color: white;
    }
    
    
    /* line 93, ../sass/ext-portal-all.scss */
    .x-nlg .x-window-light-mc {
      background-color: transparent;
      background-image: url("fader.png");
    }
    
    
    /* line 111, ../themes/stylesheets/ext4/default/widgets/_window.scss */
    .x-window-light {
      border-color: #a2b1c5;
      -moz-border-radius: 5px 5px 5px 5px;
      -webkit-border-radius: 5px 5px 5px 5px;
      -o-border-radius: 5px 5px 5px 5px;
      -ms-border-radius: 5px 5px 5px 5px;
      -khtml-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
      -moz-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      -webkit-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      -o-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
    }
    
    
    /* line 58, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-window-light {
      -moz-border-radius-topleft: 5px;
      -webkit-border-top-left-radius: 5px;
      -o-border-top-left-radius: 5px;
      -ms-border-top-left-radius: 5px;
      -khtml-border-top-left-radius: 5px;
      border-top-left-radius: 5px;
      -moz-border-radius-topright: 5px;
      -webkit-border-top-right-radius: 5px;
      -o-border-top-right-radius: 5px;
      -ms-border-top-right-radius: 5px;
      -khtml-border-top-right-radius: 5px;
      border-top-right-radius: 5px;
      -moz-border-radius-bottomright: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -o-border-bottom-right-radius: 5px;
      -ms-border-bottom-right-radius: 5px;
      -khtml-border-bottom-right-radius: 5px;
      border-bottom-right-radius: 5px;
      -moz-border-radius-bottomleft: 5px;
      -webkit-border-bottom-left-radius: 5px;
      -o-border-bottom-left-radius: 5px;
      -ms-border-bottom-left-radius: 5px;
      -khtml-border-bottom-left-radius: 5px;
      border-bottom-left-radius: 5px;
      padding: 4px 4px 4px 4px;
      border-width: 1px;
      border-style: solid;
      background-color: white;
    }
    
    
    /* line 91, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nlg .x-window-light-mc {
      background-color: white;
    }
    
    
    /* line 104, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-light {
      padding: 0 !important;
      border-width: 0 !important;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      -o-border-radius: 0px;
      -ms-border-radius: 0px;
      -khtml-border-radius: 0px;
      border-radius: 0px;
      background-color: transparent;
      background-position: 1000505px 1000505px;
    }
    /* line 147, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-light-tl,
    .x-nbr .x-window-light-bl,
    .x-nbr .x-window-light-tr,
    .x-nbr .x-window-light-br,
    .x-nbr .x-window-light-tc,
    .x-nbr .x-window-light-bc,
    .x-nbr .x-window-light-ml,
    .x-nbr .x-window-light-mr {
      zoom: 1;
      background-image: url('../../resources/themes/images/default/window/window-light-corners.gif');
    }
    /* line 168, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-light-ml,
    .x-nbr .x-window-light-mr {
      zoom: 1;
      background-image: url('../../resources/themes/images/default/window/window-light-sides.gif');
      background-position: 0 0;
      background-repeat: repeat-y;
    }
    /* line 200, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-light-mc {
      padding: 0 0 0 0;
    }
    
    
    /* line 130, ../themes/stylesheets/ext4/default/widgets/_window.scss */
    .x-window-body-light {
      border-color: #a9bfd3;
      border-width: 1px;
      background: #dfe8f6;
      color: black;
    }
    
    
    /* line 140, ../themes/stylesheets/ext4/default/widgets/_window.scss */
    .x-window-header-light {
      border-color: #a2b1c5;
      zoom: 1;
    }
    
    
    /* line 145, ../themes/stylesheets/ext4/default/widgets/_window.scss */
    .x-window-header-text-light {
      color: #04468c;
      font-weight: bold;
      line-height: 11px;
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: ignore;
      cursor: default;
      white-space: nowrap;
      overflow: visible;
      font-family: tahoma, arial, verdana, sans-serif;
      font-size: 11px;
    }
    
    
    /* line 58, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-window-header-light-top {
      -moz-border-radius-topleft: 5px;
      -webkit-border-top-left-radius: 5px;
      -o-border-top-left-radius: 5px;
      -ms-border-top-left-radius: 5px;
      -khtml-border-top-left-radius: 5px;
      border-top-left-radius: 5px;
      -moz-border-radius-topright: 5px;
      -webkit-border-top-right-radius: 5px;
      -o-border-top-right-radius: 5px;
      -ms-border-top-right-radius: 5px;
      -khtml-border-top-right-radius: 5px;
      border-top-right-radius: 5px;
      -moz-border-radius-bottomright: 0;
      -webkit-border-bottom-right-radius: 0;
      -o-border-bottom-right-radius: 0;
      -ms-border-bottom-right-radius: 0;
      -khtml-border-bottom-right-radius: 0;
      border-bottom-right-radius: 0;
      -moz-border-radius-bottomleft: 0;
      -webkit-border-bottom-left-radius: 0;
      -o-border-bottom-left-radius: 0;
      -ms-border-bottom-left-radius: 0;
      -khtml-border-bottom-left-radius: 0;
      border-bottom-left-radius: 0;
      padding: 5px 5px 0 5px;
      border-width: 1px;
      border-style: solid;
      background-color: white;
    }
    
    
    /* line 91, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nlg .x-window-header-light-top-mc {
      background-color: white;
    }
    
    
    /* line 104, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-top {
      padding: 0 !important;
      border-width: 0 !important;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      -o-border-radius: 0px;
      -ms-border-radius: 0px;
      -khtml-border-radius: 0px;
      border-radius: 0px;
      background-color: transparent;
      background-position: 1000505px 1000000px;
    }
    /* line 147, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-top-tl,
    .x-nbr .x-window-header-light-top-bl,
    .x-nbr .x-window-header-light-top-tr,
    .x-nbr .x-window-header-light-top-br,
    .x-nbr .x-window-header-light-top-tc,
    .x-nbr .x-window-header-light-top-bc,
    .x-nbr .x-window-header-light-top-ml,
    .x-nbr .x-window-header-light-top-mr {
      zoom: 1;
      background-image: url('../../resources/themes/images/default/window-header/window-header-light-top-corners.gif');
    }
    /* line 168, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-top-ml,
    .x-nbr .x-window-header-light-top-mr {
      zoom: 1;
      background-image: url('../../resources/themes/images/default/window-header/window-header-light-top-sides.gif');
      background-position: 0 0;
      background-repeat: repeat-y;
    }
    /* line 200, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-top-mc {
      padding: 0px 0px 0 0px;
    }
    
    
    /* line 58, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-window-header-light-right {
      -moz-border-radius-topleft: 0;
      -webkit-border-top-left-radius: 0;
      -o-border-top-left-radius: 0;
      -ms-border-top-left-radius: 0;
      -khtml-border-top-left-radius: 0;
      border-top-left-radius: 0;
      -moz-border-radius-topright: 5px;
      -webkit-border-top-right-radius: 5px;
      -o-border-top-right-radius: 5px;
      -ms-border-top-right-radius: 5px;
      -khtml-border-top-right-radius: 5px;
      border-top-right-radius: 5px;
      -moz-border-radius-bottomright: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -o-border-bottom-right-radius: 5px;
      -ms-border-bottom-right-radius: 5px;
      -khtml-border-bottom-right-radius: 5px;
      border-bottom-right-radius: 5px;
      -moz-border-radius-bottomleft: 0;
      -webkit-border-bottom-left-radius: 0;
      -o-border-bottom-left-radius: 0;
      -ms-border-bottom-left-radius: 0;
      -khtml-border-bottom-left-radius: 0;
      border-bottom-left-radius: 0;
      padding: 5px 5px 5px 0;
      border-width: 1px;
      border-style: solid;
      background-color: white;
    }
    
    
    /* line 91, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nlg .x-window-header-light-right-mc {
      background-color: white;
    }
    
    
    /* line 104, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-right {
      padding: 0 !important;
      border-width: 0 !important;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      -o-border-radius: 0px;
      -ms-border-radius: 0px;
      -khtml-border-radius: 0px;
      border-radius: 0px;
      background-color: transparent;
      background-position: 1000005px 1000500px;
    }
    /* line 147, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-right-tl,
    .x-nbr .x-window-header-light-right-bl,
    .x-nbr .x-window-header-light-right-tr,
    .x-nbr .x-window-header-light-right-br,
    .x-nbr .x-window-header-light-right-tc,
    .x-nbr .x-window-header-light-right-bc,
    .x-nbr .x-window-header-light-right-ml,
    .x-nbr .x-window-header-light-right-mr {
      zoom: 1;
      background-image: url('../../resources/themes/images/default/window-header/window-header-light-right-corners.gif');
    }
    /* line 168, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-right-ml,
    .x-nbr .x-window-header-light-right-mr {
      zoom: 1;
      background-image: url('../../resources/themes/images/default/window-header/window-header-light-right-sides.gif');
      background-position: 0 0;
      background-repeat: repeat-y;
    }
    /* line 200, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-right-mc {
      padding: 0px 0px 0px 0;
    }
    
    
    /* line 58, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-window-header-light-bottom {
      -moz-border-radius-topleft: 0;
      -webkit-border-top-left-radius: 0;
      -o-border-top-left-radius: 0;
      -ms-border-top-left-radius: 0;
      -khtml-border-top-left-radius: 0;
      border-top-left-radius: 0;
      -moz-border-radius-topright: 0;
      -webkit-border-top-right-radius: 0;
      -o-border-top-right-radius: 0;
      -ms-border-top-right-radius: 0;
      -khtml-border-top-right-radius: 0;
      border-top-right-radius: 0;
      -moz-border-radius-bottomright: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -o-border-bottom-right-radius: 5px;
      -ms-border-bottom-right-radius: 5px;
      -khtml-border-bottom-right-radius: 5px;
      border-bottom-right-radius: 5px;
      -moz-border-radius-bottomleft: 5px;
      -webkit-border-bottom-left-radius: 5px;
      -o-border-bottom-left-radius: 5px;
      -ms-border-bottom-left-radius: 5px;
      -khtml-border-bottom-left-radius: 5px;
      border-bottom-left-radius: 5px;
      padding: 0 5px 5px 5px;
      border-width: 1px;
      border-style: solid;
      background-color: white;
    }
    
    
    /* line 91, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nlg .x-window-header-light-bottom-mc {
      background-color: white;
    }
    
    
    /* line 104, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-bottom {
      padding: 0 !important;
      border-width: 0 !important;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      -o-border-radius: 0px;
      -ms-border-radius: 0px;
      -khtml-border-radius: 0px;
      border-radius: 0px;
      background-color: transparent;
      background-position: 1000000px 1000505px;
    }
    /* line 147, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-bottom-tl,
    .x-nbr .x-window-header-light-bottom-bl,
    .x-nbr .x-window-header-light-bottom-tr,
    .x-nbr .x-window-header-light-bottom-br,
    .x-nbr .x-window-header-light-bottom-tc,
    .x-nbr .x-window-header-light-bottom-bc,
    .x-nbr .x-window-header-light-bottom-ml,
    .x-nbr .x-window-header-light-bottom-mr {
      zoom: 1;
      background-image: url('../../resources/themes/images/default/window-header/window-header-light-bottom-corners.gif');
    }
    /* line 168, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-bottom-ml,
    .x-nbr .x-window-header-light-bottom-mr {
      zoom: 1;
      background-image: url('../../resources/themes/images/default/window-header/window-header-light-bottom-sides.gif');
      background-position: 0 0;
      background-repeat: repeat-y;
    }
    /* line 200, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-bottom-mc {
      padding: 0 0px 0px 0px;
    }
    
    
    /* line 58, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-window-header-light-left {
      -moz-border-radius-topleft: 5px;
      -webkit-border-top-left-radius: 5px;
      -o-border-top-left-radius: 5px;
      -ms-border-top-left-radius: 5px;
      -khtml-border-top-left-radius: 5px;
      border-top-left-radius: 5px;
      -moz-border-radius-topright: 0;
      -webkit-border-top-right-radius: 0;
      -o-border-top-right-radius: 0;
      -ms-border-top-right-radius: 0;
      -khtml-border-top-right-radius: 0;
      border-top-right-radius: 0;
      -moz-border-radius-bottomright: 0;
      -webkit-border-bottom-right-radius: 0;
      -o-border-bottom-right-radius: 0;
      -ms-border-bottom-right-radius: 0;
      -khtml-border-bottom-right-radius: 0;
      border-bottom-right-radius: 0;
      -moz-border-radius-bottomleft: 5px;
      -webkit-border-bottom-left-radius: 5px;
      -o-border-bottom-left-radius: 5px;
      -ms-border-bottom-left-radius: 5px;
      -khtml-border-bottom-left-radius: 5px;
      border-bottom-left-radius: 5px;
      padding: 5px 0px 5px 5px;
      border-width: 1px;
      border-style: solid;
      background-color: white;
    }
    
    
    /* line 91, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nlg .x-window-header-light-left-mc {
      background-color: white;
    }
    
    
    /* line 104, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-left {
      padding: 0 !important;
      border-width: 0 !important;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      -o-border-radius: 0px;
      -ms-border-radius: 0px;
      -khtml-border-radius: 0px;
      border-radius: 0px;
      background-color: transparent;
      background-position: 1000500px 1000005px;
    }
    /* line 147, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-left-tl,
    .x-nbr .x-window-header-light-left-bl,
    .x-nbr .x-window-header-light-left-tr,
    .x-nbr .x-window-header-light-left-br,
    .x-nbr .x-window-header-light-left-tc,
    .x-nbr .x-window-header-light-left-bc,
    .x-nbr .x-window-header-light-left-ml,
    .x-nbr .x-window-header-light-left-mr {
      zoom: 1;
      background-image: url('../../resources/themes/images/default/window-header/window-header-light-left-corners.gif');
    }
    /* line 168, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-left-ml,
    .x-nbr .x-window-header-light-left-mr {
      zoom: 1;
      background-image: url('../../resources/themes/images/default/window-header/window-header-light-left-sides.gif');
      background-position: 0 0;
      background-repeat: repeat-y;
    }
    /* line 200, ../themes/stylesheets/ext4/default/mixins/_frame.scss */
    .x-nbr .x-window-header-light-left-mc {
      padding: 0px 0px 0px 0px;
    }
    
    
    /* line 166, ../themes/stylesheets/ext4/default/widgets/_window.scss */
    .x-window-header-light-top {
      -moz-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      -webkit-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      -o-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
    }
    
    
    /* line 170, ../themes/stylesheets/ext4/default/widgets/_window.scss */
    .x-window-header-light-right {
      -moz-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset;
      -webkit-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset;
      -o-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset;
      box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset;
    }
    
    
    /* line 174, ../themes/stylesheets/ext4/default/widgets/_window.scss */
    .x-window-header-light-bottom {
      -moz-box-shadow: #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      -webkit-box-shadow: #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      -o-box-shadow: #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      box-shadow: #ecf2fb 0 -1px 0px 0 inset, #ecf2fb -1px 0 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
    }
    
    
    /* line 178, ../themes/stylesheets/ext4/default/widgets/_window.scss */
    .x-window-header-light-left {
      -moz-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      -webkit-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      -o-box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
      box-shadow: #ecf2fb 0 1px 0px 0 inset, #ecf2fb 0 -1px 0px 0 inset, #ecf2fb 1px 0 0px 0 inset;
    }
    (If you are using ext-all.css then "{theme}" will be "default")

    Ok, now add these files to resources/themes/images/{theme}/window/
    window-light-corners.gif
    window-light-sides.gif

    Add these files to resources/themes/images/{theme}/window-header/
    window-header-light-bottom-corners.gif
    window-header-light-bottom-side.gif
    window-header-light-left-corners.gif
    window-header-light-left-side.gif
    window-header-light-right-corners.gif
    window-header-light-right-side.gif
    window-header-light-top-corners.gif
    window-header-light-top-side.gif

    Make sure your link paths are setup correctly inside of your CSS file.

    The good thing about this is that now you also have a new theme for all of your windows. Just add ui:'light' to your window config and you will have a new light style for your windows too.

    http://www.djengineer.com/ExtJSExamples/images/window-light-corners.gif

    http://www.djengineer.com/ExtJSExamples/images/window-light-sides.gif

    http://www.djengineer.com/ExtJSExamples/images/window-header-light-bottom-corners.gif

    http://www.djengineer.com/ExtJSExamples/images/window-header-light-bottom-sides.gif

    http://www.djengineer.com/ExtJSExamples/images/window-header-light-left-corners.gif

    http://www.djengineer.com/ExtJSExamples/images/window-header-light-left-sides.gif

    http://www.djengineer.com/ExtJSExamples/images/window-header-light-right-sides.gif

    http://www.djengineer.com/ExtJSExamples/images/window-header-light-right-corners.gif

    http://www.djengineer.com/ExtJSExamples/images/window-header-light-top-sides.gif

    http://www.djengineer.com/ExtJSExamples/images/window-header-light-top-corners.gif
    ExtJS 4.0 - Ext.ux.grid.FooterSummary (Coming Soon)
    ExtJS 4.0 - Ext.ux.form.field.IPhoneSwitch (Coming Soon)
    ExtJS 4.0 - Ext.ux.grid.HeaderFilter
    (Updates Coming Soon)
    ExtJS 4.0 - Ext.ux.menu.DynamicMenu

    ExtJS 4.0 - Ext.ux.form.field.ClearableCombo
    ExtJS 4.0 - Ext.ux.form.field.FormPanelEditor
    ExtJS 4.0 - Grouping Extra Features (Overrides) (Updates Coming Soon)

  7. #27
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    88
    Vote Rating
    0
    SMMJ_Dev will become famous soon enough

      0  

    Default


    The above update will make the styles work across all browsers and will create a new window style too.

    Here are some images from all the different browsers:

    IE7
    IE7NotificationLight.png
    IE8
    IE8NotificationLight.png
    IE9
    IE9NotificationLight.png
    Chrome
    ChromeNotificationLight.png
    FireFox
    FFNotificationLight.png

    Here is an example of the new light style for the window it creates:
    http://www.djengineer.com/ExtJSExamp...ightWindow.png
    Last edited by SMMJ_Dev; 25 Sep 2011 at 10:22 AM. Reason: add more pics
    ExtJS 4.0 - Ext.ux.grid.FooterSummary (Coming Soon)
    ExtJS 4.0 - Ext.ux.form.field.IPhoneSwitch (Coming Soon)
    ExtJS 4.0 - Ext.ux.grid.HeaderFilter
    (Updates Coming Soon)
    ExtJS 4.0 - Ext.ux.menu.DynamicMenu

    ExtJS 4.0 - Ext.ux.form.field.ClearableCombo
    ExtJS 4.0 - Ext.ux.form.field.FormPanelEditor
    ExtJS 4.0 - Grouping Extra Features (Overrides) (Updates Coming Soon)

  8. #28
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    306
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    great job, thanks a lot for sharing..
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  9. #29
    Touch Premium Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    192
    Vote Rating
    0
    jmaia is on a distinguished road

      0  

    Default Display notification window from the top or bottom, centered

    Display notification window from the top or bottom, centered


    Hi,

    Once again congrats on a great component.

    Is there a way to display the notification window from the top or bottom, centered on the available container space ?

    Something like:

    Code:
    corner: 'bc'  //(meaning 'bottom centered')
    or

    Code:
    corner: 'tc' //(meaning 'top centered')
    Would be neat because some users are not really paying much attention to what goes on on the corners of the screen, but if the box is displayed on the center, their attention is drawn to it.

    Regards,

    jm

  10. #30
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    33
    Vote Rating
    0
    EmCy90 is on a distinguished road

      0  

    Default


    Couldn't blue it together can anyone upload a working example ?