Architect Pattern Library

CODE SNIPPETS

1. Can you describe your workflow when you create a web page? 2. Name 3 ways to decrease page load. (perceived or actual load time) 3. Explain few Common Security Issues with Ajax. or limitations of Using Ajax on a Web Page? A. security, SEO search engine indexing, user experience, accessibility issues, browser integration, response time concerns, SEO 4. What is the difference between .call() and .apply()?  .call() is used when the number of the function’s arguments are known to the programmer  .apply() is used when the number is not known 5. Explain the purpose of each of the HTTP request types when used with a RESTful web service.   -- GET, POST, PUT, PATCH, DELETE, TRACE, OPTIONS, HEAD, Connect.     HEAD, GET, OPTIONS and TRACE) are defined as safe methods 6. Explain the difference between stateless and stateful protocols. Which type of protocol is HTTP? Explain your answer. -- A stateless communications protocol treats each request a...

How to customize Ext.Logger effectively? For development, We can customize Ext.Logger mechanism and add colors to text as below /** * Fancy Ext.Logger.warn(), error() * By including this file we'll force override of the Ext.Logger.warn() behavior. eg: Ext.Logger.error(errMsg); Ext.Logger.warn('Warning msg'); */ Ext.define('Master.util.Log', { singleton: true, /** * Logs color-coded console message; intended for development only * to be used in betwee debug directives. * @param {String} text to log */ warn: function(text) { console.log('%cWARN: %s', 'background: #222; color: orange', text); }, error: function(text) { console.log('%cERROR: %s', 'background: #d9e6ee; color: red', text); } }, function() { Ext.Logger.warn = Master.util.Log.warn; Ext.Logger.error = Master.util.Log.error; });

EXTJS4: Set global default Ajax timeout for sencha application Version Info: Ext JS 4.2x If we want to increase the timeout globally across my application. ExtJS documentation makes it look like setting Ext.Ajax.timeout will increase all timeouts, it’s just not true. This code sets 5 mins for forms, stores and ajax proxies calls within MVC application. Code snippet: Ext.Ajax.timeout= 300000; // 300 seconds (5 mins) Ext.override(Ext.form.Basic, { timeout: Ext.Ajax.timeout / 1000 }); Ext.override(Ext.data.proxy.Server, { timeout: Ext.Ajax.timeout }); Ext.override(Ext.data.Connection, { timeout: Ext.Ajax.timeout }); // If you are using Ext.define in your code. It creates new class and does not override timeout property in base class.Hence use above code snippet. Ext.define('Test.data.Connection', { override: 'Ext.data.Connection', timeout: 120000 });

ExtJS Fiddles (2016) // In exjts 4.1.x and 4.2.0, destroy() will not destroy its children components? Components without store binding  http://jsfiddle.net/mustafa0x/qVM82/1/ windows with stores http://jsfiddle.net/mustafa0x/qVM82/3/ EXT Speech Recognition Wrapper https://fiddle.sencha.com/#fiddle/3lu&view/editor Custom Editor for Property Grid http://jsfiddle.net/existdissolve/wMcQk/ Infinite scroll grid 4.2 https://fiddle.sencha.com/#view/editor&fiddle/e04 Cell editing - load store after layout event http://docs.sencha.com/extjs/4.2.4/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#cell-editing Grid cellediting https://fiddle.sencha.com/#fiddle/100a&view/editor doComponent Layout- style with google fonts https://fiddle.sencha.com/#fiddle/eoj Fieldset - clear fields https://fiddle.sencha.com/#fiddle/1bdg Generating a Checkbox Group from a Store https://druckit.wordpress.com/2015/02/12/ext-js-generating-a-checkbox-group-fr...

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 ===...

Extjs 4.2 FAQ: What is Ext? The Ext namespace (global object) encapsulates all classes, singletons, and utility methods provided by Sencha's libraries. Ext is singleton object. Ext.Base – all classes inherit from Ext.Base. It provides basic low-level functionality used by all classes Ext.Class – a factory for making new classes Ext.ClassLoader – responsible for ensuring that classes are available, loading them if they aren’t on the page already Ext.ClassManager – kicks off class creation and manages dependencies Ext.ComponentManger -base class for all Ext components The onReady() function takes  a function as an argument. The onReady() function is called when the document is loaded and DOM is ready. Adds a function to be called when the DOM is ready, and all required classes have been loaded Ext.onReady(function () { }); - Ext.define to signal class definition to complete. Ext.define -> Ext.Class { Pre-Processors: loader - extends - mixins - config - Static...

