Believe that a lot of people to use JS client programming compared to the head, in fact, now has a lot of excellent JS library, can greatly simplify the work of JS programming, in which, jquery and ExtJS is two very excellent JS library. I've been using jquery frequently in projects, this is mainly to learn to use ExtJS, but the existing tutorials are basically for 2.0, and the background used in the language is rarely the. NET platform of C #, so I intend to 3.0 version, the backstage use of C #, recording their own learning process, I hope to discuss with like-minded friends and make progress together.
ExtJS's official website is http://www.extjs.com, the current highest version is 3.0.2, but only 3.0.0 does not have any download restrictions, you can click here to download the 3.0 version of. The downloaded package contains a compressed ExtJS library, a library for debugging, a readable source code, documentation, and examples. Before you start, you may want to look at the examples folder under the example, the ExtJS has a perceptual understanding, if you think the effect of the example inside let you heart, then together to start the extjs of the study trip.
First identify the files we need to refer to, including adpter/ext/ext-base-debug.js,ext-all-debug.js and the entire resource folder, and of course, in most cases, we also need ext-lang-zh_ Cn.js is localized in Chinese, the file is in the Src/locale directory. Because it is the learning phase, we use the debug version, in the actual project, the release of the time to use the compressed version to reduce the size of the file. Next, we follow the tradition of the programming world and start our first Hello World program.
Create a new text file with the filename changed to hello.htm, open with a text editor, and write the following code:
Hello.htm
1 2 3<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" />
4<title>extjs Hello World dialog</title>
5<link rel= "stylesheet" type= text/css "href=" ex Tjs/resources/css/ext-all.css "/>
6<script type=" Text/javascript "src=" Extjs/ext-base-debug.js "></ Script>
7<script type= "Text/javascript" src= "Extjs/ext-all-debug.js" ></SCRIPT>
8<script Type= "Text/javascript" src= "Extjs/ext-lang-zh_cn.js" ></SCRIPT>
9<script type= "Text/javascript" src = "Js/daben.js" ></script>
10 11<body>
12<div id= "Hello" ></div> The contents of the
13</body>
14 Daben.js are as follows:
1/**//*
2 * Author: Big stupid
3 * Date: 2009-10-10
4 * Version: 1.0
5 * Blog Address: http://yage.blogs.com
6 */
7ext.onready (function () {
8 Ext.MessageBox.alert ("info", "Hello World") );
9});
Use IE or FF to open hello.htm, you can see a pop-up dialog box, and JS Alert dialog box, but much more beautiful.
We look at the code, in the HTML page first reference ExtJS related library files, note the reference order, followed by the reference to our own JS file. Let's take a quick look, Ext.onready is triggered after the document is loaded, and it has a parameter that is a function type that is invoked when the event starts. Here we use anonymous functions, and of course we can define the function externally, and then pass the function's name as a parameter. Ext.MessageBox.alert is a dialog box function that pops up a message, the first argument is the caption, and the second argument is the contents of the dialog box. The Ext.message class also has the Simulation JS prompt dialog box and the Comfirm dialog box method, we changes the daben.js to see the Confirm method the effect:
1/**//*
2 *作者：大笨
3 *日期：2009-10-10
4 *版本：1.0
5 *博客地址：http://yage.blogs.com
6 */
7Ext.onReady(function(){
8 //Ext.MessageBox.alert("信息","Hello world");
9 Ext.MessageBox.confirm("comfirm","模拟js的comfirm对话框",function(btn){
10 alert("点击了"+btn+"按钮");
11 });
12});
Just looking at the dialog box is not very interesting, in the actual Web program, you need to submit the data to the server and update the contents of the page according to the server's response, let's see how ExtJS is implemented. In the example below, we'll put an edit box and a button on the page, and when the button is clicked, the server converts the contents of the edit box to uppercase and displays it in a div on the page. Open vs2008, create a new Web application Extjsdemo, and delete the Default.aspx file that is automatically added. Add our hello.htm and daben.js files and the ExtJS library we want to use, as shown in the figure below:
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
