| Summary:This tutorial will help you properly plan an application.Program. |
| Author:Jozef sakalos (TRANSLATOR: Frank Cheung) |
| Published:August 27,200 7 |
| EXT version:1.1 +/2.0 + |
| Ages: EnglishChinesePortuguese Korean |
| contents [hide]
|
This tutorial assumes that you have installed the extjs library. The installation directory isExtjsAnd located in the upper-level directory of your program. If you want to install it elsewhere, you must change the pathSRC.
What do you need?
In addition to the extjs library, we also need two files:
Let's take a look at an HTML document, which is simplified. With detailed instructions:
Applayout.html
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" Http://www.w3.org/TR/html4/loose.dtd> <HTML> <Head> <Meta HTTP-equiv="Content-Type" Content="Text/html; charset = UTF-8"> <Link REL="Stylesheet" Type="Text/CSS" Href="../Extjs/resources/CSS/ext-all.css"> <Script Type="Text/JavaScript" SRC="../Extjs/adapter/EXT/ext-base.js"> </SCRIPT> <Script Type="Text/JavaScript" SRC="../Extjs/ext-all-debug.js"> </SCRIPT> <Script Type="Text/JavaScript" SRC="Applayout. js"> </SCRIPT> <! -- Local scripts are referenced here --> <Script Type="Text/JavaScript"> Ext. onready (mynamespace. App. init, mynamespace. app ); </SCRIPT> <Title> Application layout tutorial</Title> </Head> <Body> </Body> </Html>
The first two lines declare the document type. The program does not need doctype, but the browser may be of the quirks uncommon type by default, which may cause a difference in processing cross-browser issues.
We use the HTML 4.01 transitional document type, which is well supported in mainstream browsers. Of course, you can also use other types of doctype based on your needs, but rememberDon't forget to add doctype.
Specify the Content-Type of the HTML header. Doing these things is actually trivial, but it is always helpful.
Then introduce the ext style, adapter and extjs itself. There are two versions of extjs:
The debug version must be introduced during the development phase.
Applayout. jsThis file is our program, followed by a localized script, which can be replaced with an extjs translated version.
Next we start to allocate event handler so that after all the documents are loaded, the program can be initialized (run ).
The following line:
Ext.Onready(Mynamespace.App.Init, Mynamespace.App);
When all documents are loaded, run the init method of mynamespace. App. The specified scope is mynamespace. App.
Then there is the title, the end of the header, the body (currently empty) and the end label.
Applayout. js
/*** Application Layout * by Jozef sakalos, aka Saki * http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_ (Chinese )*/ /** Notice Chinese users Please note: applayout. js this file should be forcibly defined as the UTF-8 encoding while editing the generated file can be passed .------------------------------------------------*/ // Fill in the local reference of the image Ext. Blank_image_url = '../Extjs/resources/images/default/s.gif' ; // Create a namespace Ext. Namespace ( 'Mynamespace' ) ; // Create an application Mynamespace. App = Function ( ) { // The element has not been created and cannot be accessed // Private variable // Private function // Public Space Return { // Public attributes, such as the string to be converted // Public Method Init: Function ( ) { Alert ( 'Application Initialization is successful. ' ) ; } } ; } ( ) ; // Program bottom // Bottom of the file
The first few lines of the file are comments, which describe the main content, author, and author information of the file. Programs without any annotations can run normally, ---- but remember:Every time you write a program, it is easy to understand always write your application as if you wocould write it for another.When you look back at what you wrote a few months agoCodeWhen you do not remember what you wrote, you will understand this truth and develop a good habit of coding. The next step is to point to the filling image of your server. If this parameter is not specified, extjs.com is used by default. Access extjs.com every time you run the program. It is not recommended that you modify the constant value to the local device.
Now you can customize the namespace. Divide all variables and methods into a global object for management. This avoids variable name conflicts and interference with global variable values by different functions. Namespace can be selected according to your own solution.
The focus of the entire code segment is that we have createdMynamespaceObject AttributesAppThe value is the return value after a function is immediately run.
If you run our code:
VaRO =Function() {Return {P1:11, P2:22};}();
In fact, we have created an anonymous function (a function without a name) and explained it to run immediately (note()). Finally, assign the object returned by the function (note that this is an object variable) to the variable.O. Our program is written in this way.
You can define private variables and private functions directly between the declaration of function and return, but remember: at this time, you cannot access any elements on the HTML page, which leads to errors, this code runs in the header of the page when it is loaded, and other elements in the HTML page are not loaded yet.
On the other hand, functionsInitIs a method of objects returned by anonymous functions. It loads all filesAfter. In other words, the entire DOM tree is available.
Everything is okay ~ A dialog box pops up if the http://yourserver.com/applayout/applayout.html runs correctly without any errors.
Next we will use this blank template to discuss the focus of this article.
Public, private, and privileged?
It makes our program more interesting. On the pageApplayout.htmlAdd:
<Div ID=Btn1-ct"></Div>
The blank div is used as the button container. ThenApplayout. jsAdd the following code:
/*** Application Layout * by Jozef sakalos, aka Saki * http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_ (Chinese )*/ // Fill in the local reference of the image Ext. Blank_image_url ='../Extjs/resources/images/default/s.gif' ; // Allow this guide to work simultaneously on ext2.0 and 1.1 Ext. Ext2 = ( Ext. Version && ( Ext. Version . Indexof ( "2" ) = 0 ) ) ; // Create a namespace Ext. Namespace ( 'Mynamespace' ) ; // Create an application Mynamespace. App = Function ( ) { // The element has not been created and cannot be accessed // Private variable VaR Btn1; VaR Privvar1 = 11 ; // Private function VaR Btn1handler = Function ( Button, event ) { Alert ( 'Privvar1 =' + Privvar1 ) ; Alert ( 'This. btn1text =' + This . Btn1text ) ; } ; // Public Space Return { // Public attributes, such as the string to be translated Btn1text: 'Button 1' , // Public Method Init: Function ( ) { If ( Ext. Ext2 ) { Btn1 = New Ext. Button ( { Renderto: 'Btn1-ct' , Text: This . Btn1text , Handler: btn1handler } ) ; } Else { Btn1 = New Ext. Button ( 'Btn1-ct' , { Text: This . Btn1text , Handler: btn1handler } ) ; } } } ; } ( ) ; // Program bottom // Bottom of the file
VariableBtn1AndPrivvar1YesPrivate. That means they cannot be accessed outside the program, and they are invisible. Private FunctionsBtn1handlerThe same is true.
In addition,Btn1textIt is a public variable, so it can be accessed or modified outside the program (we will demonstrate it later ).
FunctionInitYesPrivilegedThat is, both private and public variables can be accessed by them. In this example, public variablesThis. btn1textAnd private functionsBtn1handlerCan bePrivileged functionsInit. At the same time, it also belongsPublicA member.
OK. Run the command. Can you see the button in the upper left corner? Good. Click it. GetPrivvar1 = 11Warning. This shows that private functions can access private variables.
However, in the second alert,This. btn1textHoweverUndefinedIt indicates that it is undefined. This is not the expected result. The reason is in handler.ThisThe variable pointsButtonInstead of oursMynamespace. app. AddScopeAttribute to specifyThisIsMynamespace. app:
If ( Ext. Ext2 ) { Btn1 = New Ext. Button ( { Renderto:'Btn1-ct' , Text: This . Btn1text , Handler: btn1handler, scope: This } ) ; } Else { Btn1 = New Ext. Button ( 'Btn1-ct' , { Text: This .Btn1text , Handler: btn1handler, scope: This } ) ; }
Refresh it, OK?
Override public variables
InApplayout. jsAdd the following code at the bottom:
Ext.Apply(Mynamespace.App,{Btn1text:'Taste 1'});// Bottom of the file
What is this code used? First, it creates our program object and then changes (overwrites) The public variables.Btn1text. After running, you will see the text changes on the button.
Put all the text in public variables to facilitate future international translation without modifying the internal code of the program.
Of course, you can also put all other values, such as dimensions, styles, and so on, in short, customizable options into public variables. It eliminates the hassle of searching for a color in thousands of lines of code.
Overriding Public Functions
Next, change the code to read it like this:
Ext. Apply ( Mynamespace. App , { Btn1text: 'Taste 1' , Init: Function ( ) { Try { Btn1 = New Ext.Button ( 'Btn1-ct' , { Text: This . Btn1text , Handler: btn1handler, scope: This } ) ; } Catch ( E ) { Alert ( 'Error :"' + E.Message + '"Row :' + E. Linenumber ) ; } } } ) ; // End of File
Here we willInitI wrote an article, mainly by adding exception Control to the original code to capture exceptions. Are there any other changes during the trial run?
Yes, it appears.Btn1handlerUndefined error. This is because although the new function tries to access private variables, it is actually not allowed. As you can see, the original init is a privileged function that can access private space, but the new init cannot. Private space cannot be accessed because the external code no code from outside is prohibited, even if it attempts to override the privileged method.
See
Retrieved from "http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_%28Chinese%29"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
