I have used jquery frequently in projects. This time I mainly learned how to use extjs, but the existing tutorials are basically for 2.0, and the background language is rarely used. net platform C #, so I plan to use C # In the background for version 3.0, record my learning process, and hope to discuss and make progress together with like-minded friends.
Extjs official website is http://www.extjs.com, the current highest version is 3.0.2, but only 3.0.0 without any download restrictions, you can click here to download version 3.0. The downloaded package contains the compressed extjs library, the library used for debugging, and readable source code, documents, and examples. Before you start, take a look at the examples in the examples folder and have a perceptual knowledge of extjs, let's start extjs's learning journey together.
First clarify the files we need to reference, including adpter/ext/ext-base-debug.js, ext-all-debug.js and the entire resource folder, of course, in most cases, we also need ext-lang-zh_CN.js for Chinese localization, the file is in the src/locale directory. Because it is a learning phase, we use the debug version. In actual projects, we need to use the compressed version for release to reduce the file size. Next, we start our first Hello world Program with a consistent tradition in the programming world.
Create a new one, change the file name to hello.htm, open it in a text editor, and write the following code:
Hello.htm
Copy codeThe Code is as follows: <Head>The content of daben. js is as follows:Copy codeThe Code is as follows :/**//*
* Author: Dummies
* Date: 2009-10-10
* Release: 1.0
*/
Ext. onReady (function (){
Ext. MessageBox. alert ("info", "Hello world ");
});
Use ie ffto open hello.htm, and you can see a pop-up dialog box, which is the same as the alert dialog box in js, but is much more beautiful.
Let's take a look at the Code. On the html page, we first reference the relevant library files of extjs, pay attention to the reference sequence, and then reference our own js files. Let's take a simple look. Ext. onReady is triggered after the document is loaded. It has a parameter of the function type, which is called when the event starts. Here we use an anonymous function. Of course, we can also define the function externally and pass the function name as a parameter. Ext. MessageBox. alert is a pop-up message dialog box function. The first parameter is the title, and the second parameter is the content of the dialog box. The Ext. Message class also provides methods to simulate the js prompt dialog box and comfirm dialog box. Let's change daben. js to see the effect of the confirm method:Copy codeThe Code is as follows: Ext. onReady (function (){
// Ext. MessageBox. alert ("info", "Hello world ");
Ext. MessageBox. confirm ("comfirm", "simulate js comfirm dialog box", function (btn ){
Alert ("click the" + btn + "button ");
});
});
Viewing the dialog box is not very interesting. In actual web programs, you need to submit data to the server and update the content on the page based on the server's response. Let's take a look at how extjs is implemented. In the example below, we will place an edit box and a button on the page. After clicking the button, the server converts the content entered in the edit box to uppercase and displays it in a div of the page. Open vs2008, create a web application ExtjsDemo, and delete the automatically added default. aspx file. Compile our hello.htm and daben. js files, as well as the extjs library we will use:
We can see that under the js directory, with a vvswd-ext_2.0.2.js file, from here you can download, this file can achieve vs2008 for extjs library intelligent tips, convenient programming (but I didn't find any version for 3.0. If any one of my friends finds it, please send it to me ). Let's take a look at Ext. Ajax. request, a function that implements communication with the server in extjs. This function accepts a json object as a parameter, which has several common attributes:
Url: string type, indicating the request address
Params: The parameter passed to the server segment during the request. It can be an object or a string.
Method: The request method, string type, "GET" or "POST". Note that the request must be in uppercase.
Success: function type, which is executed after the request is successful. This function has a parameter that is an XMLHttpRequest object containing the server-side response data.
Failure: function type, which is executed after a request fails. This function has a parameter that is an XMLHttpRequest object containing the server-side response data.
Callback: function type, which is executed regardless of the Request result.
Okay. Let's take a look at how extjs interacts with the server. First, make the following changes to our hello.htm page:Copy codeThe Code is as follows: <Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Extjs hello world dialog </title>
<Link rel = "stylesheet" type = "text/css" href = "extjs/resources/css/ext-all.css"/>
<Script type = "text/javascript" src = "extjs/ext-base-debug.js"> </script>
<Script type = "text/javascript" src = "extjs/ext-all-debug.js"> </script>
<Script type = "text/javascript" src = "extjs/ext-lang-zh_CN.js"> </script>
<Script type = "text/javascript" src = "js/daben. js"> </script>
</Head>
<Body>
<Input type = "text" id = "txt"/> <input type = "button" id = "btn" value = "Submit"/>
<Div id = "div"> </div>
</Body>
</Html>
Then we changed our daben. js file. The changed code is as follows:Copy codeThe Code is as follows: // <reference path = "vswd-ext_2.0.2.js"/>
/**//*
* Author: Dummies
* Date: 2009-10-10
* Release: 1.0
*/
Ext. onReady (function (){
// Ext. MessageBox. alert ("info", "Hello world ");
/** // * Ext. MessageBox. confirm ("comfirm", "simulate js comfirm dialog box", function (btn ){
Alert ("click the" + btn + "button ");
});*/
Ext. get ("btn"). on ("click", function (){
Var data = Ext. fly ("txt"). getValue ();
If (data = ""){
Ext. Msg. alert ("warning", "enter a string ");
}
Else {
Ext. Ajax. request ({
Url: "hello. aspx ",
Params: {data: data },
Method: "POST ",
Success: function (response ){
Ext. fly ("div"). update (response. responseText );
},
Failure: function (response ){
Ext. Msg. alert ("error", "request failed, error code:" + response. status );
}
});
}
});
});
Let's analyze this file in a simple way: the first line is to use the smart prompts of vs. Note that you must add the correct path to the first line. Ext. onReady has already been introduced, Ext. fly is Ext. element. this method can obtain the Element Object Based on the id. The Element class is a very important class in Ext. It encapsulates the Dom and adds some operations for ease of use, compatible with mainstream browsers. GetValue is a method of the Element class, and there is no corresponding setValue method to obtain the value of the Element. Therefore, the update method is used later to update the value of the Element. It is a good programming habit to verify the client before passing values to the server. Here, we simply perform the verification that the string is not empty, and then use the Ext. ajax. request Method. Use this method to send hello to the page. aspx sends data in post mode, which is sent in the form of a json object. It can also be written as a string. For a successful response, the response text is displayed in the div, for a failed response, a dialog box is displayed with an error code.
Next we need to program the server. The server can accept the data transmitted by the client in two ways and respond: Use the aspx page and web Service. We will first introduce how to use the aspx page for processing. Add a page Hello. aspx, excluding the Page processing instructions of the first line in the Page <% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Hello. aspx. cs "Inherits =" ExtjsDemo. hello "%> Delete All. Press F7 to switch to the code page and start compiling the background code. We first use Request. params ["data"] is used to obtain the data transmitted from the foreground. Similarly, before processing the data, we first verify the data validity, here we simply judge whether it is null or a null string, and then we will use Response to process the result. the Write method is sent to the client. The background code is as follows:Copy codeThe Code is as follows: using System;
/**//*
* Author: Dummies
* Date: 2009-10-10
* Release: 1.0
*/
Namespace ExtjsDemo
{
Public partial class Hello: System. Web. UI. Page
{
Page loading # region page loading
/** // <Summary>
/// Page loading
/// </Summary>
/// <Param name = "sender"> </param>
/// <Param name = "e"> </param>
Protected void Page_Load (object sender, EventArgs e)
{
String data = Request. Params ["data"];
If (! String. IsNullOrEmpty (data ))
{
Response. Write (data. ToUpper ());
}
}
# Endregion
}
}
After running, enter a string in the edit box. You can see that the div below is displayed in an uppercase format. You can see data interaction through FF Firebug.
In addition to using the aspx page to accept and process data transmitted by the client, we can also use web services. Add a web service to the project. The Code is as follows:Copy codeThe Code is as follows: using System;
Using System. Web. Services;
/**//*
* Author: Dummies
* Date: 2009-10-10
* Release: 1.0
*/
Namespace ExtjsDemo
{
/** // <Summary>
/// Summary of HelloService
/// </Summary>
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = WsiProfiles. BasicProfile1_1)]
[System. ComponentModel. ToolboxItem (false)]
// To allow ASP. net ajax to call this Web service from a script, cancel the comments to the downstream.
// [System. Web. Script. Services. ScriptService]
Public class HelloService: System. Web. Services. WebService
{
Change the input string to uppercase # region change the input string to uppercase
/** // <Summary>
/// Change the input string to uppercase
/// </Summary>
/// <Param name = "data"> string to be converted to uppercase </param>
/// <Returns> capital string </returns>
[WebMethod]
Public string ToUpper (string data)
{
If (! String. IsNullOrEmpty (data ))
Return data. ToUpper ();
Throw new Exception ("the string cannot be blank! ");
}
# Endregion
}
}
Of course, by default, web Services transmit data in xml format. We can see it through Firebug. Xml is very good and powerful, but sometimes we only need smaller json. How can we make the web service transmit the json format? We only need to set the Content-Type in the request header to application/json and use Ext. util. JSON. encode to encode the parameter or use jsonData to replace params.
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
