ExtJS 4 Components

The ExtJS 4 application interface is composed of a number of widgets called "Components ( Component )", all of which are Ext.Component subclasses, Ext.Component providing lifecycle management including initialization, rendering, size and size management, destruction, and so on, which makes all Ext.Component are automatically shared by the sub-classes. ExtJS provides a wide variety of components, each of which can easily be expanded to create custom components. The Component Hierarchy component level

A container ( Container ) is a special component that can accommodate other components. The usual applications are composed of many nested components that have a tree-like structure, which is the hierarchy of components. The container is responsible for managing the lifecycle of subcomponents including initialization, rendering, size and size management, and destruction. Usually the topmost component of the application is Viewport then there are other containers or components nested within it:

Subcomponents are added to the container through the container items , and the following example Ext.create creates two by means of a method Panel and adds them as a subassembly to Viewport the medium:

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 Layout Manager manages the dimensions and location of the subcomponents through the Layout manager (). For details on layouts and containers, you can view the ExtJS 4 layouts and containers xtypes and lazy instantiation xtype and deferred loading

Each component has a McCartney called xtype , for example Ext.panel.Panel xtype panel . All components xtype are listed in API Docs for Component. The above example shows how to add a component that has already been initialized to a container. In large applications, this approach is not feasible, because this method requires that each component is initialized, but in large applications, because of the way in which some components may not be used at all (for example, a 100-page application, a user logged in only to operate two pages, At this point, it is unreasonable to initialize the components of the other 98 pages, for example, a used TabPanel application, TabPanel each tab can be rendered when the user clicks on it. This is the reason for the introduction xtype of the mechanism, which allows xtype a container's subcomponents to be defined beforehand, and then initialized when it is really needed.

The following sample code TabPanel shows the lazy loading and deferred rendering, each tab has a response Function listener tab Rendering render event, the rendering will pop up a dialog box to tell the current tab has been rendered

Ext.create (' Ext.tab.Panel ', {renderTo:Ext.getBody (), height:100, width:200, 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 nece                Ssary xtype: ' Panel ', Title: ' Tab One ', HTML: ' The first tab ', listeners: {                Render:function () {Ext.MessageBox.alert (' Rendered one ', ' Tab one was Rendered. '); }}}, {//This component the configuration does not has an xtype since ' panel            ' is the default//Xtype for all Component configurations in a Container title: ' Tab ', HTML: ' The Second tab ', listeners: {render:function () {ext.messagebox.a                Lert (' Rendered one ', ' Tab. ' Rendered ');          }  }        }    ]}); 

Running the code, the first tab of the Render dialog pops up immediately, because the first tab is activated by default, so its parent container TabPanel immediately initializes and renders it

Without clicking on the Second tab, its conversation will never pop up, which means the tab will not be rendered until it is used, and the tab render event will not be triggered until the tab is activated.

Showing and hiding Show and hide

All components have built-in show and hide methods. The default CSS style is applied display: none , and can be hideMode changed by changing the

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 this component});panel.hide(); // hide the componentpanel.show(); // show the component

Floating Components Floating Component

Floating components are positioned outside the document flow, using the absolute positioning properties of the CSS, not controlled by the layout of the parent container. Some components, for example Window , are floating by default, and any component can be floating configured to float by property.

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

The above code instantiates an Panel object, but does not render it. Typically a component has either a renderTo property configuration rendering to a location, or a container is responsible for rendering it as a subassembly, but the floating component of this example does not need renderTo or need to be a subcomponent. The first time a floating component invokes a show method, it is automatically rendered to the DOM's document.body:

1

panel.show(); // render and show the floating panel

There are several properties that are noteworthy when using floating components:

• draggable-Allows floating components to be dragged and pulled
• shadow-Customize the shadow effect of floating components
• alignTo()-Align floating components to a specific element
• center()-Center The floating component relative to the container

Creating Custom components composition or Extension combination or inheritance

When creating a new UI class, you must decide whether the class refers to an instance of another component or extends the component.
It is recommended to extend the closest component to add the functionality that you need, because you can automatically get the original automatic lifecycle management capabilities of the component using inheritance, including on-demand rendering, dimension location management provided by the layout manager, automatic destruction removed from the container, and so on.
Extending an existing component makes the extended component subordinate to the component hierarchy, which is much easier to refer to and take charge of an instance of the ExtJS component than an external class. Subclassing of sub-class

The ExtJS class system makes it easy to extend an existing component. The following code demonstrates the creation Ext.Component of a subclass, without adding any functionality:

123

Ext.define(‘My.custom.Component‘, {    extend: ‘Ext.Component‘});

Template Methods Templates method

ExtJS uses the template method pattern to delegate special behavior to subclasses.
This means that each class on the inheritance chain can "contribute" a fragment containing a particular logic into the component's life cycle. Each class implements its own special behavior while allowing other classes on the inheritance chain to continue to contribute their own logic.
An example is the render method. renderis a private method, defined in Component the parent class AbstractComponent , that is render responsible for the initialization of the render phase during the component life cycle. rendercannot be overridden, but render is called in the process, which onRender onRender allows subclasses to be implemented, where subclasses can add logic that belongs exclusively to subclasses, each of which onRender must call the parent class before its own extra logic onRender .
Indicates onRender how the template method works.
renderMethod is called first (this is done by the layout manager), the render method cannot be overwritten, it is implemented by the related base class in ExtJS, it invokes the current subclass this.onRender (if the current subclass is implemented onRender ), which onRender causes the parent class to continue calling the onRendercontinues to invoke the parent class, and finally the classes on each inheritance chain contribute their own feature fragments and control back to the render method.

Here is an onRender example of implementation

Ext.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 a corresponding event. For example, the render event is triggered when the component finishes render . The best way to create subclasses is to use a template method rather than an event, because the template method is bound to be executed and the event can be interrupted (here is my supplement: When to use the event, when to use the template method?). The template method is for all instances of the subclass that you create, and if you need to add a feature fragment that is really required by all instances, then be sure to put it in the template method, if it is a particular feature required by an instance, implement it with an event that can be implemented on an individual object)
The following is a list of the Component template methods that can be implemented in subclasses:

