Ext 2 Overview (ext2.0 overview, from the official website)

Key points of major changes

This article briefly introduces 2.0 new changes. Note that the ext framework has undergone numerous minor improvements, bug fixes, and other changes throughout the process from 1.x to 2.0. It is still difficult to list them one by one. Therefore, this article focuses on some architectural transformations and some new functions. The following sections explain the details of each item.

• Component Model
  
  In 1.x, there are two classes: component and boxcomponent, but they are not deeply integrated into the framework. By 2.0, these two classes have been greatly improved and are all major components.
  . Although these classes are intended to hide details as much as possible for developers, a good understanding of the basic knowledge of the component lifecycle is conducive to further ext learning. See details
  .
• Container Model
  
  There are several core classes that can be used to generate a device (widgets) and layout that contains other components.Container
  It provides a basic structure for object inclusion and component layout, and is essential for the entire ext framework visualization.Panel
  Inherits from the container class to provide the UI base class with specific functions for the user program, which is the most common class in the container structure hierarchy.Window window
  Is a special type of panel, so that web applications are like desktop-style.View area viewport
  It is a practical container designed for full-screen web applications. See details
• Layouts
  
  The Layout Method in 1.x is centered around borderlayout and its related classes. 2.0, the overall layout architecture is built on the brand new container class and layout class.
  Borderlayout is now added to nine layout styles. The layout class has been completely rewritten and considered for maximum scalability.
  The layout management also benefits from the 2.0 Framework, removing the complex implementation that developers need to face before. See details
• Grid
  
  Grid components are often regarded as one of the core components of Ext, and continue to evolve in version 2.0. The new version of the user interface is more friendly and has better performance. New features include row summary, row grouping, and more functions based on plug-ins such as expandable rows and row numbering. See details
• Template xtemplate
  
  1.x's template class handles some simple templates, but it lacks robust support for complicated output tasks. In section 2.0, the new xtemplate supports subtemplates, Array Processing, direct code execution, logical judgment, and more useful functions. See details
• Data View dataview
  
  The 1.x template binds the data to the template to generate the UI view. Jsonview is a helper class for fast binding JSON data. 2.0 of dataview unified the above two methods
  The difference is that it inherits from boxcomponent to better support various layout methods. The new xtemplate class provides powerful support for template processing. See details
• Other new components
  
  These new components include action, cyclebutton, hidden (field), progressbar, and timefield. See details

Additional instructions

• Topic
  
  2.0 supports out-of-the-box themes for simplified use. EXT 1.x supports four sets of themes, but 2.0 is reduced to two sets. If you want to customize ext themes, the gray theme is a good blueprint, and some other 2.0 community theme
  You can also provide some ideas or use them directly. This is not part of API changes, but it should be mentioned here.
• Breakthrough Progress
  
  Unfortunately, some 2.0 of the changes cannot be backward compatible. Because no matter whether the related components or rendering models have been greatly modified from the underlying layer, many existing components must be rewritten in the old 1. X method, which is significantly different from the 1. X method. Upgrade guide from 1.x to 2.0
  We hope to help solve the upgrade problem of the existing ext 1. X program.

Component Model

Component Overview

One goal of 2.0 is to build programs with simple code blocks, or even simpler than ever. Component component
Class
First introduced in 1.x, but not fully integrated into the framework. In 2.0, the capabilities granted by components were greatly improved and improved, making them the most basic class in the entire architecture. Component Object
Provides a unified model for the creation, rendering, event processing, State management, and destruction of. Each component in ext has these features extended by component objects. This is the key feature of the 2.0 component object:

• Explicitly declare the builder chain and override the explicit constructor chaining and overriding
  
  The component passes a basic constructor along with the configuration into the subclass. The initcomponent function is used to provide the developed constructor logic. As long as a subclass of the inheritance chain is implemented, all components follow this method. In this case, the subclass can set relevant attributes in initcomponent to implement specific functions.
• Controllable rendering managed Rendering
  
  In 2.0, each component supports lazy rendering, also known as on-demand rendering ). Rendering Control is generally set for you automatically. Even so, you can also use the beforerender
  And Render
  Event Control rendering occurs and ends to achieve the most flexible custom control.
• Controllable destruction of managed destruction
  
  Each component has a destroy
  When the component is no longer needed, ext is responsible for the end control of the component, such as automatic garbage collection and destruction of component elements. Of course, destruction also provides relevant events, such as beforedestroy
  And destroy
  Logic processing can be performed according to the actual situation.