Javascript ! http://www.w3schools.com http://www.javascriptkit.com http://codingforums.com http://javascriptinterview.blogspot.com http://www.dotnetfunda.com http://js-x.com http://www.quackit.com http://javascript.internet.com http://www.javascript-examples.com http://dhtml-menu.com http://www.javascriptbank.com http://www.comptechdoc.org http://www.jscharts.com http://www.javascriptguide.com http://www.1stwebdesigner.com http://www.bestpsdtohtml.com http://snippetdb.com http://www.jsworkshop.com jQuery ! http://api.jquery.com http://learningjquery.com http://jqapi.com http://jqueryui.com http://forum.jquery.com http://bassistance.de/jquery-plugins http://visualjquery.com http://jqueryfordesigners.com http://filamentgroup.com/dwpe http://downloadify.info http://appendto.com http://fuelyourcoding.com http://ui.jquery.com http://docs.jquery.com http://tablesorter.com/docs jQuery Blogs! http://jquery-howto.blogspot.com http://jqueryfordesig...

Javascript Design Patterns http://addyosmani.com/resources/essentialjsdesignpatterns/book/ References The Essentials of Writing High Quality JavaScript http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/ JSPatterns http://www.jspatterns.com/ jQuery Anti-Patterns for Performance & Compression http://paulirish.com/2009/perf/ How DRY Affects JavaScript Performance http://velocityconf.com/velocityeu/public/schedule/detail/21634 Object Oriented JavaScript http://www.packtpub.com/object-oriented-javascript/book JavaScript Patterns http://shop.oreilly.com/product/9780596806767.do JavaScript: The Good Parts http://shop.oreilly.com/product/9780596517748.do Pro JavaScript Design Patterns http://jsdesignpatterns.com/ Essential JavaScript Design Patterns For Beginners, Volume 1. http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/ Eloquent JavaScript http://eloquentjavascript.net/

EXTJS Fiddles (2015) Grid - Generate Fake store with pagination http://jsfiddle.net/prajavk/Ufeyw/ Grid - Reconfigure grids http://jsfiddle.net/prajavk/t2bVJ/ Grid - Load two stores, hide columns, apply state http://jsfiddle.net/prajavk/P7ES5/ Grid - row expander + grouping http://jsfiddle.net/89Ljt/ Grid - load child grid on row expander http://jsfiddle.net/prajavk/9t3JE/ Nested grid with row expander http://jsfiddle.net/prajavk/3TxkA/ Grid - Preselect checkbox grid http://jsfiddle.net/prajavk/97fXp/ Combo - two fieldsearch http://jsfiddle.net/prajavk/7j4uW/  Grid - cell click event loads child grid http://jsfiddle.net/prajavk/5eq3T/ Grid -Action column with checkbox event http://jsfiddle.net/prajavk/ZLmY6/ Ext.Direct simulator- load nested grids http://jsfiddle.net/prajavk/622kF/ Ext.Ajax comet simulator for continous response http://jsfiddle.net/prajavk/3msnf/ Hasone - model http://jsfiddle.net/prajavk/yLLuG/ Grid - simulate live data ...

What is the difference between undefined value and null value? undefined means a variable has been declared but has not yet been assigned a value . On the other hand, null is an assignment value . It can be assigned to a variable as a representation of no value. Also, undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object. Unassigned variables are initialized by JavaScript with a default value of undefined . JavaScript never sets a value to null. That must be done programmatically.   "undefined" is   not  a reserved word in JavaScript. undeclared variables don't even exist undefined variables exist, but don't have anything assigned to them null variables exist and have null assigned to them //eg: undeclaredVariable = 1;  //undeclared, when a variable doesn't use var keyword var x = {}; // empty object var u; // declared, but undefined var n = null; // declared, defined to be null undeclar...

EXTJS Style Guide: -familiar and simple to learn -fast to develop, easy to debug, painless to deploy -well-organized, extensible and maintainable Naming conventions for ExtJS application: 1.Class Class name should be in CamelCased. Do not use underscores, hyphens, or any other nonalphanumeric character. eg: MyCustomClass Classes that are not distributed by Sencha should never use Ext as the top-level namespace. Class name should be with atleast one unique namespace separated by dot (.). eg:TopLevelNamespace.MyClassName The top-level namespaces and the actual class names should be in CamelCased, everything else should be all lower-cased. //Good eg:TopNamespace.midlevelnamespace.MyCustomClass eg:MyModule.view.UserGrid //Bad eg:MyCompany.useful_util.Debug_Toolbar  2.Use Namespaces to Group Related Components Namespaces should be based on directory structures. Directories should group components into logical modules based on functional business components. ...