ExtJS

Types of Proxy

There are two main types of Proxy - Client and Server. The Client proxies save their data locally and include the following subclasses:

• LocalStorageProxy - saves its data to localStorage if the browser supports it
• SessionStorageProxy - saves its data to sessionStorage if the browsers supports it
• MemoryProxy - holds data in memory only, any data is lost when the page is refreshed

The Server proxies save their data by sending requests to some remote server. These proxies include:

• Ajax - sends requests to a server on the same domain
• JsonP - uses JSON-P to send requests to a server on a different domain
• Rest - uses RESTful HTTP methods (GET/PUT/POST/DELETE) to communicate with server
• Direct - uses Ext.direct.Manager to send requests

Store:

The Store class encapsulates a client side cache of Model objects. Stores load data via a Proxy, and also provide functions for sorting,filtering and querying the model instances contained within it.

Different types of Stores avaliable are

Ext.data.ArrayStore

Ext.data.BufferStore

Ext.data.DirectStore

Ext.data.JsonPStore

Ext.data.JsonStore

Ext.data.NodeStore

Ext.data.XmlStore

Ext.grid.property.Store

Creating a Store is easy - we just tell it the Model and the Proxy to use to load and save its data:

A Model represents some object that your application manages. For example, one might define a Model for Users, Products, Cars, or any other real-world object that we want to model in the system. Models are registered via the model manager, and are used by stores, which are in turn used by many of the data-bound components in Ext.

Models are defined as a set of fields and any arbitrary methods and properties relevant to the model.

 // Set up a model to use in our Store
 Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'firstName', type: 'string'},
         {name: 'lastName',  type: 'string'},
         {name: 'age',       type: 'int'},
         {name: 'eyeColor',  type: 'string'}
     ]
 });

 var myStore = Ext.create('Ext.data.Store', {
     model: 'User',
     proxy: {
         type: 'ajax',
         url: '/users.json',
         reader: {
             type: 'json',
             root: 'users'
         }
     },
     autoLoad: true
 });

Init( ): 

The init function is a special method that is called when your application boots. It is called before the Application's launch function is executed so gives a hook point to run any code before your Viewport is created.

The init function is a great place to set up how your controller interacts with the view, and is usually used in conjunction with another Controller function -control. The control function makes it easy to listen to events on your view classes and take some action with a handler function. Let's update our Users controller to tell us when the panel is rendered:

Ext.define('MyApp.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

    onPanelRendered: function() {
        console.log('The panel was rendered');
    }
});

actionMethods : Object

Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to 'GET' for 'read' actions and 'POST' for 'create', 'update' and 'destroy' actions. The Ext.data.proxy.Rest maps these to the correct RESTful methods.

Defaults to: {create: 'POST', read: 'GET', update: 'POST', destroy: 'POST'}

hideMode : String3

A String which specifies how this Component's encapsulating DOM element will be hidden. Values may be:

'display' : The Component will be hidden using the display: none style.

'visibility' : The Component will be hidden using the visibility: hidden style.

'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This is useful when a hidden Component must maintain measurable dimensions. Hiding using display results in a Component having zero dimensions.

Defaults to: 'display'

bubbleEvents : String[]2

An array of events that, when fired, should be bubbled to any parent container. See Ext.util.Observable.enableBubble.

Defaults to: ['add', 'remove']

id : String

The unique id of this component instance.

It should not be necessary to use this configuration except for singleton objects in your application. Components created with an id may be accessed globally using Ext.getCmp.

Instead of using assigned ids, use the itemId config, and ComponentQuery which provides selector-based searching for Sencha Components analogous to DOM querying. The Container class contains shortcut methods to query its descendant Components by selector.

Note that this id will also be used as the element id for the containing HTML element that is rendered to the page for this component. This allows you to write id-based CSS rules to style the specific instance of this component uniquely, and also to select sub-elements using this component's id as the parent.

Note: to avoid complications imposed by a unique id also see itemId.

Note: to access the container of a Component see ownerCt.

Defaults to an auto-assigned id.

itemId : String1

An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext.getCmp, use itemId with Ext.container.Container.getComponent which will retrieve itemId's or id's. Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container -- avoiding potential conflicts with Ext.ComponentManager which requires a unique id.

p1 = c.getComponent('p1'); // not the same as Ext.getCmp()

p2 = p1.ownerCt.getComponent('p2'); // reference via a sibling

viewConfig : Object6

A config object that will be applied to the grid's UI view. Any of the config options available for Ext.view.Table can be specified here. This option is ignored if view is specified.

fireEvent( eventName, args ) : Boolean

Fires the specified event with the passed parameters (minus the event name, plus the options object passed to addListener).

An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble.

enableBubble( events )4

Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present. There is no implementation in the Observable base class.

This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly.

callback : Function

A function to be called when a load request finishes. Will be called with the following config parameters:

Dom:The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.[1] Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).

Difference b/w Container and panel?

Element is wrapper for DOM element.

Component is basic class for all widgets.

Container is subclass of Component. It can have "items" (i.e. Container can contain other components).

Panel is subclass of Container. It can have header, footer, toolbars, and other docked items.

Difference b/w applyTo and ContentEl?

ApplyTo renders the panel into a target element (the panel body could still contain any content),contentEl uses the target element as its body content (the panel could still be rendered to any other element). The two methods are unrelated.

Generally, applyTo uses the specified element as the main element of the Component, while contentEl is only for Panels that simply moves the specified element into the body of the Panel when the Panel is rendered to use as the content!

Xtype:This property provides a shorter alternative to creating objects than using a full class name. Using xtype is the most common way to define component instances, especially in a container.

For example, the items in a form containing text fields could be created explicitly like so:

 items: [
     Ext.create('Ext.form.field.Text', {
         fieldLabel: 'Foo'
     }),
     Ext.create('Ext.form.field.Number', {
         fieldLabel: 'Num'
     })
 ]

But by using xtype, the above becomes:

 items: [
     {
         xtype: 'textfield',
         fieldLabel: 'Foo'
     },
     {
         xtype: 'numberfield',
         fieldLabel: 'Num'
     }
 ]