Limitations of entry application deployment (pplication layout for beginners)

Source: Internet
Author: User
Tags html header
Tutorial: Application layout for beginners (Chinese) from learn about the ext JavaScript libraryjump to: navigation, search

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]

  • 1 prerequisites
  • 2 what do you need?
  • 3 applayout.html
  • 4 applayout. js
  • 5 publish public, private, privileged?
  • 6 override public variables
  • 7 overriding public functions
    • 7.1 See

Prerequisites

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:

    • Applayout.html
    • Applayout. js

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:

    • Ext-all.js-Reading is not supported and loading is faster. It is used for product release.
    • Ext-all-debug.js-Easy to read and use during development,

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
    • Tutorial: What is the scope?
    • Manual: Basic Application Design
    • EXT programmer's API documentation
    • EXT user forums

Retrieved from "http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_%28Chinese%29"

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.