Architect Pattern Library

The Ext JS framework is built in such a manner that makes it easy to extend. Ext JS extensions allow developers to create new classes that are derived from existing Ext JS classes, allowing the new class to use both its own new methods and the methods of the class that it extends. The Ext JS plug-in architecture allows developers to create new classes that do not depend on any existing Ext JS class (although they typically extend Ext.util.Observable). In this article learn how to build your own Ext JS extensions and plug-ins. Learn about the Ext JS classes, components, and how to extend them to create your own extensions and plug-ins. Introduction Ext JS is a comprehensive JavaScript framework that includes a vast collection of features, including cross-browser-compatible JavaScript helper utilities for DOM traversal and manipulation and data object ...

ExtJS and AngularJS are the two industry leading frameworks for Rich UI development. This article compares these two frameworks over 30+ points around benefits, architecture, testing, mobility, performance, build and deployment among other things. Architectural Differences: * Application Design Framework * Components * Routing benefits * Testability * Data Binding * SEO Friendly * Mobile Solutions * Dom Approach * Deferred and Promises * Dirty checking * Deferred bootstrap Summary: ExtJS is component based (Grid, Tree, Forms, Charts); the code begins with extending API classes and configuring models, customizing the presentation or behavior/events if needed, adding these components to containers/layouts. It follows object oriented principles and MVC pattern and direct interaction with DOM is rarely needed. AngularJS, on the other hand, is declarative programming, we begin with adding AngularJS directives in plain HTML, configuring models, view configuration using ...

Advanced Server Integration with Data and Direct Many Ext JS developers have yet to take advantage of Ext Direct to directly call server methods from the browser. How to leverage Ext.Direct's existing functionality to make accessing your server data easier while eliminating common boiler-plate code. Ext JS – An Introduction Ext JS is a cross-browser JavaScript library for building rich internet applications. A Mature Framework. 3 Years Old. Current Version is 3.0RC1. Supports all major browsers. Is highly extensible. Includes lots of off-the-shelf components and widgets. Ext JS - Direct Introducing Ext.Direct Ext.Direct is a new package in Ext JS 3.0 Ext.Direct is JSONRPC on steroids. It aims to: Bridge the gap between the client and the server. Solve a lot of headaches involved in creating RIA’s such as: Validation. Code Structure – Separation of Logic Trees. Streamline RIA development by: Enabling developers to write less code. Simplifying the Client to Server communica...

Example1:  var jsonNum = "{\"items\": [\"1\",\"2\",\"3\"]}"; var jsonString = "{\"items\" : [\"first\",\"begin \",\" test \",\"best\",\"last\",\"end\"] } "                var jsobj = Ext.JSON.decode(jsonString);               console.log(jsobj.items[0]);  // returns array obj                                     var recs = jsobj.items;                              var jsObject = JSON.parse(jsonNum);                console.log(jsObject.items[1]); Example2: var obj1 = {user:"John",age:22,country:"USA"}; var obj2 = {user:"Will",age:27,country:"UK"}; var obj3 = {user:"Abiel",age:19,country:"Mexico"}; var obj4 = {u1:obj1, u2:obj2, u3:obj3}; doc...

1. For large datasets there are too handle it, infinite grid and buffered rendering grid.  The main difference is the infinite grid sends requests to load data on the fly where buffered rendering grid retrieves all the data in one go and the grid will only display a portion of that dataset based on the size of the grid.  http://docs.sencha.com/extjs/4.2.1/#!/example/grid/infinite-scroll.html  http://docs.sencha.com/extjs/4.2.1/#!/example/grid/buffer-grid.html  If the slowdown is the store loading all that data then I would suggest going with an infinite grid. If the slowdown is the grid rendering all that data then I would go with the buffered grid. 2.  You can use extraParams to send any extra data in an ajax, or just before you issue the update like so:  var cfg = {  myprop1: 'myvalue1',  myprop2: 'myvalue2'  };  store.getProxy().extraParams = {  props: Ext.encode(cfg)  };  record.set(values); 

Web socket  - Ajax - long poll WebSockets - is definitely the future. Long polling is dirty workaround of preventing creating connections for each request like AJAX does. But long polling was created when WebSockets didn't existed. Now due WebSockets, Long Polling is going away. Here is a chart  of Browsers that supports WebSockets right now. Comparison of different communication techniques: AJAX  - create connection to server on each request, sends request (with possible extra data as like request methods GET, POST, PUT, DELETE, .. , and arguments in url), and gets response from server. Then connection closes. It is single request > response for each AJAX call. Long poll  - creates connection to server like AJAX does, but keep-alive connection open for some time (not long though), during connection open client can receive data from server. Client have to reconnect periodically after connection is closed due to timeouts. On server side it still tre...

ExtJS is a powerful Javascript framework for developing rich Internet applications—but with great power comes great responsibility. If you are inexperienced or careless with your implementation, your development effort can quickly spin out of control. Your project structure might grow to become unruly, steepening the learning curve for developers new to the framework. Worse yet, performance issues may arise that can be tricky to deal with once they have a foothold within your application. Equipped with some tips from Senchacon ‘13 and my past experience with ExtJS, I’d like to share some knowledge that will help you be proactive against these issues and avoid potential roadblocks. Folder and Code Structure First, two pieces of advice that are not specific to ExtJS, but still helpful: Maintain an organized project structure.  Placing every view under “views” in a directory is likely to cause headaches somewhere down the line, especially if a developer unfamil...