[ExtJS learning notes] section 7 Extjs component components and template event method learning

[ExtJS learning notes] section 7 Extjs component components and template event method learning

 

The UI user interface of an ext js application is composed of one or more components. All components are subclasses of the Ext. Component class, allowing them to participate in automated lifecycle management, including instantiation, rendering, size, positioning, and destruction. Ext JS provides a series of useful components that can be easily extended to create a custom component.

Inheritance relationship of components

A container is a special component type that can contain other components. A typical application has many nested components, such as the tree structure, which has the inheritance structure. Containers manage the lifecycles of their child components, including creation, rendering, size, and location and destruction. Components of a typical application are inherited from the Viewport on the top layer, and other containers are nested in it.

The sub-component is added to the container by using the items configuration of the container. The following example uses Ext. create () to create and initialize two panels, and then adds them to the Viewport as the sub-component of the 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 and location of components. For more information about the layout, visit the layout and container guide.

 

 

XTypes and lazy loading

Each component has an xtype symbol. For example, Ext. panel. Panel has an xtype named 'panel '. The component API documentation lists the xtypes of all components. The preceding example shows how to add an 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 a tab panel only needs to obtain the content of the tab that the user clicks. This is where xtypes is useful by allowing the child of the container to perform pre-configuration and instantiate it only when necessary.

The following sample code demonstrates lazy instantiation and rendering of a sub-component of a container using the tab panel. Each tag has an event listener, which is displayed when a warning tag is displayed.

 

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 necessary                xtype: '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 Container                title: 'Tab Two',                html: 'The second tab',                listeners: {                    render: function() {                        Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');                    }                }            }        ]    });

 

If this code is allowed, the alert pop-up box of the first tab is generated immediately. This occurs because this is the default tab, so the container immediately calls the Tab Panel of the diseased instantiated container.

The second tab box will not pop up until you click it. This will display the rendering only when needed. That is to say, the render event will be notified only when the tab is activated.

Show and hide

All components are constructed in the show and hide methods. The default css method used to hide components is "display: none", but the configuration changes 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 component

Floating components place documents out of the absolute path of css, and do not participate in the layout of the components container. Some components, such as Windows, are floating by default. All components can be floating through Configuration:

 

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 initializes a panel but does not render it. Under normal circumstances, a component or a renderTo configuration or as a sub-component is added to the container of the component, but it is not required when it is a floating component. The floating component will be rendered when the show method is called for the first time.

 

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

The following are some methods that can be configured for floating components:

 

1. draggable: You can drag floating components around the screen.

2. shadow: the shadow of the custom floating component.

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

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

Create custom component components or extensions

When creating a new UI class, the class must decide whether to own an instance of a component or extend the component.

It is recommended to inherit a recent base class based on the function requirements. This is because the automatic lifecycle management provided by ext js includes automatic rendering, automatic size, and automatic location adjustment when needed, it will also be automatically removed and destroyed from the container.

It is easier to create a new class by creating a group. We do not recommend that you use a new class to own a component for external rendering and management.

 

Subclass

Class System makes extended extjs framework very easy. Ext. Base is the building block of all Ext JS classes. The prototype and static members of this class are inherited by other classes.

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

The following example creates a subclass of Ext. Component:

 