• initComponentThis method is called by the constructor, which is used to initialize the data, set the configuration, add events
• beforeShowThis method is called before the component is displayed.
• onShowAllows the component to display additional behavior, after calling the parent class onShow , the component becomes visible
• afterShowThis method is called after the component display is complete
• onShowCompleteThis method is afterShow called when execution is complete.
• onHideAllows the component to be hidden when attached behavior, after calling the parent class onHide , the component becomes invisible
• afterHideThis is placed after the component is hidden and is called
• onRenderAllow additional behavior during render phase
• afterRenderAllows the addition of the behavior at the end of rendering, at which point the component Element has been given a style, and the added CSS class has been added, and the status of the display and the enabled or not is marked complete
• onEnableAllows attaching behavior when an action is enabled, after calling the parent class onEnable , the component becomes enabled
• onDisableAllows attaching behavior when operation is disabled, after calling the parent class onDisable , the component becomes disabled
• onAddedAllows a component to be added to a container when the additional behavior, at this stage, the component is already in the parent container's items, after calling the parent class onAdded , the OWNERCT reference is set, if configured Ref,refowner is also set
• onRemovedAdditional behavior when a component is allowed to be removed from the parent container, at which point the component has been removed from the items in the parent container, but has not been destroyed (if the parent container's Autodestroy is set to true, or if the delete operation is set to True for the second parameter of the Remove function). Component is destroyed), after calling the parent class onRemoved , OWNERCT and Refowner will be removed
• onResizeAllowed to change size when attaching behavior
• onPositionAllow additional behavior when setting a location
• onDestroyAllow additional behavior when destroying, after calling the parent class onDestroy , the component is destroyed
• beforeDestroyCalled before the component is destroyed
• afterSetPositionCalled after the component location is set
• afterComponentLayoutCalled when the component layout is complete
• beforeComponentLayoutComponent layout before calling

Which class to Extend extend that category

Choosing the most appropriate class inheritance is a problem that affects efficiency, and the functionality that the base class can provide is also a problem. Now there's a tendency to be whatever UI components Ext.Panel inherit from
The Panel class has many capabilities:

• Border
• Header
• Header Tools
• Footer
• Footer buttons
• Top Toolbar
• Bottom Toolbar
• Containing and managing child components

If these features are not required, inheritance Ext.Panel is a waste of resources. Component components

If you create a UI component that does not need to contain any other components, such as components that simply encapsulate the HTML fragment to meet the requirements, the recommended extension Ext.Component , such as the following example encapsulates the HTML image element, allows setting the src of the image, and the completion of the image loading triggers load Event:

Ext.define(‘Ext.ux.Image‘, {    extend: ‘Ext.Component‘, // subclass Ext.Component    alias: ‘widget.managedimage‘, // this component will have 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;    }});

Usage:

var image = Ext.create(‘Ext.ux.Image‘);Ext.create(‘Ext.panel.Panel‘, {    title: ‘Image Panel‘,    height: 200,    renderTo: Ext.getBody(),    items: [ image ]})image.on(‘load‘, function() {    console.log(‘image loaded: ‘, image.getSrc());});image.setSrc(‘http://www.sencha.com/img/sencha-large.png‘);

This example can be used in real-world applications only as an example Ext.Img . Container container

It is a good choice if the UI component needs the ability to contain other components, but does not need Panel that versatility Ext.container.Container . Use it with a little attention, and remember to use Layout management subcomponents.
Ext.container.ContainerThe following template methods are available:

• onBeforeAddThis method is called before adding a subcomponent, and the method is passed into the added subassembly, you may make some modifications to the child component, or do some preparation for the container itself, and returning false will break the add operation.
• onAddThis method is called when the new component is added, and the method passes in the newly added component, which can be used to update the internal structure of the dependent subassembly state
• onRemoveThe child component is called after it is deleted, and is useful for onAdd similar
• beforeLayoutMethod that the component is called before its subcomponents are laid out
• afterLayoutMethod that the component is called after its subcomponents are laid out

Panel panels

If the UI component of the requirement must have Header,footer or toolbar, it is Ext.panel.Panel more suitable for
Note Panel is also a container, and you need to Layout manage sub-components
The Panel components from the expansion are generally related to specific applications, often aggregating other components, typically providing methods for manipulating internal components, such as buttons that operate internal components on toolbar, etc.
PanelThe following additional template methods are available:

• afterCollapseCalled after the component is collapsed.
• afterExpandCalled after component expansion, corresponds to Aftercollapse
• onDockedAddCalled after a subassembly has been added to the toolbar
• onDockedRemoveCalled after a subassembly has been removed from the toolbar

ExtJS 4 Components