UI device Trainer: Use ext js to create the "about" dialog box (suitable for beginners of ext ).

Sometimes, is it easy for us to use ext because of its shy JS syntax? There may be many examples when we first came into contact with each other. However, when we sighed, we still felt that it was a mouse to pull the mouse and we couldn't start with it? Perhaps, we should calm down and do not have to drill down. A casual interface can be drawn by Ext, it seems that a common "about" dialog box on the software interface is introduced here.

Is the final completion, not too complex, just shows the basic application of the ext component.

 

First, introduce the necessary CSS style rules and the about. js file to the page. About. js contains the Ext. UX. EDK. aboutdialog class. The following are the CSS styles involved in the component:

. Aboutdlg {<br/> width: 308px; <br/> Height: 240px; <br/> padding-top: 20px; <br/>}< br/>. aboutdlg_btn {<br/> background-color: # eaeaea; <br/> width: 308px; <br/> Height: 56px; <br/> text-align: center; <br/>}< br/>. aboutdlg P {<br/> color: # 4b4b4b; <br/> margin: 15px; <br/>}

Then, create an instance of aboutdialog according to the following new statement and modify the corresponding configuration item parameters (for example, you can modify the picture, the configuration item of this. Picture) to create a dialog box for your own software! The code for the launch dialog box is as follows:

Ext. onready (function () {<br/> (New Ext. UX. EDK. aboutdialog ({<br/> picture: 'setup_2.jpg '<br/>, appversion :. 9 <br/>, apptext: '"HTML, JavaScript, and Dom are basic knowledge of page development in Ajax browsers. Otherwise, page programming is impossible. "'<Br/>, applinktext: 'ext Chinese net' <br/>, applinkhref: 'http: // www.ajaxjs.com' <br/> })). show (); <br/>}); <br/>

We use Ext. windows writes new extensions. ext is like this, and each component is inherited. The class library is the class provided in this ext SDK, such as the current Ext. window, on the basis of which we expand the journey of new components, so that there are constantly new components that will be inherited from different UI components.

Ext. NS ('ext. UX. EDK '); <br/>/** <br/> * @ Class Ext. UX. aboutdialog <br/> * @ extends Ext. window <br/> * @ CFG isxxl {Boolean} (optional) true if about dialog will look more larger (for some skins/thmem ). <br/> * @ CFG appname {string} Application name <br/> * @ CFG appversion {string} application version <br/> * @ CFG apptext {string} text to display about app. <br/> * @ CFG applinkhref {string} the app. UR L to open with new window. <br/> * @ CFG applinktext {string} the app. URL to display text, must be started with 'HTTP: // '<br/> * @ CFG showextjs {Boolean} (optional) true if show the text about extjs <br/> * @ CFG extversion {string} (optional) the version of ext <br/> * @ CFG icon {string} (optional) app. icon path, size in 15x15 is better <br/> * @ CFG picture {string} the picture on dialog's left, S Ize in 15x15 is better <br/> **/<br/> Ext. UX. EDK. aboutdialog = ext. extend (ext. windows, {<br/> CLS: 'x-aboutdialog '<br/>, modal: True <br/>, resizable: false <br/>, title: 'About depcms' <br/>, width: 488 <br/>, height: ext. isie? 350: 343 <br/>, isxxl: false <br/>, showextjs: True <br/>, extversion: '3. 0' <br/>, initcomponent: function () {<br/> this.html = {<br/> tag: 'table', <br/> style: 'background: # f4f4f4 ', <br/> Children: {<br/> tag: 'tr', <br/> Children: [{<br/> tag: 'td '<br/>, valign: 'top' <br/>, children: {<br/> tag: 'img' <br/> //, height: 316 <br/>, Src: This. picture <br/>}< br/>},{ <br/> tag: 'Td '<br/>, valign: 'top' <br/>, children: [{<br/> tag: 'div' <br/>, CLS: 'aboutdlg', <br/> HTML: '<P style = "text-align: right;" mce_style = "text-align: right; "> '+ <br/>' current version: '+ <br/> This. appversion + <br/> '<br/> powered by extjs UI engine <br/> ext all in one Lib: ext. UX. helper v0.3 '+ <br/>' </P> '+ <br/>' <p> '+ <br/> 'extjs and extjs logos and trademarks of ext JS, LLC. all rights Reser Ved. <br/> '+ <br/> This. apptext + <br/> '</P> <br/>' + <br/> '<p>' + <br/> 'deepcms uses <a rel = "License "Target =" _ blank "href =" http://creativecommons.org/licenses/LGPL/2.1/deed.zh "mce_href =" http://creativecommons.org/licenses/LGPL/2.1/deed.zh "> '+ <br/> 'CC-GNU lgpl protocol </a>. '+ <Br/>' </P> '<br/> },{ <br/> tag: 'div' <br/>, CLS: 'aboutdlg _ BTN '<br/>, HTML: string. format ('<br/> <button style = "width: 75%; margin-Right: 8px;"> upgrde/support: {0} </button> <button> OK </button> ', this. applinktext) <br/>}] <br/>}< br/>}; <br/> Ext. UX. EDK. aboutdialog. superclass. initcomponent. apply (this, arguments); <br/>}< br/> // @ overried <br/>, afterrender: function () {<br/> ext. UX. EDK. aboutdialog. superclass. afterrender. apply (this, arguments); </P> <p> // open the URL <br/> This. getel (). child ('button: First '). on ('click', function () {<br/> window. open (this); <br/>}, this. applinkhref); </P> <p> // This is an aboutdialog instance and can be delegated. Therefore, this. close can be directly referenced to the event processor. <Br/> This. body. child ('button: last '). on ('click', this. close, this); // <br/>}< br/>}); <br/>

(Although the comments for "configuration items" are in English, they are written in very authentic Chinese English :))

We can tell you that as long as every line of code above knows why, the colorful avenue for learning ext is open to you...

 

The content disclosed here is extjs 3 details and practices

For more information, see extjs 3 details and practices.

A comprehensive introduction to this book.