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
Copy Code code as follows:
<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>
<body>
<div id= "Hello" ></div>
</body>
The contents of Daben.js are as follows:
Copy Code code as follows:
/**//*
* Author: Big stupid
* Date: 2009-10-10
* Version: 1.0
*/
Ext.onready (function () {
Ext.MessageBox.alert ("Information", "Hello World");
});
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:
Copy Code code as follows:
Ext.onready (function () {
Ext.MessageBox.alert ("Information", "Hello World");
Ext.MessageBox.confirm ("Comfirm", "Simulate JS comfirm dialog box", function (BTN) {
Alert ("Click on" +btn+ "button");
});
});
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:
Can see in the JS directory below, add a vvswd-ext_2.0.2.js file, from hereCan download, this file can realize vs2008 for the ExtJS Library Smart tips, easy to program (but I did not find a version of 3.0, if a friend found trouble to send a copy to me). Let's take a look at a function Ext.Ajax.request of implementing and server-side communication in ExtJS, which takes a JSON object as a parameter with several commonly used properties:
URL: String type, indicating the address of the request
Params: Parameters that are passed to the server segment when requested, can be objects, strings
Methods: Requested method, String type, "get" or "POST", note must be uppercase
Success: function type, the function that is executed after the request succeeds, which has a parameter, is a XMLHttpRequest object that contains server-side response data
Failure: function type, a function that is executed after a request fails with a parameter that is a XMLHttpRequest object that contains server-side response data
Callback: function type, no matter how the result of the request executes
OK, let's take a specific look at how ExtJS interacts with the server side. First, make the following changes to our Hello.htm page:
Copy Code code as follows:
<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>
<body>
<input type= "text" id= "TXT"/><input type= "button" id= "BTN" value= "Submit"/>
<div id= "Div" ></div>
</body>
Then you change our Daben.js file, and the following code changes:
Copy Code code as follows:
<reference path= "Vswd-ext_2.0.2.js"/>
/**//*
* Author: Big stupid
* Date: 2009-10-10
* Version: 1.0
*/
Ext.onready (function () {
Ext.MessageBox.alert ("Information", "Hello World");
/**//*ext.messagebox.confirm ("Comfirm", "Simulate JS comfirm dialog box", function (BTN) {
Alert ("Click on" +btn+ "button");
});*/
Ext.get ("Btn"). On ("click", Function () {
var data = ext.fly ("TXT"). GetValue ();
if (data = = "") {
Ext.Msg.alert ("Warning", "Please 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 briefly: the first line is to use the smart tip of VS, note that the path is written right, and must be added to the first line. Ext.onready has already introduced, Ext.fly is Ext.Element.fly's shorthand, this method may obtain the element object according to the ID, the element class is a very important class in EXT, it encapsulates the DOM, has added some operations to be easy to use, and is compatible with the mainstream browser 。 GetValue is the element class method, get the value of the elements, the more depressing is that there is no corresponding SetValue method, so in the back using the Update method to update the value of the element. It is a good programming practice to verify the client before passing the value to the server, but this is simply a simple validation of a string that is not NULL. Then we used the Ext.Ajax.request method mentioned above, using this method to send the data to the page Hello.aspx post, we are sent as a JSON object, or as a string form, for a successful response, the text of the response is displayed in the Div, for the failure to ring Should, pop up a dialog box and give the error code.
The next step is to have server-side programming. The server side can accept the data delivered by the client and respond in two ways: using ASPX pages and Web services. Let's start by describing how to use ASPX pages for processing. Add a page hello.aspx to the project, <%@ page language= "C #" autoeventwireup= "true" codebehind= "Hello.aspx.cs" in the page except for the first line of the pages processing instruction section inherits= "Extjsdemo.hello"%> all deleted. Press F7 to switch to the code page and start writing the background code. We first get the data from the foreground by request.params["data", again, before we process the data, we validate the data first, and here we simply judge whether it is empty or empty string, Then we send the results of the processing to the client using the Response.Write method. The background code is as follows:
Copy Code code as follows:
Using System;
/**//*
* Author: Big stupid
* Date: 2009-10-10
* Version: 1.0
*/
Namespace Extjsdemo
{
public partial class Hello:System.Web.UI.Page
{
Page load #region page load
/**////<summary>
Page load
</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 the input string in the edit box, you can see in the following div inside the form of uppercase, through the firebug of FF we can see the data interaction.
In addition to using ASPX pages to accept and process data delivered by clients, we can use Web services as a way to do this. Add a Web service to your project with the following code:
Copy Code code as follows:
Using System;
Using System.Web.Services;
/**//*
* Author: Big stupid
* Date: 2009-10-10
* Version: 1.0
*/
Namespace Extjsdemo
{
/**////<summary>
Summary description of HelloService
</summary>
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = wsiprofiles.basicprofile1_1)]
[System.ComponentModel.ToolboxItem (False)]
To allow the use of ASP.net AJAX to invoke this Web service from a script, uncomment the downlink.
[System.Web.Script.Services.ScriptService]
public class HelloService:System.Web.Services.WebService
{
Change the passed-in string to uppercase #region the passed-in string to uppercase
/**////<summary>
Change the passed-in string to uppercase
</summary>
<param name= "Data" > strings that need to be capitalized </param>
<returns> Uppercase String </returns>
[WebMethod]
public string ToUpper (string data)
{
if (!string. IsNullOrEmpty (data))
return data. ToUpper ();
throw new Exception ("String cannot be empty!") ");
}
#endregion
}
}
Of course, by default, Web services deliver data in XML format, which we can see through Firebug. XML is good and powerful, but sometimes we just need a little more small json, so how do we make the Web Service pass in JSON format? All we need to do is set the Content-type in the request header to Application/json and encode the parameters using Ext.util.JSON.encode or use jsondata instead of params.