• Automatic Status Management
  
  To set and obtain the state in a component, you only need to make the Global Object statemanager
  And a status provider are initialized, so most components have the ability to automatically manage the status.
• Unified interface consistent interface for basic component Behavior
  
  Common behaviors, such as hiding, displaying, activating, and disabling, are the basic features of components. If necessary, these can be rewritten or formulated by subclass.
• Availability via componentmgr
  
  Each component of ext is registered by the component manager when it is created, that is, you can obtain any component at any time. You only need to call ext. getcmp ('id ').
• Support plug-in plugin support
  
  Now any component can be extended in the form of plug-ins. Plug-ins are essentially a type with the init method. This method will be passed in with a separate parameter (type: Ext. component. Plug-ins can be implemented through the plug-ins of components
  Configuration item. When a component is created, if a plug-in is available, the component will call the init Method on each plug-in and pass in its reference as a parameter. After running each plug-in, you can call the component method or respond to component events to implement your own functions.

Component Life Cycle component life cycle

In general, the object architecture of components satisfies
Works. The architecture is designed to control how most components are processed and transparent to end developers.
However, if you want to extend the component object or make some necessary settings, you must use a certain amount of time.
It is helpful to have a deep understanding of the lifecycle of component objects. The following content explains each important stage in a cycle for each component-based class:

Initialize Initialization

1. The configuration item object takes effect.
   The Config object is applied.
   
   The constructor of the component object will pass all configuration items into its subclass and perform all the following steps.
2. The underlying event of the component is created
   The base component events are created
   
   These events are triggered by component objects. Events include enable, disable, beforeshow, show, beforehide, hide, beforerender, render, beforedestroy, and destroy (see component API documentation ).
   Complete content ).
3. The component is registered in the component manager.
   The component is registered in componentmgr
   
   Initcomponent this method is always used in the subclass. In itself, this method is a template method (Template
   Method), used for each subclass to implement any required constructor logic (any needed Constructor
   Logic ). First, a class is created, and each class in each layer of the component object should call superclass. initcomponent. With this method, you can easily implement
   (Implement), or overwrites the logic of any layer of constructor.
4. Status awareness initialization (if any)
   State is initialized (if applicable)
   
   If the component is status aware, its status will be refreshed.
5. Load the plug-in (if any)
   Plugins are loaded (if applicable)
   
   If any plug-in is specified for this component, it will be initialized.
6. Render the plug-in (if required)
   The component is rendered (if applicable)
   
   If you specify the renderto
   Or applyto
   If you configure attributes, rendering starts immediately. Otherwise, it means delayed rendering, that is, waiting for explicit control display, or the command that its container informs it of display.

Rendering process rendering

1. Trigger beforerender event the beforerender event is fired
   
   This is an event that can be canceled. The specified handle (handler) can prevent the component from rendering.
2. Set the container is set
   
   If no container is specified, the parent node of the component located in the DOM element is used as the container.
3. Call the onrender method he onrender method is called
   
   This is the most important step for subclass rendering. Since this method is a template method, it is used for each subclass to implement any required rendering logic (any
   Needed render
   Logic ). First, a class is created, and each class in each layer of the component object should call superclass. onrender. With this method, you can easily implement
   (Implement), or overwrite any layer of rendering logic.
4. The component is the component in the "hidden" state is "unhidden"
   
   By default, many components are hidden by CSS style classes such as "X-hidden. If autoshow
   If the configured value is true, this "hide" style class does not apply to this component.
5. The custom class and style take effect for custom class and/or style applied.
   
   All child widgets support Cls.
   And Style
   These two special configuration attributes are used to specify custom CSS style classes and CSS rules. It is recommended to specify the CLS method to set the visualization of components and their parts. Because the style class applies to the outermost layer of the component markup, standard CSS rules inherit from any child element under the component.
6. Trigger render event the render event is fired
   
   This is a step for successful rendering of component notifications. At this time, you certainly think that the DOM element of the component is available. If you try to access the component before rendering, an exception is thrown.
7. Afterrender method called the afterrender method is called
   
   This is another template method that implements or overrides the specific "post-rendering" logic. Each subclass should call superclass. afterrender.
8. The component is hidden or disabled (if any) the component is den and/or disabled (if applicable)
   
   The hidden and disabled configurations take effect in this step.
