Architect Pattern Library

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

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

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

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

Sencha Cmd is a command-line suite of tools for building your Sencha applications. Although it has been a part of the Sencha toolbox for a few years, Cmd has recently matured into the cornerstone of Sencha application development. Follow these Steps : 1.  To generate a Workspace, use this command: sencha -sdk /path/to/sdk generate workspace /path/to/workspace eg: sencha -sdk /Rajavk/senchaapi/ext4.2.2 generate workspace /Rajavk/mysenchworkspace 2. Next, generate app: sencha -sdk /path/to/ExtJssdkFolder generate app MyAppName /path/to/workspace/MyAppFolder Eg: sencha -sdk /Rajavk/senchaapi/ext4.2.2 generate app MyFirstApp /Rajavk/mysenchworkspace/myfirstapp 3)  Go to project path and create sample controller through Sencha Cmd. eg: sencha generate controller MyControllerName 4)  Create Model using following command eg: sencha generate model ServerModel name:string 5)  Create sample view using following command (ExtJs Specific. Doesn’t work fo...

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

 Normally ExtJS 4 Data is sent in Url encoded format which in my web service code was not getting accepted. So I tried searching over the internet, but didn't got much help.         So I thought of writing of my own, following is the code which actually converts my required params and send it to webservice in JSON format in POST.      Normally based on your JSON data representation you can modify based  on your need.  in beforeload listeners in grid. store.proxy.jsonData = { /*** Your JSON data here  ***/}; //Source Code Attached function  renderMyGrid(){            Ext.define( 'SampleModel' , {         extend:  'Ext.data.Model' ,         fields: [ 'id' ,  'name' ,  'location' ,  'description' ,  'owner' ] ,         idPro...