JS Architect's

How to use Ext.LoadMask component for a stateless web application? I found an issue where loadMask z-index DIV element conflicted with modal window object z-index DIV element. loadmask component created for different target views for each screen and hidden but not destroyed. I spend good time to investigate issue in my application code. Version: EXT 4.2.0 Chrome - Browser Issues: var myMask = new Ext.LoadMask(mypanel , {msg:"Loading..."}); myMask.hide(); // Why myMask.hide(); simply destroy LoadMask instance, here DOM still exist in browser with style "visibility: hidden" Like this for more DIV element with this style are added to DOM. To work on my fix, I still see 'x-mask' element exist in dom even when my target view is destroyed. I want to understand difference between Ext.getBody().mask() /unmask() and var maskobj = new Ext.LoadMask({ msg: message, hideMode: 'display', target: targetComponent } ); maskobj.show(); Example:

How to turn-off Console logs? Traditional browsers doesn't support console object. This is one way to turn off console logs for your web application. How to switch off console object in Production? Call this util method when Ext application is ready. i,e inside init() or Launch() of Ext.app.Application class Example: init: function(app) { handleConsoleFn(false, false); } /* * Call once at begining to ensure your app can safely call console.log() * and console.dir(),even on legacy browsers that don't support it.You may not get useful logging on those browsers, * but at least you won't generate errors. * @params alertFallback if 'true', all logs becomes alerts in Legacy browsers like IE, if necessary (keep 'false' in production) * @params debugModeON if 'true', console object will be enabled, (keep 'false' in production) */ handleConsoleFn: function(alertFallback, debugModeON) { var me = this; if (typeof console ===