9. All State-aware events are initialized (if any) Any State-specific events are initialized (if applicable)
   
   Status aware components can be declared with special loading and saving statuses by events. If supported, add such events.

Destruction

1. Trigger beforedesroy event the beforedestroy event is fired
   
   This is an event that can be canceled. The specified handler can prevent the component from being destroyed.
2. Beforedestroy method called the beforedestroy method is called
   
   This is another template method to implement or override the predefined destruction logic. Each subclass should call superclass. beforedestroy.
3. Element and Its listeners are removed
   
   If the component is rendered, the event interceptor of the element and the element in the DOM tree will be removed.
4. Ondestroy method called the ondestroy method is called
   
   This is another template method that implements or overrides the specific "post destruction" logic. Each subclass should call superclass. ondestroy.Note:
   Container class (container class, And all container subclasses) provides a default ondestroy implementation that automatically traverses each item in its items set and executes the destroy method on the child component respectively.
5. In the component manager, cancel the registration of the component object component is unregistered from componentmgr.
   
   This prevents you from getting component objects from Ext. getcmp.
6. Trigger destroy event the destroy event is fired
   
   This is a simple notification of successful component destruction. The component does not exist in the Dom.
7. The event listener on the component is removed from the event listeners on the component are removed
   
   The component itself can obtain the event listener from its element. If any, delete it together.

X-type xtypes of components

Xtypes
It is a new concept in ext 2.0 and is considered a specific type of ext component. The available xtype abstract can be used in the component class API
Find the start point. Similar to common JavaScript Object usage, xtypes can be used to find or compare component objects, such as isxtype
And getxtype
. Getxtypes
To list the xtpye hierarchies of any component.

However, xtypes is primarily used to optimize component creation and rendering processes.
By specifying an xtype configuration object writing method, you can create a component by Using implicit declaration, so that when no immediate rendering is required, it is just an object, saving unnecessary instantiation steps. In this case, not only the rendering
The action is delayed, and the step of creating the actual object is also delayed, thus saving memory and resources. In complex la S, this performance improvement is particularly evident.

