Ext

As we approach the three year anniversary of the initial release of Ext, the Ext Team is proud to announce the immediate availability of Ext Core 3.0 beta for download. Ext Core provides a cross-browser consistent API for performing the most common tasks in JavaScript development for web pages. Ext Core is released under a permissive MIT license - there is no cost to use Ext Core - it's free for everyone.

Drawing upon our experience creating rich user interfaces, we isolated the most powerful features used to enhance new or existing web pages. Ext Core is a subset of the upcoming Ext JS 3.0 release optimized for speed & file size. Developers familiar with Ext JS can leverage their existing skillset to provide an enhanced user experience to their web pages.

Ext Core Overview

Ext Core distinguishes itself from other JavaScript libraries with a well defined object-oriented structure, which enables you to write clean and reusable code. Ext Core provides cross-browser abstractions for:

• DOM manipulation and traversal
• CSS management
• Event handling
• Dimensions and Sizing
• AJAX and JSON Support
• Animations

In addition to providing cross-browser abstractions for the DOM, Ext Core also includes some of the most used and popular utilities from Ext JS.

• Classical Inheritance Class System
• Observable Class
• Markup generation and Templating
• Timed code execution
• URL encoding and decoding

Library Size

Ext Core is perfect for inclusion in a dynamic web page or even a small application. We have gone through the source with a round of refactoring aiming to get the best possible compression. Considering all of the included features, Ext Core has a small footprint. It has a compressed footprint of 25K minified and gzipped.

Ext Core Manual

Another aspect of Ext Core that sets itself apart from other libraries is the Ext Core Manual. Written by the authors of Ext Core, and reviewed by the community Ext-perts, the Ext Core Manual provides beginners and experienced developers an in-depth view of how to use every aspect in Ext Core. No method or class has gone uncovered. This mini-book (75 pages printed) is meant to amplify the existing API documentation. We encourage everyone, including Ext JS users, to read the manual to sharpen their understanding of Javascript and Ext.

Examples using Ext Core

To illustrate the capabilities of Ext Core, our team built a few of the most commonly used extensions on the web. They also serve as a great reference for creating your own extensions. Given the small footprint of Ext Core, we were able to embed the Example Explorer into this blog post. These examples are freely available to be used on your web pages today.

Manual

Wether you are new to or an experienced user of Ext, the manual is an extensive resource in which everyone will be able to find and learn something new. The manual itself is a great example of how you can leverage Ext Core to spice up your website with a minimal amount of elegant and readable code. Read Manual

Carousel

The Carousel example provides a widget for browsing a set of objects. It can be configured to meet any of your specific requirements - auto-play, animations, custom navigation dynamic content and more. View Example

Lightbox

The Lightbox example provides a widget used to overlay images on the current page. It's simple to set up by registering a CSS selector. When you register a group of images you can browse through them within the Lightbox. View Example

Menu

The Menu example provides a widget that converts an existing list of links on the page to either a horizontal or vertical menu. There are many ways in which you can configure the menu, including different types of animations, setting the active item, delays and listening to several useful events. View Example

JSONP

The JSONP example shows how you can fetch JSON data from a different domain. It includes a class you can use to connect to any possible web service that supports the JSON format. In this example we use the Flickr API to fetch the latest photos for any keyword. View Example

Simple Tabs

The Simple Tabs example shows how you can create powerful navigation with only a few lines of code using Ext Core. By making smart use of event delegation, it is easy to add additional tabe or remove existing ones. View Example

Combination

The Combination example shows how you can combine several of the powerful widgets used in the other examples. It has a menu to navigate several categories of photos and uses the JSONP class to retrieve them from Flickr. It then puts them in a carousel. By clicking on an image inside the carousel you can see a bigger sized version of the photo in the Lightbox. View Example

DomQuery and CompositeElementLite

DomQuery provides high performance selector-based element retrieval. It supports most of the CSS3 selectors specification, along with a few custom selectors and basic XPath. A common use case when working with the DOM is manipulating a collection of elements. Using an instance of CompositeElementLite, Ext Core allows you to interact with a collection the same way you would with a single element. Here is an example of adding a class to a collection of elements.

// selects a collection of elements and adds the class 'myCls' to each one.				
Ext.select('div:has(> span.someClass)').addClass('myCls');

Event handling made easy

Ext Core's event handling abstraction gives you cross-browser normalized event handling and support for custom events. On top of that, it provides configuration options for delaying, buffering, delegating, and targeting events. In the example below, we update an element to indicate a click event occurred.

Ext.fly('elId').on('click', function(e, t){
    // e is normalized cross browser event object
    // t is the target element
 
    // Update contents of the element with id "log" to notify the user of the event firing
    Ext.fly('log').update('You clicked on the element with id: ' + t.id);    
});

Ajax Requests

Ext Core has a clean cross-browser abstraction for making XMLHttpRequests. It gives you an intuitive API to retrieve and send data to the server without requiring the page to refresh. Take a look at a basic Ajax request using Ext Core :

Ext.Ajax.request({
    url: 'serverSide.php',
    success : function(r){
        // using the built-in Ext JSON support
        var data = Ext.decode(r.responseText);
 
        // data is now a regular Javascript object
        console.log(data.items[0].title);
    }
});

If all you need to do though is update the contents of an element you can use the shorthand version:

Ext.fly('elId').load({
    url: 'serverSide.php'
});

Some final words

With 70,000+ registered members on the Community Forums and a company dedicated to making Ext "a foundation you can build on", we hope that this core library will find its way into many of your dynamic web pages and make your lives as web developers easier and more enjoyable. We had a lot of fun putting Ext Core and the examples together, and we are looking forward to seeing the great things you will create using it.