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
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