// Explicitly create a widget  
VaRPanel =NewExt. Panel ({
Items :[
NewExt. Button ({
Text: 'OK'
})
]
};
// Create with xtype  
VaRPanel =NewExt. Panel ({
Items :[{
Xtype: 'button ',
Text: 'OK'
}]
};

In the first example, buttons are always created immediately when the Panel is initialized. If many components are added, this method may slow down the rendering speed. In the second example, buttons are created and rendered only when they are displayed in the browser.

If the Panel is never displayed (for example, a tab is always hidden), the button will not be created and will not consume any resources.

Boxcomponent

Boxcomponent
Is another important base class, which is extended from component. It provides a consistent, cross-browser box model (
Model. Boxcomponent is responsible for adjusting the size and positioning, and automatically handles the differences between browsers, such as external/inner patches and borders, to form a unified box model to support
Various browsers are supported. 2.0 of all container classes (container) inherit from boxcomponent.

Container Model
 

Ext2.0 component/container class hierarchy

Container

If a component hasContains other components
, Then, Container
This is the foundation stone of this component. This class provides the layout and the logic required to adjust the size and nested groups, and provides a basic coordination mechanism for adding components. Container classes should not be used directly. The purpose is to provide a base class for all visible container components.

Panel

Panel
Yes
2.0 most commonly used containers, 90% layout tasks are inseparable from the Panel. The layout element is the Panel. The Panel is like a blank rectangle with no visible content. Even so, the Panel also provides
Some reserved areas,
You can easily add the UI required by the program, including the toolbar, menu bar, header area, bottom area, and trunk area at the top or bottom. At the same time, built-in buttons that can be expanded and shrunk, and other predefined tasks
Button. The Panel can be easily down to any container or layout, where the positioning or rendering logic is all controlled by Ext,

The following are the main subclasses of the ext 2.0 panel:

• Gridpanel
• Tabpanel
• Treepanel
• Formpanel

Window

Window
It is a kind of floating, minimal/maximized, recoverable, and drag-and-drop special panel. The purpose is to implement a basic class of desktop-style program interface, such as ext desktop demonstration.
As you can see.

View area viewport

View area viewport
The layout class uses document. body as the container. It will be adaptive to the browser view size, which is the basis of full-screen applications. For example, the browser size adjustment and layout recalculation problems are automatically completed by this class.Note: viewport except document. body cannot be rendered on other containers. Therefore, a page can only have one view area.

Layouts
 

EXT 2.0 layout class hierarchy

Introduction

2.0 is one of the most significant improvements. You can feel the benefits of ease of use or flexibility when creating an elegant program layout. In ext
1. X: Layout development focuses on borderlayout, region, and contentpanel classes. 1. x
Borderlayout can easily generate the UI, but it still does not support creating your own layout.
To create a Complex layout, you usually need to write some code to cope with the problems of scroll bars, nesting, and some quirks.

EXT 2.0 provides an overwrite layout management system for enterprise-level applications.
There are a total of 10 layout managers, which provide the basis for building various possible program la S. EXT regulates layout issues, such as size, positioning, scroll bars, and other attributes.
Single, out-of-the-box. You can also use infinite nested la s in containers to mix different la S.

The layout is created by the container, so the layout should not use keywordsNew
This method is directly used for instantiation.
There is an internal mechanism in which containers and la s can be well coordinated-containers only need to configure relevant parameters to delegate the layout work to them. When creating a container, you should select a layout style and
Related configuration. The two configurations are layout and layoutconfig. Example:

VaRPanel =NewPanel ({
Title: 'My accordion ',
Layout: 'accordion ',
// Layout style used in this panel 
Layoutconfig :{
Animate:True
// The configuration items specified for the layout are written here
}
// Other panel options
});

When you create a nested layout, it is important to understand that the Panel contains other panels,You must specify a layout manager for each panel in the layout.
.
In most cases, you do not need to specify the layout style, such as "border" or "accordion". The more common is "fit", which automatically adjusts the size of the container to adapt to its container.
If you do not specify a layout manager, the containerlayout class is used by default. However, this may lead to unexpected situations, so it is best to declare it accurately.

 

Each layout class supports its specific configuration options. For details about how to layout each configuration option, refer to the API documentation.

Layout manager layout managers

	Containerlayout Its It is the base class of all layout managers. If a container does not specify a layout manager, the default manager is containerlayout. Containerlayout does not have any -Its primary responsibility is to accommodate sub-projects, control rendering, and some common tasks, such as resize buffering ). Containerlayout is often used for extended layout and is rarely directly used for instantiation. Detailed api reference .		Cardlayout Cardlayout treats each component in the container as a card. At a certain time, only one card is visible, and the container works like a card stack. In most cases, it is used for wizard, Tab implementation, or other multi-page information. See api reference .
	Absolutelayout This is a very simple layout. It uses the x/y coordinates to precisely locate the containers that contain various items. See api reference .		Columnlayout It is applicable to the layout style of multiple columns with a side-by-side structure. The width of each column must be specified by the pixel value or percentage, but the height is adaptive to the height of the content. Detailed api reference .
	Accordionlayout Accordionlayout contains a set of panels that act as the vertical stack of a card, and displays the content through expansion or contraction. At a certain time, only one card is visible. Detailed api reference .		Fitlayout This is a simple layout, mainly to create a layout area that adapts to the container size. If no specific layout is required, this is the best default layout for containers. Detailed api reference .
	Anchorlayout This is the layout of some fixed elements relative to the four sides of the container. The element can be located by a percentage or a lower value than the edge, and supports Virtual Layout canvas, which is equivalent to a physical container with a different size )". Detailed in API documentation .		Formlayout Formlayout is a layout style designed to create a form for submitting data entries. Note: Generally Similarly, this layout class has automatic processing for form submission, but you prefer to use the former. FormpanelsRequired Specify layout: 'form' (this must be the case). Therefore, an additional layout is required for the form to nest it. See API documentation .
	Borderlayout It is consistent with the borderlayout layout of 1.x. The layout area supports nesting. The sliding bar panel is separated from the closed and fine-tuned areas. The UI is particularly applicable to some typical business programs. API documentation .		Tablelayout The main purpose is to divide regions in the form of a table. In fact, it is also the HTML makeup for generating a table. For details, refer to the API reference. .

Grid

Overview

The gridview in 2.0 has been greatly improved, and the grid UI is implemented by the gridview class. The main new functions of the gridview in 2.0 are:

• Performance Improvement
  The bottom-layer structure and rendering code of the gridview have been fully reconstructed in 2.0, and the efficiency section is focused on. For performance reasons, this feature of locking columns has been canceled (see the next section ).
• Improvement of look and feel
  
  Along with the new 2.0 theme, the Appearance Control of grid has also changed, making grid more fashionable and attractive than before.
• Single Row grouping
  
  Multiple rows can be grouped into a specified column, and you can also group them again.
• Multi-row Group Summary
  
  Each group can provide a Data Abstract Group accordingly.
• Advanced plug-in support
  
  In 2.0, the plug-in mechanism is added. Gridview is a typical example of this plug-in mechanism. As shown in the example, the excellent function of grid relies on a few pre-prepared plug-ins. The rowexpander plug-in provides the function of expanding and shrinking rows. The rownumberer plug-in provides support for numbers in rows.

Column locking)

