ExtJS Quick Start-Introduction

This article is constantly more , not wordy, loading:
Currently
EXTJS offers 2 usage protocols: GPL (free of charge) and commercial agreement (paid).
Please ferry yourself to the difference.

Ext JS Development history
Yui-ext's author Jack Slocum (Jack Slocum) intends to make a custom extension to the BSD-based Yahoo User Interface (Yui) library, but was later overshadowed by his father, Yui;
At the end of 2006 , Yui-ext was simplified to ext, reflecting its maturity and independence as a framework.
The company was founded in early 2007, ext is now dual licensed, using LGPL and a business license;
In the year of April 1, released the official version of 1.0 , the current version is 6.0;
The application architecture and SCSS of MVC/MVVM style have been introduced from 4.0 .
Starting from 5.0 , no longer support old browsers, such as IE5, 6, 7, etc.;
Starting with 6.0 , Sencha Touch and ExtJS are a sign that users can develop applications that support both traditional desktops and tablets or mobile phones.

The EXT JS Framework provides support for MVC and MVVM application architectures. There are some ideas that are the same in both architectures and are focused on separating the application code from the business logic .

What is MVC?

In an MVC framework, most classes are either models (Models), or views, or controllers (Controllers). Users (user) interact with the view (views) to display data in the model (Models). These interactions are monitored by the Controller (Controllers), and the controller (Controllers) updates the model (Models) and view (views) in response to interaction when needed.

Typically, models and views do not know each other, because the controller is primarily responsible for direct updates. Generally speaking, the controller (controllers) in an application contains most of the application logic. Ideally, views will contain a little bit of business logic. The model (models) is primarily a user data interface that contains the business logic for managing change data.

The goal of MVC is to clearly classify the responsibilities of each class in the application. Because each class has clear responsibilities, they are implicitly decoupled in a large application environment. This makes the application easy to test and maintain, and code reusability is enhanced.

What's MVVM?

The biggest difference between MVC and MVVM is that MVVM has an abstract view called the View model (ViewModel). The view model uses a technique called data binding to reconcile the changes between the data of the model and the presentation of the view.

As a result, the model and framework do as much work as possible to minimize or eliminate the direct operation view of the application logic .

MVC and MVVM

To understand how to choose the right framework in your application, first we should further define what the various abbreviations represent:

(M:model) model : This is the data for your application. A set of classes (called "models") defines the fields of their data (such as a user model with two fields: Username and password). By knowing how to present yourself through the packet model, the model can also be linked to other models.

Models are typically used in conjunction with stores to provide data to tables and other components. It is ideal to define the data logic (such as validation, transformations, etc.) that you might need in the model (Models).

(V:view) View : A component of any type is a view, and the view is a visual representation. For example: grids (grids), trees (trees), and panels (panels) are views.

