Home > Developer > JavaScript
Seeing the beautiful interface of Extjs, I suddenly had an inexplicable impulse to learn it!
Extjs is a set of ajax controls developed from yui-ext. It is a complete rich client solution and has complete functions, ext-all.js has more than 400 k (the latest extjs3.2.0 has more than 600 k), that is based on js and css function implementation, on the client machine performance also has certain requirements, for example, ie6 or earlier versions are not supported.
Next, I started Extjs Learning (I am also just learning it. I hope you will ask questions in this article ). "Hello World" is a classic entry-level program for today's programming languages. Many textbooks use "Hello World" to lead us into the wonderful World of programs.
Before developing an application using the Extjs framework, you must import the Extjs resource package to your project. The latest Extjs development kit version is 3.2.0, which can be downloaded from the official Extjs website, the URL is www.extjs.com/download. After the download is complete, decompress the package. The structure is shown below.
After downloading the Extjs Development Kit, we can develop Extjs. First we open VS2008 and create a new project. I will name it Com. KimiYang. Web. After the project is created, copy the extracted Extjs Development Kit to the project. Directory adapter, resources, and file ext-all.js must be copied to the project. I created the Extjs3.2.0 folder in the root directory of the project, and copied the above folders and files to the folder Extjs3.2.0. Shows the directory structure:
Now we start to write the "Hello World" program. We will write it directly on the Default. aspx page to open the Default. aspx page. To use Extjs to develop applications, it is not enough to import Extjs development to a project. You also need to reference the corresponding files on the page. The core file has the following three: resources/css/ext-all.css (control interface style, do not introduce the style, will directly lead to page confusion ), adapter/ext/ext-base.js and ext-all.js (these two files are all of Extjs's functionality), except the three files must be introduced, for Chinese developers must also introduce a file: extjs3.2.0/src/locale/ext-lang-zh_CN.js ). The above files are referenced in sequence, otherwise the program will fail. The following code is "Hello World". When a user opens the page, a dialog box is displayed, showing Hello Wold.
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Default. aspx. cs" Inherits = "Com. KimiYang. Web. _ Default" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
<Link href = "Extjs3.2.0/resources/css/ext-all.css" rel = "stylesheet" type = "text/css"/>
<Link href = "Extjs3.2.0/resources/css/xtheme-gray.css" rel = "stylesheet" type = "text/css"/>
<Script src = "Extjs3.2.0/adapter/ext/ext-base.js" type = "text/javascript"> </script>
<Script src = "Extjs3.2.0/ext-all.js" type = "text/javascript"> </script>
<Script src = "Extjs3.2.0/src/locale/ext-lang-zh_CN.js" type = "text/javascript"> </script>
<Script type = "text/javascript" language = "javascript">
Function openMsg ()
{
Ext. MessageBox. alert ('status', 'Hello world', 'showresult ');
}
Ext. onReady (openMsg );
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
</Div>
</Form>
</Body>
</Html>
Execute the above Code and the following results will be displayed.
First, define a method openMsg. The function of this method is to pop up an Extjs dialog box, Ext. onReady () is the entry to use Extjs. Only after the Extjs framework is loaded will Ext be executed. functions in onReady.
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
