Ext JS
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
As you read through this article, 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 a recent version of Ext JS (version 4+).
Contents
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").addCls("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.addCls("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.
Note: element.addCls() adds a CSS class to that element. Prior to version 4 of Ext JS, it was simply element.addClass().
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.
Utility Methods
Ext JS provides a variety of tools that enable you to perform other common tasks more easily.
Strings
Example: String Utility Functions
Demonstration of some of Ext's string utility functions.
You can access Ext's String utility functions inside Ext.String. See the JSFiddle example for a demonstration. Some of the useful functions include:
- Ext.String.trim(str) trims str of leading whitespace.
- Ext.String.ellipsis(str, len) puts a (fake) ellipsis after len characters in str
- Ext.String.escape(str) escapes ' and \ characters from str
- Ext.String.format(format, arg0, arg1, ...) is Ext's version of sprintf (see the example for a demonstration)
- Ext.String.htmlEncode(str) encodes HTML special characters to make a string safe for display; similar to PHP's htmlentities() or htmlspecialchars()
A complete list is available in the Ext JS documentation.
Creating DOM Elements
Example: Creating Elements
Demonstration of how Ext can create elements for the DOM.
Ext JS makes it easy to create new DOM elements on the fly. Again, see the JSFiddle example for a demonstration.
Preventing HTML Injection
If you pass a string where Ext JS expects a child element, Ext will treat the string as an HTML string by default. This may open your application to XSS vulnerabilities if you are not careful. It is therefore recommended that you force Ext to create text nodes (thereby displaying strings literally) by putting this line at the top of your JavaScript file:
Ext.DomHelper.useDom = true;
Other Helpful Utilities
- Ext.Number.constrain(num, min, max) returns num iff it is between min and max, or otherwise min if the number was smaller or max if the number was bigger
- Ext.Number.randomInt(min, max) returns a random integer between min and max inclusive.
- Ext.Object.getKeys(obj) returns all keys from the object literal obj
- Ext.Object.each(obj, fn) iterates through the object literal obj, calling fn(key, value) on each key/value pair.
- Ext.each(arr, fn) iterates through the array arr, calling fn(value, index) on each item in the array.
- Ext.Array.map(arr, fn) returns an array containing the return value of fn(value, index) on each item in arr.
- Ext.Array.min(arr) and .max(arr) and .mean(arr) return the maximum value, minimum value, and average value of arr, respectively.
- Ext.toArray(non_arr) converts the iterable non_arr into a true Array. Especially useful for dealing with the arguments non-array:
alert( Ext.Array.toArray(arguments).join(" - ") );
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" });
