The Ext JS framework is built in such a manner that makes it easy to extend. Ext JS extensions allow developers to create new classes that are derived from existing Ext JS classes, allowing the new class to use both its own new methods and the methods of the class that it extends. The Ext JS plug-in architecture allows developers to create new classes that do not depend on any existing Ext JS class (although they typically extend Ext.util.Observable). In this article learn how to build your own Ext JS extensions and plug-ins. Learn about the Ext JS classes, components, and how to extend them to create your own extensions and plug-ins.
When developing applications using Ext JS, or indeed any JavaScript library or framework, you can be sure that you are going to need functionality that isn't included out-of-the-box, or is present but doesn't work quite the way you want it to. Thankfully, Ext JS includes a powerful class and component ecosystem that makes it easy to extend existing features or build new components entirely. In this article, we will explore this extensibility, specifically looking at the concepts of extensions and plug-ins. You will learn what each of these concepts means and what is different between the two. You will then see how to build your own extensions and plug-ins and how to source existing plug-ins built by other developers for use in your own applications, saving you from reinventing the wheel.
Preconfigured classes are the most basic type of extensions. In addition to supplying values for the existing properties in a class, subclasses can also add new properties and methods that are not included in the parent class (that is, the class that is being subclassed or derived from).
Overriding methods in a parent class is not limited to the constructor. You can also override regular functions in a subclass and call the overridden parent function from within the subclass.
A nice feature of using plug-ins in Ext JS is that multiple plug-ins can be attached to a single component, providing additional functionality as required. This means that additional functionality can be broken up and only used when needed, improving the performance of the application. Of course, plug-ins should be written in such a way that they do not conflict with other plug-ins, otherwise they will not be able to be used concurrently in a component.
Ext JS extensions are written as subclasses of an existing class. They can provide additional properties or functions, or even modify the behavior of the parent class by overriding the constructor and other functions. To use an extension, you directly create an object of the extension subclass, which can then use, add, or override features to the parent class it is derived from. Extensions are best used when you need to change core functionality of an existing Ext JS component or feature, or when you want to build a brand new component altogether.
Ext JS plug-ins are written as classes that always have an init function. Unlike extensions, you will not create an object of a plug-in class directly, but rather you will register your plug-in with the component it attaches to. The options and functions defined in the plug-in will then become available to the component itself. Plug-ins are best used when you need to add features to a component. Because extensions are so tightly coupled with the classes they are derived from, plug-ins also present a viable alternative when you want your add-on to be easily detachable and interoperable with multiple components and derived components. Because plug-ins must be attached to an existing component, they are not usually suitable for building new components from scratch.
Ajax stands for Asynchronous JavaScript and XML, although the reference to XML is no longer valid as Ajax requests can return responses in several formats other than XML, for example JSON (JavaScript Object Notation). Ajax works by allowing JavaScript to asynchonously submit an HTTP request to the Web server, and to render its response without refreshing or rendering a new page. Instead, the developer would typically use DOM (Document Object Model) manipulation to modify part of the Web page to reflect the changes or data returned by the HTTP response.
A JavaScript framework or library is a set of utilities and functions that make it much easier to produce cross-browser compatible JavaScript code. Each library is vigorously tested on modern versions of many popular Web browsers, and as such, you can be confident that by using one of these frameworks, that your JavaScript-based RIA will work similarly across different browsers and platforms.
Another important feature of JavaScript frameworks is its improved support for event handling. Cross-browser event handling can be a nightmare due to the differing implementations between browsers, so JavaScript frameworks typically wrap browser events and provide a series of useful cross-browser compatible functions for dealing with them. Some frameworks also provide a series of standardized key codes that represent keyboard-based events (such as hitting the Escape key, Return key, cursor keys, and so forth).
All of these features are very useful, but there is one aspect to JavaScript frameworks that has been instrumental in their recent popularity—Ajax support. Like many other aspects of JavaScript, each Web browser tends to support Ajax in a different manner, making it tedious to work with Ajax in a way that is supported across all Web browsers. Almost all JavaScript frameworks include some form of Ajax library support that usually provides Ajax request and response objects, with helpers for evaluating responses, updating DOM elements, and polling a particularly request.
First off, take a look at a typical ExtJS Ajax request (see Listing 11).
Introduction
Ext JS is a comprehensive JavaScript framework that includes a vast collection of features, including cross-browser-compatible JavaScript helper utilities for DOM traversal and manipulation and data object stores. It also handles Ajax and direct web remoting, has an impressive collection of UI controls and widgets, charts and graphs, a powerful data grid control, and much, much more.When developing applications using Ext JS, or indeed any JavaScript library or framework, you can be sure that you are going to need functionality that isn't included out-of-the-box, or is present but doesn't work quite the way you want it to. Thankfully, Ext JS includes a powerful class and component ecosystem that makes it easy to extend existing features or build new components entirely. In this article, we will explore this extensibility, specifically looking at the concepts of extensions and plug-ins. You will learn what each of these concepts means and what is different between the two. You will then see how to build your own extensions and plug-ins and how to source existing plug-ins built by other developers for use in your own applications, saving you from reinventing the wheel.
What is an extension?
An extension for Ext JS is a derived class or a subclass, which is designed to allow the inclusion of additional features to existing Ext JS classes. Extensions can be as basic as "preconfigured classes," which basically supply a set of default values to an existing class configuration, useful if you frequently need to supply these parameters when using a particular component. For example, your application may use a series of pop-up windows using theExt.Window class, but these windows will always have the same width and height values. Rather than specifying this width and height every time you use Ext.Window, you could create an extension of Ext.Window with the preconfigured sizing properties. Not only does this save you from repeating the same code over and over, but it also makes your application much easier to maintain. And if you need to change the default size of your application's pop-up windows, you will only need to change it in one place rather than in several different locations in your code.Preconfigured classes are the most basic type of extensions. In addition to supplying values for the existing properties in a class, subclasses can also add new properties and methods that are not included in the parent class (that is, the class that is being subclassed or derived from).
Overriding methods in a parent class is not limited to the constructor. You can also override regular functions in a subclass and call the overridden parent function from within the subclass.
What is a plug-in?
A plug-in is a class that is used to provide additional functionality to an existing component. Rather than directly instantiating an object of a plug-in class, plug-ins are attached to a component using the "plugins" configuration option for that component. One of the key advantages of using plug-ins is that the plug-in can be used not only by the component it is attached to, but also by all subclasses derived from that component.A nice feature of using plug-ins in Ext JS is that multiple plug-ins can be attached to a single component, providing additional functionality as required. This means that additional functionality can be broken up and only used when needed, improving the performance of the application. Of course, plug-ins should be written in such a way that they do not conflict with other plug-ins, otherwise they will not be able to be used concurrently in a component.
Differences between extensions and plug-ins
At first it can be difficult to appreciate the difference between an extension and a plug-in in Ext JS, particularly given their similarities in terms of what they do. At the end of the day, both provide extended functionality to Ext JS classes. The primary difference lies in how they are written.Ext JS extensions are written as subclasses of an existing class. They can provide additional properties or functions, or even modify the behavior of the parent class by overriding the constructor and other functions. To use an extension, you directly create an object of the extension subclass, which can then use, add, or override features to the parent class it is derived from. Extensions are best used when you need to change core functionality of an existing Ext JS component or feature, or when you want to build a brand new component altogether.
Ext JS plug-ins are written as classes that always have an init function. Unlike extensions, you will not create an object of a plug-in class directly, but rather you will register your plug-in with the component it attaches to. The options and functions defined in the plug-in will then become available to the component itself. Plug-ins are best used when you need to add features to a component. Because extensions are so tightly coupled with the classes they are derived from, plug-ins also present a viable alternative when you want your add-on to be easily detachable and interoperable with multiple components and derived components. Because plug-ins must be attached to an existing component, they are not usually suitable for building new components from scratch.
Ajax stands for Asynchronous JavaScript and XML, although the reference to XML is no longer valid as Ajax requests can return responses in several formats other than XML, for example JSON (JavaScript Object Notation). Ajax works by allowing JavaScript to asynchonously submit an HTTP request to the Web server, and to render its response without refreshing or rendering a new page. Instead, the developer would typically use DOM (Document Object Model) manipulation to modify part of the Web page to reflect the changes or data returned by the HTTP response.
What is a JavaScript framework?
JavaScript on its own is a very powerful language, and you do not need any additional frameworks to create Rich Internet Applications (RIA) that are powered by it. Using JavaScript, however, is not an easy task, primarily due to the complications that arise when trying to provide support for multiple Web browsers. Like HTML and CSS, different browsers have separate implementations of JavaScript, and it can be a nightmare to ensure that your JavaScript code is cross-browser compatible.A JavaScript framework or library is a set of utilities and functions that make it much easier to produce cross-browser compatible JavaScript code. Each library is vigorously tested on modern versions of many popular Web browsers, and as such, you can be confident that by using one of these frameworks, that your JavaScript-based RIA will work similarly across different browsers and platforms.
Another important feature of JavaScript frameworks is its improved support for event handling. Cross-browser event handling can be a nightmare due to the differing implementations between browsers, so JavaScript frameworks typically wrap browser events and provide a series of useful cross-browser compatible functions for dealing with them. Some frameworks also provide a series of standardized key codes that represent keyboard-based events (such as hitting the Escape key, Return key, cursor keys, and so forth).
All of these features are very useful, but there is one aspect to JavaScript frameworks that has been instrumental in their recent popularity—Ajax support. Like many other aspects of JavaScript, each Web browser tends to support Ajax in a different manner, making it tedious to work with Ajax in a way that is supported across all Web browsers. Almost all JavaScript frameworks include some form of Ajax library support that usually provides Ajax request and response objects, with helpers for evaluating responses, updating DOM elements, and polling a particularly request.
Typical features of a JavaScript framework
Now, let's take a look at some of the useful features common to most JavaScript frameworks. These features are:- Selectors
- DOM traversal
- DOM manipulation
- Utility functions
- Event handling
- Ajax
Selectors
Most of the JavaScript frameworks available implement some form of support for rapid element selection. Generally speaking, these selectors make the process of obtaining a reference to an HTML element much faster, and allows you to search for the element by ID, class name, element type, or by using a series of pseudo-selectors.DOM traversal
Finding an element based on its ID, element type, or CSS class name is very useful, but what if you want to find an element based on its position in the DOM tree. In other words, say you have a given element and you want to find its parent element, one of its child elements, or its previous or next sibling elementDOM manipulation
Previously, you saw how selectors and DOM traversal make it easy to select particular elements using JavaScript frameworks. In order to change the appearance or content of a particular element on a Web page, however, you need to manipulate the DOM and apply that change. This can be quite cumbersome using pure JavaScript, but, thankfully, most JavaScript frameworks offer helpful functions that make it easy to do so.Event handling
Each JavaScript framework implements cross-browser event handling support that encourages you to move from the old-style inline attaching of events to a streamlined method.UX enhancements
Up until now, this article has focused entirely on the programmatic benefits of using JavaScript frameworks and how they can make coding interactive applications easier. With most frameworks, however, there is another aspect that makes their use an attractive prospect: User Interface (UI) components and User Experience enhancements that can be easily included and which would usually take a significant effort to build.Prototype
Prototype is one of the few JavaScript frameworks that does not include UI components or UX enhancements out-of-the-box. Instead, it defers all of this to its sister library, script.aculo.us (or Scripty2, as the latest version is known). Script.aculo.us adds support for a wide range of effects and behaviors in Prototype. These include effects like highlighting, morphing, folding, shaking, sliding, puffing, and more. Script.aculo.us also boasts drag-and-drop support, as well as sliders, in-place Ajax editors, and autocompleters. Unlike some frameworks, Script.aculo.us leaves the design of any controls (such as sliders and autocompleters) to the developer, providing no standard skin to work from.jQuery
Unlike Prototype, jQuery includes some basic UX enhancements with the core library. These are similar to some of the basic effects that come with script.aculo.us, such as sliding and fading. For more advanced UX features, however, you need to download the jQuery UI library, which includes more effects than the jQuery core, as well as interactivity features such as drag and drop, resizing, and sorting. Unlike script.aculo.us, the jQuery UI also includes some widgets or components that make the development of attractive interfaces much easier. At present, these components include Accordion, Datepicker, Dialog, Progressbar, Slider, and Tabs. These widgets are completely themable, and jQuery UI includes a wide range of themes that can be used to fit the components to your own particular Web site or Web applicationYUI
Whereas Prototype and jQuery do not include UI widgets out-of-the-box, the Yahoo! User Interface library (YUI) includes a bucketload. In addition to drag-and-drop support and resizing, version 2 of YUI includes autocompleters, calendar controls, carousel components, charting, dialogs, progress bars, rich text editors (or WYSIWYG text areas), sliders, tabs, trees, and more. At the time of this article, none of the aforementioned widgets have been included in version 3 of YUI.ExtJS
Like YUI, ExtJS includes a plethora of components out-of-the-box, most notably some very powerful grid controls with support for inline editing, pagination, filtering, grouping, summaries, buffering, and data binding. ExtJS components have a professional look-and-feel and are completely themable. Some of the other widgets that come with ExtJS include tabs, charts, windows (dialogs), trees, layout managers, enhanced form controls, toolbars and menus, drag and drop, and direct remoting. This really only scratches the surface of just how much ExtJS has to offer, so if you are looking for an extensive set of RIA components, be sure to check out the ExtJS WebsiteAjax
One of the most compelling reasons to use a JavaScript framework is for standardized cross-browser Ajax requests. An Ajax request is an asynchronous HTTP request that is usually made to a server-side script, which returns a response in a format such as XML, JSON, HTML, or plain text. Most JavaScript frameworks have some form of Ajax object with a request method that accepts a series of options as an argument. These options generally includecallback functions, which are called as soon as the script receives a response from the Web server. Let's look at what an Ajax request looks like in ExtJS, MooTools, and Prototype.First off, take a look at a typical ExtJS Ajax request (see Listing 11).
Listing 11. An ExtJS Ajax request
Ext.Ajax.request({
url: 'server_script.php',
params: {
name1: 'value1',
name2: 'value2'
},
method: 'POST',
success: function(transport) {
alert(transport.responseText);
}
});
Listing 13. A Prototype Ajax request
new Ajax.Request('server-script.php', { params: { name1: 'value1', name2: 'value2' }, method: 'post', onSuccess: function(transport) { alert(transport.responseText); } });