以下是摘自 Extjs in action 一书的 3.3 The Coponent Life Cycle
Ext Components,just like everything in the real world,have a life cycle where they are created,used and destoryed. The lifecycle is broken up into three major phases:initialization,render and destruction as displayed
图(1)
The Ext Component lifecycle always starts with initialization and always ends with destruction. The Component need not enter the render phase to be destroyed
To better utilize the framework,we must understand how the lifecycle works in a finer detail. This is especially important if you will be building extensions,plugins or composite component.Quite a bit of steps take place at each portion of a lifecycle phase,which is controlled by the base class, Ext.Component.
Initialize
The initialization phase is when the component is born. All of the necessary configuration settings,event registration and pre-render processess take place in this phase as
图(2)
The initialization phase of the componet lifecycle executes important steps such as event and componet registration as well as the calling the initComponet method. it's important to remember that a component can be instantiated but may not be rendered.
Let's explore each step of the initialization phase:
1.The configuration is applied: When instantiating an instance of a Component,you pass a configuration object,which contains all of the necessary parameters and references to allow the compoent to do what it's designed to do. This is done within the first few lines of the Ext.Component base class.
2.Registeration of the base Component events:Per the Component model,each descendant of Ext.Component has, by default,a set of core events that are fired from the base class.These are fired before and after some behaviors occur: enable/disable,show,hide,render,destory,state restore,state save.The before events are fired and tested for a successful return of a registerd event handler and will cancel the behavior before any real action has taken place.For instance,when myPanel.show is called, it fires the beforeshow event,which will execute any methods registered for that event. If the beforeshow event handler return false,myPanel does not show.
3.ComponentMgr registeration:Each component that is instantiated is registered with the ComponentMgr class with a unique Ext-generated string ID.You can choose to override the Ext-generated ID by passing and id parameter in the configuration object passed to a constructor.The main caveat is that if a registration request occurs with a non-unique registration ID,the newest registration will override the previous one.Be careful to use unique IDs if you plan on using your own ID scheme.
4.initComponent is executed:The initComponent method is where a lot of work occurs for descendants of Componet like registration of descendant-specific events,reference to data stores and creation of child components.initComponent is used as a supplement to the constructor,thus is used as the main point to extending Component or any descendant thereof.
5.Plugins are initialized:If plugins are passed in the configuration object to the constructor,their init method is called,with the parent component passed as a reference.It is important to remember that the plugins are called upon in the order in which they are referenced.
6.State is initialized:If the component is state-aware,it will register its state with the global StateManager class.Many Ext widgets are state-aware.
7.Component is rendered:If the renderTo or applyTo parameters are passed into the constructor,the render phase begins at this time,else the component then lies dormant,awaiting its render method to be called.
This is phase of a Component's life is usually the fastest as all of the work is done in JavaScript.It is particularly important to remember that the component does not have to be rendered to be destoryed.
Render
The render phase is the one where you get visual feedback that a component has been successfully initialized.If the initialization phase fails for whatever reason,the component may not render correctly or at all.For complex components,this is where a lot of CPU cycles get eaten up,where the browser is required to paint the screen and computations take place to allow all of the items for the component to be properly laid out and sized.
图(3)
The render phase of the a component's life can utilize a lot of CPU as it requires elements to be added to the DOM and calculations to be performed to properly size and manage them.
1.beforerender is fired:The component fires beforerender event and checks the return of any of the registered event handlers.If a registered event handler return false,the component halts the rendering behavior.Recall that step two of the initialization phase registers core events for descendants of Component and that "before" events can halt execution behaviors.
2.the container is set:A component needs a place to live,and that place is known as its container.Essentially,if you specify a renderTo reference to an element,the component adds a single child div element to the referenced element,known as its container and renders the component inside that newly appended child.If an applyTo element is specified,the element referenced in the applyTo parameter becomes the components container,and the component only appends items to the referenced element that are required to render itself.The DOM element referenced in applyTo will then be fully managed by the component.You generally pass neither when the component is a child of another component,in which the container is the parent component.It is important to note,that you should only pass renderTo or applyTo,not both.
3.onRender is executed:This is a crucial step for subclasses of component,where all of the DOM elements are inserted to get the component rendered and painted on screen.Each subclass is expected to call its superclass.onRender first when extending Ext.Component or any sublcass thereafter,which ensures that the Ext.Component base class can insert the core DOM elements needed to render a component.
4.The component is "unhidden":Many components are rendered hidden using the default Ext CSS class like 'x-hidden'.If the autoShow property is set,any Ext CSS classes that are used for hiding components are removed.It is important to note that this step does not fire the show event,thus any listeners for that event will not be fired.
5.Custom CSS classes or styles are applied:Custom CSS classes and styles can be specified upon component instantiation by means of the cls and style parameters. If these parameters are set,they are applied to the container for the component.It is suggested that you use cls istead of style,as CSS iinheritance rules can be applied to the components children.
6.Thre render event is fired:At this point,all necessary elements have been injected into the DOM and styles applied.The render event is fired,triggering any registered event handlres for this event.
7.afterRender is executed:The afterRender event is crucial post-render method that is automatically called bye the render method within the Component base class and can be used to set sizes for the Container or perform any other post-render functions,All subclass of Component are expected to call their superclass.afterRender method.
8.The component is hidden and/or disabled:If either hidden or disabled is specified as true in the configuration object,the hide or disable methods are called,which both fire their respective "before<action>"event,which is cancelable.If both are ture,and the "before<action>" registered event handlers do not return false,the component is both hidden and disabled.
9. State-specific events are fired:If the component is state-ware,it will initialize its state-specific events with its Observable and register the this.saveEvent internal method as the handler for each of those state events.
10.Once the render phase is complete,unless the component is disable or hidden,it's ready for user interaction,It stays alive until it's destory method called,in which it then starts its destructin phase.
The render phase is generally where a component spends most of its life until it meets its demise with the destruction phase.
Destruction
Just like in real life,the death of a component is crucial phase in its life.Desturction of a component performs critical tasks,such as removing itself and children from the DOM tree,deregistration of the component from ComponentMgr and deregistration of event listeners
图(4)
The destruction portion of a component's life is equally as important as its initialization as event listeners and DOM elements must be deregistered and removeed,reducing over-all memory usage.
The component's destory method could be called by a parent Container,or by your code.
1.beforedestory is fired:This like many "before<action>" events,is a cancelable event,preventing the component's destruction if its event handler return false.
2.beforeDestory is called:This method is first to be called within the Component's destory method and is the perfect opportunity to remove any non-component items,such as toolbars or buttons.Any subclass to Component is expected to call its supreclass.beforeDestory.
3.Element and Element listeners purged:If a component has been rendered,any handlers registered to its Element are removed and the Element is removed from the DOM.
4.onDestory is called:While the Component class itself does not perform any actions within the onDestory method, subclasses are expected to use this to perform any post-destruction actions,such as removal of data stores.The Container class,which subclass Component indirectly,manages the desturction of all registered children by in its onDestory method,alleviating this task from the end developer.
5.Component is unregistered from ComponentMgr:The reference for this component in the ComponentMgr class is removed.
6.The destory event is fired:Any registered event handlers are triggered by this event,which signals that the component is no longer in the DOM
7.Component's event handlers are purged:All event handlers are deregistered from the Component.