"ExtJS" with date component text input box, container and Ext.Msg.alert alarm box alarm two times

The UI components of ExtJS primarily mimic the interface effects of the client, even if they are programmed in a similar way.

I. BASIC OBJECTIVES

For example, the following components, and VC6 in the "MFC" Dialogue between the different dialog box, global variables and date control (click to open the link) is similar.

Its basic idea is to first set up two date components with button components, and then, at the click of a button, the event is triggered.

Second, the production process

First of all, this page uses ExtJS programming all the way, so the basic HTML layout, dealing with the introduction of ExtJS resources, nothing. You can even write the following ExtJS script completely in a JS.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

After that, in Ext.onready (function () {}), two Date components and button components are set first. This is not like jquery, and "ExtJS" ExtJs4.2.1 Configuration and HelloWorld (click to open the link), do not write all the EXT function in the Ext.onready (function () {}), inside, without any effect. Here I have for my own lazy, engaged for a long time to find the problem.
<script>ext.onready (function () {var datefield1={xtype: ' Datefield ', id: ' StartDate ', Name: ' StartDate ', Fieldlabel: ' Start date '};var datefield2={xtype: ' Datefield ', id: ' EndDate ', Name: ' EndDate ', Fieldlabel: ' End Date '};var btn1={ Xtype: ' button ', text: ' OK ', Width:100,listeners: {click:function () {Ext.Msg.alert ("Start Time", ext.getcmp ("StartDate"). GetValue (), function () {Ext.Msg.alert ("End Time", ext.getcmp ("EndDate"). GetValue ());});}}; Ext.create (' Ext.container.Container ', {layout:{type: ' VBox ', align: ' center '},style:{backgroundcolor: ' #ccc ',}, RenderTo:Ext.getBody (), ITEMS:[DATEFIELD1,DATEFIELD2,BTN1]}); </script>

The settings for all components are set to a JSON, whose xtype component is set, indicating the type of this component, and the ID and name must be set. The Feldlabel of the text input box with the date component is the Chinese in front of its input box.
For the button component, the trigger of the event is a click event that must be inside a listener, and, of course, it can be written in other events, typically click.
After that, get the value of the XX component by EXT.GETCMP ("XX"). GetValue ().
If you want to make, Ext.Msg.alert alarm box alarm two times, the second alarm box must be written in the first alarm box callback function, the callback function means that the alarm box after the completion of the event, then the function of processing, the equivalent of a destructor.
After the component is set up, directly into the created container, layout is the ext layout, where the settings are arranged vertically in a row. You can set any CSS in the style. RenderTo:Ext.getBody (), is to put this container into the body, items represent the components contained in this container, here is the three is set, note that here is a JSON array, all of the components are JSON. There is no way to put JSON in JSON, which does not conform to JavaScript syntax, so items must use [] instead of {}.
Also, when setting all the components, note that all JSON and arrays do not end, otherwise your IE series will not read. This question does not leave a comma at the end of the "JavaScript" Array definition (click the Open link) already said.
"ExtJS" with date component text input box, container and Ext.Msg.alert alarm box alarm two times