Some users may find that the column lock function in ext 1.x has been canceled by 2.0 and will not be supported in the future. Column lock (Column
Locking), although it is useful for some users
The new functions of the gridview are incompatible (such as grouping and summarization), and the grid rendering performance overhead is increased to achieve locking. Therefore, 1.x
The upgrade or patching of the gridview function will not be officially supported.

Note:
Currently, the user extension for 2.0 is in progress to implement column locking of 2.0, and it looks pretty good to write. More useful information can be posted on the Forum
Find.

Xtemplate

Xtemplate uses multiple tags and Special operators to support templates, making the templates especially robust when dealing with complex data structures. The list of highly summarized functions is as follows. For more information, see the xtemplate API documentation.
.

• Automatic array filling and scope Switching
• Parent objects can be accessed within the scope of the sub-template
• Accessible array Indexes
• Supports Simple Matching of data values
• Automatically rendered floating point array (excluding non-object values)
• Basic conditional logical symbolsIf
• Arbitrary statements written directly in the executable Template
• Supports template configuration attributes
• You can use the configuration item object custom template method
• Javascript templates available for the server

Dataview

On the surface, dataview
Similar to the View class of 1.x. Both support template Data Rendering, data store data binding, and built-in selection models and events. However, with the design of the new 2.0 architecture, dataview provides more powerful functions. The following are the most important changes:

• Inherited from boxcomponent
  
  1. The x View class inherits from observable and works well as an independent component, but it does not provide the ability to integrate built-in mechanisms with other components. Dataview is an improvement on this deficiency, which is inherited from boxcomponent.
  And has the lifecycle control of general components.
• Xtemplate Function
  
  The 1.x View class uses the template class of 1.x. It better meets the needs of the view itself, but it is difficult to meet some complex rendering tasks. The template class used by dataview is also upgraded to the xtemplate class of 2.0.
  Allows you to easily customize the UI to cope with complex data.
• New configuration options
  
  Dataview provides more flexibility-several new options:
  • Itemselector:
    A domquery selector must be used to tell the class how to distinguish each item. Compared with 1. X, it brings higher flexibility and speed.
  • Simpleselect:
    A new selection mode allows you to select multiple selections without pressing shift or Ctrl.
  • Overclass:
    A css style class. Each element onmouseover and onmouseout takes effect.
  • Loadingtext:
    Like other ext components bound to a store, dataview supports standard masks.

Other new components

Some interesting new components are also added to 2.0. To learn about the new functions of these new components, it is best to take a look at the complete introduction of the API documentation.

Action

Action action is a reusable "function block" abstracted from a component. That is, the same function between multiple components comes from the implementation of this action. Action allows you to share the handle
(Handlers), configuration options, and UI updates. All components support action interfaces (mainly toolbar, button, and menu components ). Detailed in API documentation
.

Cyclebutton

This is a special splitbutton that contains the check element menu. When the menu item is clicked each time, the button is in the same status to trigger the change event (or
Changehandler function, if any) to activate the menu item. The feedviewer demo contains the example-
The button of the preview window address is a splitbutton. Detailed in API documentation
.

Hidden (field)

This is a simple implementation of hidden fields in HTML forms, which can be controlled as an ext form component. Detailed api reference
.

Progress bar

The progress bar in 1.x is simply built in the MessageBox class. Now it has been restructured into a separate device and further improved. It supports two different modes (manual and automatic progress), and can be easily developed in the look and feel aspect. Detailed api reference
.

Timefield

This is a simple implementation of the time selector in the drop-down list. Detailed api reference
.

Retrieved from "http://extjs.com/learn/Ext_2_Overview_%28Chinese%29
"

Translator name: Frank
Translator's blog: http://www.ajaxjs.com/blog/