"ExtJS" Formpanel layout (ii)

To achieve the addition of the time selection component in the Ext.picker.Date component, first make a clear idea, inherit the Ext.form.field.Date component, and add a time selection function.

Step one: Clear the steps to extend the component:

To create an Ext.form.field.Date extension component:

1, define a Ext.form.field.Date subclass My.datetimefield

Ext.define (' My.datetimefield ', {    ' Ext.form.field.Date '});

2. Overload the Ext.panel.Panel InitComponent method, and call the parent class's InitComponent method

Ext.define (' My.datetimefield ', {    ' Ext.form.field.Date '    initcomponent:function  () {        this. callparent (arguments);     }});

3. Add your own configuration information to the InitComponent method

Ext.define (' My.datetimefield ', {    ' Ext.form.field.Date ',    initcomponent:function  () {        ext.apply (this, {            ' time: ',            60             ,            ' Y-m-d ',            renderTo:Ext.getBody ()        });          This . Callparent (arguments);     } });

4. Create an instance of this subclass

Ext.onready (function() {    var date = ext.create (' My.datetimefield '). Show ();});

Effect:

Step two: Define the life cycle of the ExtJS component:

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: initialization (initialize)

1. Application Configuration Options
Classes inherited from Component do not need to provide a separate constructor (usually not provided). The Component constructor applies not only the configuration options passed from the subclass, but also the following work.

2. Create an 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
This allows the instance reference to be obtained through EXT.GETCMP.

4. Call the InitComponent method
This is one of the most important initialization steps, which is done as a template method, and subclasses can override this method as needed.
The initcomponent of the class being created is called first and then called up through the superclass.initcomponent provided by the component. This method is very easy to implement, and you can override the constructor logic if you want.

5. State is initiated
If the component has a state, the saved state is reloaded.

6. Loading plugins
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 until the component is explicitly called, or the output is called by its container.

Phase II: Rendering (Render)
1. Triggering BeforeRender Events
This is an event that can be canceled if it is necessary to provide a handler function to prevent the component from continuing rendering output.

2. Set up the container
If no parent container is specified, the default its parent object is specified as its container.

3. Call the OnRender method
This is a very important way to perform rendering work for subclasses, a template method in which you can override its implementation logic as needed in a subclass. The onRender of the class directly created is called first, and then it can invoke the OnRender method of the base class through Superclass.onrender. This method is easy to re-implement, and you can override this method in any class that inherits the relationship if you want.

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 a custom style
All Component subclasses support the specification of a CLS configuration property, which allows you to specify CSS styles for the HTML elements rendered by Component. By adding a component's CLS attribute, using standard style rules, it is a perfect way to customize the visual component's display performance.

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 adjusting the Superclass.afterrender.

8. The component is hidden or not available
Set according to the value of the configuration option.

9. Status event is initialized
A component that can be stateful defines events to specify the initialization and preservation of the state. If provided, these events are added.

　Phase III: Destruction (Destruction)

1. Triggering Beforedestroy Events
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 remove the element from the DOM.

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 default OnDestroy implementation that loops through 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" Formpanel layout (ii)