An Extjs4 message prompt box written by a foreign Daniel

I. usage requirements

Version Required by extjs4: extjs4.0.2 +

Browser requirements: IE8 +

Ii. Code

Paste my code hierarchy here

Page code

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> 

Style code


#instructions ul li {list-style-type:disc;list-style-position:outside;font-size:12px;margin:0px 0px 0px 20px;}/* Icons */.ux-notification-icon-information {background-image: url('../images/icon16_info.png');}.ux-notification-icon-error {background-image: url('../images/icon16_error.png');}/* Using standard theme */.ux-notification-window .x-window-body {text-align: center;padding: 15px 5px 15px 5px;}/* Custom styling */.ux-notification-light .x-window-header {background-color: transparent;}body .ux-notification-light {background-image: url('../images/fader.png');}.ux-notification-light .x-window-body {text-align: center;padding: 15px 5px 20px 5px;background-color: transparent;border: 0px solid white;}

Js control code


Ext. loader. setConfig ({enabled: true}); var reusable = null; Ext. application ({name: 'icationicationdemo', paths: {'ext. ux. window ':'. '}, requires: ['ext. ux. window. notification'], launch: function () {Ext. create ('ext. container. viewport', {layout: 'fit ', title: 'ext. ux. window. notification-example and document ', items: [{layout: 'border', id: 'fullscreen', items: [{xtype: 'panel ', region: 'North ', layout: 'fit ', title: 'description', cont EntEl: 'structionsdiv ', id: 'inserts', height: '000000', autoScroll: true}, {xtype: 'panel', region: 'west', layout: 'fit ', title: 'demo 1-standard topic', width: '000000', items: [{xtype: 'panel ', id: 'demo1', border: false, padding: 20, items: [{xtype: 'button ', iconCls: 'ux-notification-icon-information', text: 'br-autoclosedelay', handler: function () {Ext. create ('widget. uxnotification', {title: 'notification', // tag Title position: 'br ', // start position manager: 'demo1', // group manager iconCls: 'ux-notification-icon-information', autoCloseDelay: 3000, // how long will the latency automatically disable the pop-up window spacing: 40, // the spacing of the pop-up window html: 'entering from the component \'s br corner. 3000 milliseconds autoCloseDelay. <br/> Increasd spacing. '}). show (); Ext. create ('widget. uxnotification', {title: 'notification', position: 'br ', manager: 'demo1', iconCls: 'ux-Notification-icon-error', autoCloseD Elay: 3000, spacing: 20, html: 'entering from the component \'s br corner. 3000 milliseconds autoCloseDelay. <br/> Increased spacing. '}). show (); Ext. create ('widget. uxnotification', {title: 'notification', position: 'br ', manager: 'demo1', iconCls: 'ux-Notification-icon-information', autoCloseDelay: 3000, spacing: 20, html: 'entering from the component \'s br corner. 3000 milliseconds autoCloseDelay. <br/> Incr Eased spacing. '}). show () ;},{ xtype: 'component', border: false, padding: 5 },{ xtype: 'click', iconCls: 'ux-notification-icon-information', text: 'bl-stickonclick', handler: function () {Ext. create ('widget. uxnotification', {title: 'notification', corner: 'bl', stickOnClick: false, manager: 'demo1', iconCls: 'ux-Notification-icon-information', html: 'entering from the component \'s bl corner. stickOnClick se T to false. '}). show () ;},{ xtype: 'component', border: false, padding: 5 },{ xtype: 'click', iconCls: 'ux-notification-icon-information', text: 'B-stickWhileHover', handler: function () {Ext. create ('widget. uxnotification', {title: 'notification', position: 'B', manager: 'demo1', stickWhileHover: false, iconCls: 'ux-Notification-icon-information', html: 'entering from the component \'s B edge. stickWhileHover Set to false. '}). show () ;},{ xtype: 'component', border: false, padding: 5 },{ xtype: 'click', iconCls: 'ux-notification-icon-information', text: 'tl-useXAxis ', handler: function () {Ext. create ('widget. uxnotification', {title: 'notification', position: 'tl ', manager: 'demo1', useXAxis: true, iconCls: 'ux-Notification-icon-information', html: 'entering from the component \'s tl corner. using the x-axis. '}). s How () ;},{ xtype: 'component', border: false, padding: 5 },{ xtype: 'call', iconCls: 'ux-notification-icon-information', text: 'br-reuse', handler: function () {if (! Reusable) {reusable = Ext. create ('widget. uxnotification', {title: 'notification', closeAction: 'hide ', position: 'br', manager: 'demo1', useXAxis: false, iconCls: 'ux-notification-icon-information'});} reusable. update ('entering from the component \'s bl corner. reusing a single notification with closeAction set to hide. <br/> Random number: '+ Math. floor (Math. random () * 10000); reusable. show () ;}}]}] },{ xtype: 'panel ', region: 'center', title: 'demo 2-Styled', items: [{xtype: 'panel ', id: 'demo2', border: false, padding: 20, items: [{xtype: 'button', iconCls: 'ux-notification-icon-information ', text:'t-Document as manager, handler: function () {Ext. create ('widget. uxnotification', {position: 'T', cls: 'ux-notification-light', closable: false, title: 'title', autoCloseDelay: 3000, iconCls: 'ux-notification-icon-information', html: 'Using document as manager. no title and closable: false. entering from the t edge. '}). show () ;},{ xtype: 'component', border: false, padding: 5 },{ xtype: 'click', iconCls: 'ux-notification-icon-information', text: 'tr-Animation ', handler: function () {Ext. create ('widget. uxnotification', {position: 'tr', useXAxis: true, cls: 'ux-notification-light', iconCls: 'ux-notification-icon-information', closable: false, title: 'title', html: 'Using elasticIn animation effect. no title and closable: false. ', slideInDuration: 800, slideBackDuration: 1500, autoCloseDelay: 3000, slideInAnimation: 'elasticin', slideBackAnimation: 'elasticin '}). show (); Ext. create ('widget. uxnotification', {position: 'tr', useXAxis: true, cls: 'ux-notification-light', iconCls: 'ux-notification-icon-information', closable: false, title: 'title', html: 'Using elasticIn animation effect. no title and closable: false. ', slideInDuration: 800, slideBackDuration: 1500, slideInAnimation: 'elasticin', slideBackAnimation: 'elasticin '}). show () ;},{ xtype: 'component', border: false, padding: 5 },{ xtype: 'click', iconCls: 'ux-notification-icon-information', text: 'tl-Variable size', handler: function () {Ext. create ('widget. uxnotification', {title: 'notification', position: 'tl ', manager: 'fullscreen', cls: 'ux-Notification-light', width: 250, height: 115, autoCloseDelay: 3000, iconCls: 'ux-notification-icon-information', html: 'Using document as manager. specifying width and height will override the css as long as the value is higher then the css value. '}). show (); Ext. create ('widget. uxnotification', {title: 'notification', position: 'tl ', manager: 'fullscreen', cls: 'ux-Notification-light', width: 200, height: 130, autoCloseDelay: 3000, iconCls: 'ux-notification-icon-information', html: 'Using document as manager. specifying width and height will override the css as long as the value is higher then the css value. '}). show (); Ext. create ('widget. uxnotification', {title: 'notification', position: 'tl ', manager: 'fullscreen', cls: 'ux-Notification-light', width: 300, height: 150, autoCloseDelay: 3000, iconCls: 'ux-notification-icon-information', html: 'Using document as manager. specifying width and height will override the css as long as the value is higher then the css value. '}). show () ;},{ xtype: 'component', border: false, padding: 5 },{ xtype: 'click', iconCls: 'ux-notification-icon-information', text: 'tr-Animation ', handler: function () {Ext. create ('widget. uxnotification', {title: 'notification', position: 'tr', manager: 'inserts', cls: 'ux-Notification-light', iconCls: 'ux-notification-icon-information', html: 'Using bounceOut/easeIn animation effect. ', autoCloseDelay: 4000, slideBackDuration: 500, slideInAnimation: 'bounceout', slideBackAnimation: 'easein '}). show (); Ext. create ('widget. uxnotification', {title: 'notification', position: 'tr', manager: 'inserts', cls: 'ux-Notification-light', iconCls: 'ux-notification-icon-information', html: 'Using bounceOut/easeIn animation effect. ', slideBackDuration: 500, slideInAnimation: 'bounceout', slideBackAnimation: 'easein '}). show () ;},{ xtype: 'component', border: false, padding: 5 },{ xtype: 'click', iconCls: 'ux-notification-icon-information', text: 'All-ALL possible combinations ', handler: function () {var icationicationconfig = {position: 'tl', cls: 'ux-notification-light', closable: false, html: 'All positions', slideInAnimation: 'bounceout', slideBackAnimation: 'easein'}; Ext. create ('widget. uxnotification', icationicationconfig ). show (); icationicationconfig. useXAxis = true; Ext. create ('widget. uxnotification', icationicationconfig ). show (); icationicationconfig. position = 'tr'; Ext. create ('widget. uxnotification', icationicationconfig ). show (); icationicationconfig. useXAxis = false; Ext. create ('widget. uxnotification', icationicationconfig ). show (); icationicationconfig. position = 'br '; Ext. create ('widget. uxnotification', icationicationconfig ). show (); icationicationconfig. useXAxis = true; Ext. create ('widget. uxnotification', icationicationconfig ). show (); icationicationconfig. position = 'bl'; Ext. create ('widget. uxnotification', icationicationconfig ). show (); icationicationconfig. useXAxis = false; Ext. create ('widget. uxnotification', icationicationconfig ). show (); icationicationconfig. position = 'T'; Ext. create ('widget. uxnotification', icationicationconfig ). show (); icationicationconfig. position = 'R'; Ext. create ('widget. uxnotification', icationicationconfig ). show (); icationicationconfig. position = 'B'; Ext. create ('widget. uxnotification', icationicationconfig ). show (); icationicationconfig. position = 'l'; Ext. create ('widget. uxnotification', icationicationconfig ). show () ;}}]}]}) ;}});

III,



Effect 1




Effect 2


Other effects and animation effects will not be displayed here. If you are interested, you can view the effects by yourself or directly.



Original post