EXT Architecture Analysis (3)-component, the father of the Widget: render Method

First, let's recall the discussion about components:
1. The render method is called immediately when the applyto or renderto attribute is configured;
2. If it is the applyto attribute, the component container will be rendered; renderto is the component rendering;

Now, let's take a look at the implementation of the render method: Render: Function (Container, position) {
// If it is not rendered and the beforerender method returns true, the rendering is performed. This ensures that only one rendering of the component is performed; the position parameter specifies the position of the component to be inserted into the container (that is, the component is inserted before the element specified by position)
If ( ! This . Rendered &&   This . Fireevent ( " Beforerender " , This ) ! =   False ) {
// No parameter is input (that is, no container iner is specified), this. El is set, and this. Container attribute is added.
If ( ! Container &&   This . El) {
This. El=Ext. Get (This. El );
Container= This. El. Dom. parentnode;
This. Allowdommove= False;
}  
This . Container = Ext. Get (container );
// If ctcls is configured, iner is rendered by ctcls. ctcls (container class) is the rendering Class Name of the container, and CLS (class) is the rendering Class Name of the element.
If ( This . Ctcls) {
This. Container. addclass (This. Ctcls );
}  
This . Rendered =   True ;
// Set Position
If (Position ! = Undefined) {
If ( Typeof Position =   ' Number ' ) {
Position= This. Container. Dom. childnodes [position];
} Else {
Position=Ext. getdom (position );
}  
}  
// Onrender method call
This . Onrender ( This . Container, position |   Null );
// If autoshow is set, remove X-hidden and X-hide-hidemode (this attribute can be set to display, visibility, and offsets based on hidemode). As shown in this method, after a component is created, the default mode is "hidden" or "NONE ".
If ( This . Autoshow) {
This. El. removeclass (['X-hidden','X-hide-' + This. Hidemode]);
}  
// If CLS is set, the element is rendered.
If ( This . CLs) {
This. El. addclass (This. CLs );
Delete This. CLs;
}  
// If style is set, set the element style attribute.
If ( This . Style) {
This. El. applystyles (This. Style );
Delete This. Style;
}  
// Trigger fireevent and afterrender events
This . Fireevent ( " Render " , This );
This . Afterrender ( This . Container );
// If hidden and disabled are set, the corresponding processing is performed.
If ( This . Hidden) {
This. Hide ();
}  
If ( This . Disabled) {
This. Disable ();
}  
This . Initstateevents ();
}  
Return   This ;
}  

The onrender implementation method is as follows: Onrender: Function (CT, position) {
// If the autoel attribute is configured, the El attribute is generated based on the autoel attribute. If the autoel attribute is a string, an element is generated based on the string. Otherwise, a div element is enclosed outside the element specified by autoel.
If ( This . Autoel) {
If ( Typeof   This . Autoel =   ' String ' ) {
This. El=Document. createelement (This. Autoel );
} Else {
VaRDiv=Document. createelement ('Div');
Ext. domhelper. Overwrite (DIV,This. Autoel );
This. El=Div. firstchild;
}  
}  
// Insert the position element before the EL Element.
If ( This . El) {
This . El = Ext. Get ( This . El );
If ( This . Allowdommove ! =   False ) {
Ct. Dom. insertbefore (This. El. Dom, position );
}  
}  
}