"ExtJS" About custom components (i)

First, the purpose:

ExtJS is provided in the drop-down date selection control Ext.form.field.Date with the drop-down time selection control Ext.form.field.Time. However, there is no control datetimefield that chooses a time when the date is selected. The goal is to use the custom component method to extend the drop-down date selection control Ext.form.field.Date, adding the time-selected component to the drop-down box. Target effect:

Second, some knowledge of carding:

When customizing the creation of a new class, it is best to inherit a similar base class as needed, because the automation lifecycle management provided by Ext JS will be managed by the appropriate layout manager and automatically destroyed when removed from the container. This makes it easy to write a new component class, and it can take a place in the component hierarchy, rather than a new class that contains the Ext JS component, and it must be rendered and managed externally.

Next there are two points of knowledge to figure out:

　　1. Template templates and Xtemplate:

The template is produced according to the pre-given pattern. This pre-given shape is a template.

1.1 Ext.template:

Represents an HTML fragment template.

Basic format:

{name[:][format][(params)]}

Where name is the property name of the incoming object, format is the calling formatting function and optionally the parameter.

The format functions are:

Ellipsis (length) – The string that is larger than the specified length is cropped to increase the display of the ellipsis ("..."). Applies to displays only the first n bits of characters, and then provides a detailed page of the occasion.
UNDEF-Checks if a value is underfined, if it is converted to a null value
htmlencode– conversion (&, <,;, and ') characters
trim– clipping of extra spaces before and after a piece of text
substr (Start, length) – Returns a substring of the specified length starting at the specified position.
lowercase– returns a string in which the letters in the string are converted to lowercase letters.
uppercase– returns a string in which the letters in the string are converted to uppercase letters.
capitalize– returns a string in which the first letter in the string is converted to uppercase and the remainder is lowercase.
usmoney– format numbers to dollar currency. such as: $10.97
date[(format)]– the date that a date is parsed into a particular format pattern. If the date string is not entered, the default is "month/day/year"
striptags– stripping all HTML tags of a variable

The Format function can also invoke its own implemented function according to the actual application, calling the method {Name:this.your_function_name[params]}.

1.2 Ext.xtemplate:

Subclass of Ext.template, a template class that supports advanced features, and supports features such as:

Automatic array output, sub-template;

conditional judgment operation;

Basic mathematical operation;

Arbitrary inline code that executes a special built-in template variable;

Common functions and methods;

Many special tags and built-in operators are not defined in the API, but can be created in the template class;

　　2 Rendering Render:

Rendering refers to a process in which a page containing a ExtJS program is fully displayed in the browser after it has been downloaded. As a normal HTML page also has the process of rendering, that is, HTML and CSS code to start loading into the browser to the entire page based on HTML and CSS rules completely display the process. But in the ExtJS there is a completely different from the HTML and CSS rendering process, although the ExtJS interface is finally shown in HTML and CSS, but these HTML and CSS is not downloaded from the server, but entirely by the ExtJS engine dynamically generated. So the rendering of ExtJS is actually a dynamically generated process, not a static loading process.

　　　Rendertpl,renderdata and Renderselector

All components of Ext JS are rendered as a DIV element with an ID and a base class component (CLS, Cmpcls, and UI). If you create a component that requires additional components, it will be handled by Xtemplate (RENDERTPL). The data required by the Xtemplate is read through the Renderdata object and a Ext.element object is created in the component instance through the Renderselectors method. The renderselector uses a standard CSS selector, which is scoped to the basic div element. These ext.element objects are used as part of the component's lifecycle and are not automatically destroyed until the component is destroyed.

A City simple example:

1Ext.define (' My.ux.Image ', {2Extend: ' Ext.component ', 3Alias: ' Widget.managedimage ', 4  5 Autoel: {6Tag: ' img ',7 Src:Ext.BLANK_IMAGE_URL,8CLS: ' My-managed-image '9     },Ten   One     AOnRender:function() { -          This. Autoel = Ext.apply ({}, This. Initialconfig, This. Autoel); -          This. Callparent (arguments); the     }, -   -SETSRC:function(SRC) { -         if( This. Rendered) { +              This. EL.DOM.SRC =src; -}Else { +              This. src =src; A         } at     }, -   -GETSRC:function(SRC) { -         return  This. el.dom.src | | This. src; -     } - }); in  -Ext.onready (function(){ to     varImage = Ext.create (' My.ux.Image '); +   -Ext.create (' Ext.panel.Panel ', { theTitle: ' Image Panel ', *width:400, $Bordertrue,Panax Notoginsengheight:200, - renderTo:Ext.getBody (), the items: [Image] +     }); A       theIMAGE.SETSRC (' Http://www.sencha.com/img/sencha-large.png '); +});

Effect:

which

Alias:

As with aliases, you can create multiple instances with Xtype and Ext.widget ().

Autoel:

A tag name or domhelper description that is used to create the Element, which encapsulates the current component. For base classes Ext.component and Ext.container.Container, this value defaults to ' div '. The more complex Sencha classes use the more complex DOM structures, which are created by their own RENDERTPL methods. This is designed to allow developers to create tool components for specific applications that are encapsulated by different DOM elements.

OnRender:

Render is a method defined in the component class that is responsible for the life cycle of the initialization component's rendering phase. Render cannot be overridden, but it is possible to invoke the OnRender method to implement its own property-specific method when processing a subclass implementation. Each OnRender method must call the parent class's OnRender method when contributing its own extra logic.

　　

"ExtJS" About custom components (i)