Ext.define('My.custom.Component', {    extend: 'Ext.Component',    newMethod : function() {       //...    }});

In this example, a new class 'my. M. Component 'is created, which inherits all the method attributes of Ext. Component.

 

Template Method

Ext js uses the template method mode to represent subclass and behavior.

This means that each class in the inheritance chain may contribute some stages in the lifecycle of an additional logical component. Each class implements its own unique behavior and allows others to inherit from this class to implement its own unique logic.

A typical example is the rendering method. render is a method defined in the Component class and is responsible for the life cycle of the rendering phase of the initialization Component. Render cannot be overwritten, but the onRender method can be called to implement its own special attribute method when processing subclass implementations. Each onRender method must call the onRender method of the parent class to contribute its own extra logic.

The following table shows the functions of the onRender template method.

The render method is called (implemented through the layout manager ). This method cannot be overwritten and is implemented through the Ext base class. It calls this. onRender method, which implements the current subclass (if implemented ). This calls the version of the parent class, and so on. In the end, each class contributes its own function and controls the render method returned.

The following is an example of onRender implementation for a component subclass:

 

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 worth noting that many template methods have their own corresponding events, such as rendering events, which are executed when the rendering event starts. However, when it comes to tears, it must use the template method to execute logic rather than events in the important declaration cycle phase. Events can be stopped or paused by programming.

The following is a template method for components that can be implemented by subclass:

InitComponent: This method is awakened by the class constructor to initialize data, set properties, and add event processing.

BeforeShow: called before the component is displayed

OnShow: Allows adding behavior operations. The component is visible 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 afterShow is complete.

OnHide: some operations can be added when hidden. After the superclass onHide method is called, the component will be invisible.

AfterHide: event processing after hidden components

OnRender: Events executed during rendering

AfterRender: additional operations that can be added after rendering is complete. In your stage, the component element has added the type according to the configuration or css thunder, and will be configured with visibility and enabled status.

OnEable: Component Availability. When a superclass event is called, the component can be used.

OnDisable: the event when the component is unavailable for processing.

OnAdded: When a component is added, it is added to the container. In this phase, when the sub-entry set of the parent class container calls the superclass method, the container is displayed. If there is a reference, the reference is also set.

OnRemoved: the event when it is removed. At this time, the component is removed from the parent container, but it has not been destroyed yet. After the superclass method is called, the container will not be displayed.

OnResize: Call event when the size changes

OnPosition: The event called when the position changes

OnDestroy: events during destruction

BeforeDestroy: before destruction

AfterSetPosiotion: After the location is set

AfterComponentLayout: After the component Layout

BeforeComponentLayout: Before the component Layout

Which class should we expand?

Selecting the best inheritance class is a matter of efficiency. The function base class must be provided. There is a tendency to always inherit Ext. panel. Panel. When you set the UI components, 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 this is not required, using the Panel class is a waste of resources.

Components

If the required Component UI does not need to contain other components, it is appropriate to extend Ext. Component if it only encapsulates some form of HTML execution requirements. For example, the following class is a component that encapsulates HTML image elements and allows you to set and obtain them through the src attribute of the image. The method will also be triggered during loading.

 

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;    }});

 

Use:

 

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 is just an example. If you want to use it, you should design it based on the actual application.

 

Container

If the component contains other components, it is better to select a container. At the Panel level, it is important to remember that Ext. layout. container. Container is not used for rendering and managing child components.

Containers have the following methods:

OnBeforeAdd: This method is called when the child component is added. The new component can be used to modify the component or prepare the container. Returns false to abort the add operation.

OnAdd: called when the component is added. It is added through the component. This method can be used to update sub-elements that may depend on the status of any internal structure.

OnRemove: It is added through the component. This method can be used to update sub-elements that may depend on the status of any internal structure.

BeiforeLayout: This method is defined by the container before it is called (if needed) and presents its child components.

AfterLayout: After this method is called, the container has been formulated (if needed) and its child components are presented.

Panel panel if the UI requires header information, bottom information, and toolbar, Ext. Panel. Panel is an appropriate choice.

It is important that a panel is a container. It is important to remember that la s are used to present and manage child components.

This type of extension Ext. panel. The Panel is usually very specific to applications and is generally used to aggregate other UI components (usually containers, or form fields) to configure the layout, and provide the components included in the operation means to control the tbar bbar.

The Panel has the following template methods:

AfterCollapse: called when collapsed

AfterExpand: called when expanded

OnDockedAdd: called when docked

OndockedRemove is called when the dock is removed.