(C:controller) controller : The controller is the one that maintains the logic of your views (view ' s logic) and makes your application work properly. The work of the controller may include rendering views, routing, instantiating the model, and any other type of application logic.

(Vm:viewmodel) view model : A view model is a class that manages the data for a view. It allows for interesting component bindings and data change notifications.

For your framework code, these application architectures provide structure and consistency. As agreed, our recommendations will have important benefits for you:

Each application works in the same way, so you just need to learn it once.

It's easy to share code between applications.

You can use Sencha cmd to create an optimized production version of the application. (Follow-up will be mentioned).

The UI user interface for an Ext JS application is a component that has one or more components. All components are subclasses of the Ext.component class, allowing them to participate in automation lifecycle management including instantiation, rendering, sizing, positioning, and destruction. Ext JS provides a range of useful components that any component can easily extend to create a custom component.

Inheritance Relationship of COMPONENTS!!!!!! [Very, very important component]

A container is a special type of component that can contain other components. A typical application is a component inheritance structure that has many nested components, like a tree structure. Containers are responsible for managing the life cycle of their subcomponents, including creation, rendering, size and location, and destruction. The component inheritance of a typical application starts at the top level of viewport, and it has other containers nested inside.

Subcomponents are added to the container by using the container's items configuration, the following example uses Ext.create () to create a two-panel initialization, and then add the viewport as a subassembly to viewport.

var childPanel1 = Ext.create(‘Ext.panel.Panel‘, {    title: ‘Child Panel 1‘,    html: ‘A Panel‘});var childPanel2 = Ext.create(‘Ext.panel.Panel‘, {    title: ‘Child Panel 2‘,    html: ‘Another Panel‘});Ext.create(‘Ext.container.Viewport‘, {    items: [ childPanel1, childPanel2 ]});

The container uses the layout manager to manage the size of the component and the location, and to get more information about the layout, visit the Layout and container guide

Xtypes and lazy Loading

Each component has a symbolic name called Xtype. Like Ext.panel.Panel, there is a xtype called ' Panel ', and the API documentation for the components lists all the xtype of the components. The example above shows how to add an already existing component to a container. However, in large applications, it is not ideal, because not all components are instantiated, and some components may never need to be initialized, depending on your application. For example, an application that uses the tab panel only needs to get the content of the tab after the user clicks. This is where the xtypes is going to be useful. It is instantiated when needed by allowing the child of the container to be configured in the front.

The following sample code demonstrates lazy instantiation and rendering a subcomponent of a container that uses a tab panel. Each label has an event listener, which is rendered when a warning label is displayed.

Ext.create (' Ext.tab.Panel ', {renderTo:Ext.getBody (), Height: -, Width: $, items: [{//explicitly define the xtype of this Component configuration.                //This tells the Container (The tab panel in this case)                //To instantiate a Ext.panel.Panel when it deems necessaryXtype' Panel ', Title:' Tab One 'Html:' The first tab ', listeners: {render: function() {Ext.MessageBox.alert (' Rendered One ',' Tab one was rendered. '); }                }            },            {//Xtype for all Component configurations in a ContainerTitle' Tab 'Html:' The Second tab ', listeners: {render: function() {Ext.MessageBox.alert (' Rendered One ',' Tab rendered. '); }                }            }        ]    });

Allowing this code will immediately produce the first tab of the Alert popup box. This occurs because this is the default tab tag, so the container immediately invokes the tab Panel of the Sick instantiation container.

The second tab box will not pop up until it is clicked, which shows when it is needed, which means that the render event is only notified when the tab is active.

Show and Hide

All of the components are constructed in the show and hide methods. The default CSS method used to hide components is "Display:none" but is changed when configured with Hidemode:

var panel = Ext.create(‘Ext.panel.Panel‘, {        renderTo: Ext.getBody(),        title: ‘Test‘,        html: ‘Test Panel‘,        hideMode: ‘visibility‘ // use the CSS visibility property to show and hide thiscomponent    });    panel.hide(); // hide the component    panel.show();show the component

Floating components

A floating component is the layout of a container that is placed outside the document by the absolute path of the CSS and not in the participating component. Some components, like Windows, are the default floats, and all components can be configured to float:

var panel = Ext.create(‘Ext.panel.Panel‘, {    200,    100,    true// make this panel an absolutely-positioned floating component    ‘Test‘,    ‘Test Panel‘});

The code above initializes a panel, but does not render. Normally, a component either has a Renderto configuration or is added to a component's container as a subassembly, but it is not required when it is a floating component. Floating components are rendered the first time the show method is called

?
1
Panel.show (); Render and show the floating panel
Here are some methods that can be configured for floating components

1.draggable: You can drag a floating component around the screen.

2.shadow: Customize the appearance of the floating component shadow.

3.alignTo: Assigns a floating component to a specific element.

4.center () floats the component to the center of the component

Creating a custom Component

Ingredient or extension
When creating a new UI class, the class must make a decision whether to have an instance of a component, or an extension component

Inheriting a recent base class based on functional requirements is recommended. This is because the automatic lifecycle management provided by Ext JS includes automatic rendering when needed, automatic resizing, and automatic location removal and destruction when managed by the layout.

It is easier to create new classes by building, and it is not recommended to use a new class to have a component that is externally rendered and managed.

Sub-class
Class system makes it very easy to extend the EXTJS framework. Ext.base is the building block of all Ext JS classes, and the prototype and static members of this class are inherited by other classes.

Although you can add a method at a lower level, developers typically want to start with a higher inheritance chain.

The following example creates a ext.component subclass:

Ext.define(‘My.custom.Component‘, {    ‘Ext.Component‘,    function() {       //...    }});

This example creates a new class ' My.custom.Component ', which inherits all the method attributes of Ext.component.

Template method: EXT JS uses template method mode to represent subclasses, behaviors.

This means that each class in the inheritance chain may contribute to some stage in the life cycle of an additional logical component. Each class implements its own unique behavior, and allows other implementations of its own specific logic to inherit from this class.

A typical example is the rendering method, which is a method defined in the component class that is responsible for the life cycle of the initialization component's rendering phase. Render cannot be overridden, but it is possible to invoke the OnRender method to implement its own property-specific method when processing a subclass implementation. Each OnRender method must call the parent class's OnRender method when contributing its own extra logic.

The following table shows the functionality of the OnRender template method.

The Render method is called (implemented through the layout manager). This method cannot be overridden and is implemented by the Ext base class, which invokes the This.onrender method, which implements the current subclass (if it is implemented). This invokes the version of the parent class, and so on. Finally, each class contributes its own functionality and controls the return of the Render method.

The following is a component subclass implementation

Onrendext.define (' My.custom.Component ', {
Extend: ' Ext.component ',
Onrender:function () {
This.callparent (arguments); Call the superclass OnRender method

    // perform additional rendering tasks here.}

});

It is important to note that many template methods have their own corresponding events, such as rendering events, that are performed when the rendering event is started. However, when a child tears, it must use the template method to execute the class logic instead of the event during the critical declaration cycle phase. Events can be programmed to stop or pause.

Here are the template methods for the components that some subclasses can implement:

InitComponent: This method is awakened by the class constructor method, used to initialize data, set properties, and attach event handling.

Beforeshow: Called before the component is displayed

OnShow: Allows you to add a behavior action that is visible to the component after the OnShow method of the superclass is called.

Aftershow: The method is called after the component is displayed.

Onshowcomplete: This method is called after the aftershow is completed

Onhide: You can add some action when hiding, and after calling the Onhide method of the superclass, the component will not be visible.

Afterhide: Event Handling after a component is hidden

OnRender: Events performed when rendering

AfterRender: Additional actions that can be added after rendering is complete. At this stage, the elements of the component have been added to the configuration or CSS thunder, and will be configured with visibility and enabled state.

Oneable: Component availability, when calling this event of a superclass, the component can use the

Ondisable: Event When the component is not available for processing.

Onadded: When the component is added, the component is added to the container. At this stage, the component is in the collection of child entries of the parent class container, and when this method of the superclass is called, the container is displayed, and if there is a reference, the reference is set.

Onremoved: The event that was removed. At this point, the component is removed from the parent container, but it has not yet been destroyed. After calling this method of the superclass, the container will not be displayed.

OnResize: Call Event when size changes

Onposition: Events that are called when location changes

OnDestroy: The event of the destruction

Beforedestroy: Before destroying

Aftersetposiotion: After setting the location

Aftercomponentlayout: After component layout

Beforecomponentlayout: Before component layout

Which class should we extend

Choosing one of the best inheritance classes is an efficiency issue that the functional base class must provide. One trend is to always inherit Ext.panel.Panel when you set up the UI component, these components need to be rendered and managed.

The Panel class has the following capabilities:

Boder

Header

Header Tools

Footer

Footer Buttons

Top Toolbar

Buttom Toolbar

Containig and managing child components

If these are not needed, then using the Panel class is a waste of resources.

Component
If the required component UI does not need to contain other components, then it is appropriate to extend ext.component if you are simply encapsulating the HTML to perform some form of demand. For example, the following class is a component that wraps HTML elements of a picture, allowing it to be set and retrieved via the SRC attribute of the image. There are also methods that are triggered when loading.

Ext.define (' Ext.ux.Image ', {extend:' Ext.component ',//Subclass Ext.componentAlias' Widget.managedimage ',//This component'll has an xtype of ' managedimage 'Autoel: {tag:' img ', Src:Ext.BLANK_IMAGE_URL, CLS:' My-managed-image '},//ADD custom processing to the OnRender phase.    //ADD a ' load ' listener to the element.OnRender: function() {         This. Autoel = Ext.apply ({}, This. Initialconfig, This. Autoel); This. Callparent (arguments); This. El.on (' Load ', This. OnLoad, This); }, OnLoad: function() {         This. FireEvent (' Load ', This); }, Setsrc: function(src) {        if( This. rendered) { This. el.dom.src = src; }Else{ This. src = src; }}, Getsrc: function(src) {        return  This. el.dom.src | | This. src; }});

Use the following:

image = Ext.create(‘Ext.ux.Image‘);Ext.create(‘Ext.panel.Panel‘, {    ‘Image Panel‘,`这里写代码片`    200,    renderTo: Ext.getBody(),    image ]});image.on(‘load‘, function() {    console.log(‘image loaded: ‘image.getSrc());});

Container Container
If the component contains other components, then it is appropriate for the container to be selected. At the panel level, it is important to remember that Ext.layout.container.Container is not intended to be rendered and managed by sub-components.

containers have the following methods :

Onbeforeadd: This method is called when a child component is added. A new component is passed that can be used to modify a component, or to prepare a container. Returns false to abort the add operation.

Onadd: Called when the component is added to completion. It is through components that have been added. This method can be used to update any of the internal structures that may depend on the state of the child elements.

OnRemove: It was added through the component. This method can be used to update any of the internal structures that may depend on the state of the child elements.

Beiforelayout: This method is called before the container has been developed (if needed) and renders its subcomponents.

AfterLayout: After calling the method, the container has been developed (if needed) and renders its subcomponents.

Panel Panels
If the UI interface requires header information, bottom information, and toolbars, then Ext.panel.Panel is the right choice.
It is important to note that a panel is a container. It is important to remember that layouts are used to render and manage subcomponents.

This type of extension ext.panel. Panels are typically very application-specific, typically used to aggregate other UI components (usually containers, or form fields) to configure the layout and provide the means by which the components contained by the control Tbar Bbar.
The panel has the following template methods :

Aftercollapse: Called when collapsing

Afterexpand: Called when expanded

Ondockedadd: Called when docked

Ondockedremove called when docking is removed.

ExtJS component Life cycle
There are three types of components: basic components, toolbar components, and form components.

Each of the following phases is an important stage in the life cycle of classes inherited from Component.

First Stage: Initialize
1, apply configuration options
classes inherited from Component do not need to provide a separate constructor (usually not provided). The constructor of the
Component not only applies the configuration options passed from the subclass, but it also does the following work.
2, create event
Any component has enabled, disable, Beforeshow, show, Beforehide, Hide, Bdforerender, Render,
Beforedesctory, destory events, these events can be called by any component.
3, registering the component instance in Componentmgr
so that the instance reference can be obtained through EXT.GETCMP.
4, calling the InitComponent method
This is one of the most important initialization steps, as a template method that subclasses can override as needed. The
InitComponent of the class being created is called first, and then is called through the superclass.initcomponent provided by the component to
. This method is very easy to implement, and you can override the constructor logic if you want.
5, the state is initialized
If the component has a state, the saved state is reloaded.
6, load plug-in
If the component has a specified plug-in, the plug-in is initialized at this time.
7, component rendering
If there is a configuration of Renderto or ApplyTo, the component will be rendered output immediately, otherwise, it will be deferred output, straight
to the component is explicitly called to display, or the output is called by its container.

Second Stage: Rendering
1, triggering BeforeRender events
This is a canceled event and if you need to provide a handler function to prevent the component from continuing rendering output.
2, set container
If no parent container is specified, its parent object is designated as its container by default.
3, calling the OnRender method
This is a very important way to perform rendering work for a subclass, which is a template method that can be overridden in subclasses to override its implementation logic as needed. The onRender of a class that is created directly is called first, and then it can call the OnRender method of the base class through
Superclass.onrender. This method can easily be re-implemented if you want
to override this method in any class that inherits the relationship.
4, do not hide components
By default, most components make it invisible by setting the style like X-hidden. When AutoShow is set to
True, the style of this hidden function is removed.
5, apply custom style
All Component subclasses support the specified CLS configuration property, which allows you to specify CSS styles for the
HTML elements rendered by Component. By adding a component's CLS properties, using standard style rules, it is a perfect way to customize the display of
visual components.
6, the Render method is triggered
A simple notification component has been successfully rendered.
7, call AfterRender
This is another template method that the subclass can re-implement or overwrite depending on the logic required. All subclasses can
invoke the method of the parent class by Superclass.afterrender.
8, the component is hidden or unavailable
is set according to the value of the configuration option.
9, the status event is initialized
The component that can be stateful defines events to specify the initialization and saving of the state. If provided, these events are
added.

Phase III: Destruction
1, trigger Beforedestroy matter
This is an event that can be canceled and, if necessary, may prevent the component from being destroyed by providing an event proxy.
2. Call the Beforedestroy method
Another template method, in which the parent class's methods can be re-implemented and invoked.
3. Remove Event Listener (agent)
If the component has already been rendered, remove the event listener list for its underlying HTML element, and then move the element from the DOM
Removed from the.
4. OnDestroy is called
This is also a template method that can be re-implemented in subclasses. It is important to note that the container class provides a
The default OnDestroy implementation, which cycles through the destruction of its member groups.
5. Component instances are unregistered from componentmgr
The object instance can no longer be obtained through EXT.GETCMP.
6. The Destroy event is triggered
This is just a simple reminder that the component was destroyed successfully.
7. Remove the event agent on Component
Components can own the event proxies independently of the elements, and remove them if they exist.

ExtJS Quick Start-Introduction