Page 3 of 13 FirstFirst 12345 ... LastLast
Results 21 to 30 of 129

Thread: Ext.ux.window.Notification

  1. 13 Sep 2011, 7:17 AM #21
    eirik.lorentsen
    eirik.lorentsen is offline
    Sencha User eirik.lorentsen's Avatar
    Join Date
    Aug 2011
    Location
    Santiago, Chile
    Posts
    35

    Default Version 1.3

    Minor changes on how the component is destroyed.
  2. 13 Sep 2011, 9:48 AM #22
    kreeve_ctisn
    kreeve_ctisn is offline
    Sencha User
    Join Date
    May 2011
    Location
    Manchester, United Kingdom
    Posts
    19

    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. 13 Sep 2011, 11:43 AM #23
    twaindev
    twaindev is offline
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    242

    Default

    Thanks for the updates. I really like the new style.
  4. 17 Sep 2011, 11:40 PM #24
    fancing
    fancing is offline
    Sencha User fancing's Avatar
    Join Date
    Aug 2007
    Posts
    25

    Default

    Good extension, i added it to my site.
    Weibo: @???_ZengSN
    Twitter: @zengsn
    Website: http://zsn.cc
  5. 21 Sep 2011, 5:38 AM #25
    loiane
    loiane is offline
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    191

    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. 25 Sep 2011, 9:46 AM #26
    SMMJ_Dev
    SMMJ_Dev is offline
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    90

    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. 25 Sep 2011, 10:15 AM #27
    SMMJ_Dev
    SMMJ_Dev is offline
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    90

    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. 26 Oct 2011, 2:46 AM #28
    talha06
    talha06 is offline
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    327

    Default

    great job, thanks a lot for sharing..
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus
  9. 28 Oct 2011, 6:12 AM #29
    jmaia
    jmaia is offline
    Touch Premium Member
    Join Date
    Jan 2011
    Location
    Lisbon, Portugal
    Posts
    192

    Default 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. 28 Oct 2011, 7:27 AM #30
    EmCy90
    EmCy90 is offline
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    33

    Default

    Couldn't blue it together can anyone upload a working example ?
Page 3 of 13 FirstFirst 12345 ... LastLast
« Export store to Excel | Multi level grouping, summary and grand totals for Ext JS 4.2 »

Posting Permissions

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

Forum Rules