Difference between revisions of "Ext JS"
(Created page with 'Ext JS is a ''JavaScript Framework''. It serves two main functions: * Simplifies common operations that would take many lines in pure JavaScript * Provides a selection of APIs …') |
m (→AJAX) |
||
| Line 142: | Line 142: | ||
</source> | </source> | ||
| − | Note | + | '''Note:''' When parameters are given, Ext sends a POST request by default. If no parameters are given, Ext sends a GET request. If you want to send a GET request but also prevent caching, set the ''disableCaching'' option to ''true''. |
| + | |||
| + | '''Note:''' We use '''Ext.util.Format.htmlEncode(str)''' in the above example. This is Ext's closest equivalent to PHP's '''htmlencode($str)'''. | ||
==== Submitting an Entire Form over AJAX ==== | ==== Submitting an Entire Form over AJAX ==== | ||
Revision as of 09:49, 25 February 2013
Ext JS is a JavaScript Framework. It serves two main functions:
- Simplifies common operations that would take many lines in pure JavaScript
- Provides a selection of APIs for client-side gadgets
Contents
Ext Core
Ext Core is the part of Ext JS that enables quick and easy client-side manipulation of a web page.
As you read through this section, you might find it helpful to play with some of the examples. Feel free to open up a new [1], and where it says "Choose a Framework", select Ext JS 3.4.0. (Ext Core has yet to be updated to use the syntax of Ext JS 4.)
Selecting an Element
In pure JavaScript, you used functions like document.getElementById() in order to select elements. The functions provided by the W3C work fine, but they are often limiting. Ext Core provides functionality that lets you make more advanced element selections in fewer lines.
Select by ID
To select an element by its ID and then perform an action on it, use Ext.fly(id):
// Add the class "required" to the element with id "myDiv":
Ext.fly("myDiv").addClass("required");
If you need to pass the element by reference, use Ext.get(id) instead:
// Add the class "required" to an element passed as an argument:
function setElementRequired( element ){
element.addClass("required");
}
// Call the above function, passing the element with id "myDiv" as the argument:
setElementRequired( Ext.get("myDiv") );
Note: Ext.fly() is faster than Ext.get(). However, Ext.fly() does not return a useful reference like Ext.get() does.
Calls to most Ext Element methods can be chained:
// Add the class "required" to the element with id "myDiv", then make it slowly fade away,
// all in one line:
Ext.fly("myDiv").addClass("required").ghost();
// The above line is functionally equivalent to:
Ext.fly("myDiv").addClass("required");
Ext.fly("myDiv").ghost();
Example: Ext Core Select
This example illustrates one use of Ext.select(). Notice how the Ext selector for the "games" list works exactly the same as the selector for the "movies" list.
Select by CSS Selector
CSS provides a syntax with which you are already familiar for selecting elements. Ext enables us to use CSS selectors within JavaScript to select elements via Ext.select(selector). For example:
Ext.select("ul.games li:nth-child(2n)").addClass("required");
Document Ready
When a browser loads JavaScript from a server, it runs the code as soon as it is treated. This can cause problems if your JavaScript depends on content later in the document. Consider the following example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Execution Order</title>
<script>
alert( Ext.fly("myDiv").getHTML() );
</script>
</head>
<body>
<div id="myDiv">Hello World</div>
</body>
</html>
This raises the following exception: "Uncaught TypeError: Cannot read property 'textContent' of null." Why? Because the JavaScript is run before the Div is created!
Ext solves this problem by enabling us to bind JavaScript code to the DOMContentLoaded event, which fires as soon as the document is loaded. (This is different from the load event, which fires when the entire web page is loaded, including images.) Simply use Ext.onReady:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Execution Order</title>
<script>
Ext.onReady(function(){
alert( Ext.fly("myDiv").getHTML() );
});
</script>
</head>
<body>
<div id="myDiv">Hello World</div>
</body>
</html>
While you could do this in pure JavaScript, there are backwards compatibility issues with that approach which Ext handles behind the scenes.
AJAX
Ext Core makes AJAX easy. The following code fetches and parses the contents of data.json and then displays it on the page:
Ext.Ajax.request({
url: "data.json",
success: function(response){
var jsonData = Ext.decode(response);
Ext.fly("myDiv").setHTML( jsonData.description );
},
failure: function(respose){
console.log( "Error loading data; received error code " + response.status );
}
});
The following code sends a comment ID to comment_ajax.php, which responds with a JSON object containing the comment's HTML:
Ext.Ajax.request({
url: "comment_ajax.php",
params: {
comment_id: 45
},
success: function(response){
var jsonData = Ext.decode(response);
// Sanitize the response before displaying it on the page:
var sanitizedComment = Ext.util.Format.htmlEncode( jsonData.contents );
Ext.fly("myDiv").setHTML( sanitizedComment );
},
failure: function(respose){
console.log( "Error loading data; received error code " + response.status );
}
});
Note: When parameters are given, Ext sends a POST request by default. If no parameters are given, Ext sends a GET request. If you want to send a GET request but also prevent caching, set the disableCaching option to true.
Note: We use Ext.util.Format.htmlEncode(str) in the above example. This is Ext's closest equivalent to PHP's htmlencode($str).
Submitting an Entire Form over AJAX
Ext gives us another handy feature for AJAX requests: it enables us to automatically send the entire contents of a form. For example, suppose we had the following form in HTML:
<form id="myForm" action="login.php">
<label>Username: <input type="text" name="usr" /></label>
<label>Password: <input type="password" name="pwd" /></label>
</form>
We can submit this form asynchronously in just one line of Ext:
Ext.Ajax.request({ form: "myForm" });
