Start extjs Journey: 2. Also starting from Hello World

Source: Internet
Author: User
2 also starting from Hello World

Almost all development languages start with "Hello World. Although "Hello world" is only a simple output, the development and running environments and workflows required by "Hello World" are not very different from those required to write a large software. So what is important is not to display or output "Hello World", but to successfully display or output this "Hello World" process.
For extjs learning, you can start with "Hello World" and get familiar with its development and running processes. Extjs is just a set of interface layer components implemented using JavaScript. Therefore, without data exchange with the server, server support is not required, it can run well in the local browser. The first extjs program "Hello World" does not need to communicate with the server, as long as a simple HTML file is used. As shown in Code 2-1.
Code 2-1: extjs's hello World
<HTML>
<Head>
<Title> ExtJS2-HelloWorld </title>
<LINK rel = "stylesheet" type = "text/CSS" href = "extjs2/resources/CSS/ext-all.css"/>
<SCRIPT type = "text/JavaScript" src = "extjs2/adapter/EXT/ext-base.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "extjs2/ext-all.js"> </SCRIPT>
</Head>
<Body>
<SCRIPT>
Ext. blank_image_url = 'extjs2/resources/images/default/s.gif'
Ext. onready (function (){
Ext. MessageBox. Alert ('helloworld', 'Hello world! Hello world! Hello world! Hello world! ');
});
</SCRIPT>
</Body>
</Html>
Code 2-1 is not difficult for those who have written javascript programs. In addition to the HTML framework, one CSS file and two JS files are introduced. These three files must be introduced for extjs development. In the body section, there is a piece of JS Code, and the specific significance of this Code is not too much attention now, which will be described in more detail in later sections. Save this code as an extjs-helloworld.html file. to properly introduce necessary resources, we need to pay special attention to the path to store this file. It should be placed at the same level of extjs development kit, as shown in 2-2.


Figure 2-2 Location of helloworld

As shown in Figure 2-2, this is the path where the file is stored. The extjs2 directory is the content shown in Figure 2-1. Well, the program has been written. You can check the running effect. You only need to double-click the extjs-helloworld.html file to open the browser automatically, but because it is a javascript program, it will be blocked by the browser, as shown in Figure 2-3.


Figure 2-3 the browser blocks the extjs program from running

In this case, as shown in 2-3, select "blocked content" and the program runs normally.
The interface shown in 2-4 indicates that the extjs program is fully running! Although simple, it's just a surprise
A simple dialog box is already so beautiful.


Figure 2-4 helloworld program running result

 

 

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.