Ext

We are very proud to announce the final release of Ext Core under the MIT license. Your feedback was invaluable. Thank you for all the bugs reported and test cases created. For those of you who are new to Ext Core, we suggest you read the previous blog post about the all the features and examples that we released as part of the beta. You can find a list of changes and fixes we made for the final here.

For this post we will leverage the power of Ext by creating and dissecting a useful star rating example. We hope to share some of the general best practices behind creating unobtrusive, reusable code with Ext Core to liven up your pages.

Making a Splash

//any of these will work ;)  <script type="text/javascript" src="....
http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core.js
http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js
http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core-debug.js
http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core-debug.js

google.load('ext-core', '3');
google.load('ext-core', '3', {uncompressed : true});

Getting Started

<div id="rating1">
    <input type="radio" name="rating1" value="1" title="Very poor">
    <input type="radio" name="rating1" value="2" title="Not that bad">
    <input type="radio" name="rating1" value="3" title="Average">
    <input type="radio" name="rating1" value="4" title="Good">
    <input type="radio" name="rating1" value="5" title="Perfect">
</div>

The API

//Keep it simple
new Ext.ux.Rating('rating1', {
    showTitles: true
});

Ext.util.Observable

Ext.ns('Ext.ux');
Ext.ux.Rating = Ext.extend(Ext.util.Observable, {
    // Configuration default options
    showTitles: true,
 
    // Our class constructor
    constructor : function(element, config) {
        Ext.apply(this, config);      
        Ext.ux.Rating.superclass.constructor.call(this);     
 
        this.addEvents( 'change');  
 
        this.el = Ext.get(element);
        this.init()
    }
});

Reaching the stars

init : function() {
    var me = this; 
 
    // Some arrays we are going to store data in
    this.values = [];
    this.titles = [];
    this.stars = [];
 
    // We create a container to put all our stars into
    this.container = this.el.createChild({
        cls: 'ux-rating-container ux-rating-clearfix'
    });
 
    // We use DomQuery to select the radio buttons
    // Then we can loop over the CompositeElement using each
    this.radioBoxes = this.el.select('input[type=radio]');
    this.radioBoxes.each(this.initStar, this);
 
    // We use DomHelper to create our hidden input
    this.input = this.el.createChild({
        tag: 'input',
        type: 'hidden',
        name: this.name,
        value: this.values[this.defaultSelected]
    });
 
    // Lets remove all the radio buttons from the DOM
    this.radioBoxes.remove();
 
    if(this.disabled) {
        this.disable();
    } else {
        // Enable will set up our event listeners
        this.enable();
    }
}

Creating Stars - using DomHelper and accessing the DOM from Ext Element

 
initStar : function(item, all, i) {
    // We use the name and disabled attributes of the first radio button 
    if(i == 0) {
        this.name = item.dom.name;
        this.disabled = item.dom.disabled;		
    }
 
    // Saving the value and title for this star     
    this.values[i] = item.dom.value;
    this.titles[i] = item.dom.title;
 
    // Now actually create the star!
    var star = this.container.createChild({
        cls: 'ux-rating-star'
    });
 
    // Save the reference to this star so we can easily access it later
    this.stars.push(star.dom);
},

Enable and Select Stars - listening for events, using the target of an event and firing custom events

 
enable : function() {
    // ... some code missing here ...
 
    // We will be using the technique of event delegation by listening
    // for bubbled up events on the container       
    this.container.on({
        click: this.onStarClick, 
        mouseover: this.onStarOver,
        mouseout: this.onStarOut,
        scope: this,
        delegate: 'div.ux-rating-star'
    });        
},
 
onStarClick : function(ev, t) {
    if(!this.disabled) {
        this.select(this.stars.indexOf(t));
    }
},
 
select : function(index) {
    // ... some code missing here ...
    else if(index !== this.selected) {
        // Update some properties           
        this.selected = index;
        this.value = this.values[index];
        this.title = this.titles[index];
 
        // Set the value of our hidden input so the rating can be submitted			
        this.input.dom.value = this.value;
 
        // the fillTo() method will fill the stars up until the selected one
        this.fillTo(index, false);
 
        // Lets also not forget to fire our custom event!         
        this.fireEvent('change', this, this.values[index], this.stars[index]);  
}

Filler Up - dom manipulation (adding classes)

 
fillTo : function(index) {
    var cls = 'ux-rating-star-on';
 
    // We add a css class to each star up until the selected one   
    Ext.each(this.stars.slice(0, index+1), function() {
        Ext.fly(this).addClass(cls);
    });
 
    // And then remove the same class from all the stars after this one
    Ext.each(this.stars.slice(index), function() {
        Ext.fly(this).removeClass(cls);
    });      
}

We won't discuss all the details since most of it is pretty straightforward, but the final product should give you a general idea of how to use the basic functionality available in Ext Core to tie together all the missing pieces.

Wrapping it up

• Classical Inheritance Class System
• Observable Class
• DomQuery
• DOM manipulation and traversal
• Event handling
• Markup generation

Ext Core makes it fun to write code, and helps you create clean, well-structured classes using a set of cross-browser abstractions on the existing browser API's. For those of you who want to use it or are just interested in seeing the completed work, we have included a version of the widget in the Ext Core Final build. You can see the working widget embedded in the post below:

The example page illustrating this widget can be found here.

Final words

We are pleased to announce that the latest release candidate of Ext 3.0 is now publicly available. We are very proud of the stability of this release. We’d like to thank our support team and elite community members who have tested the release candidates. You have assisted in squashing a number of bugs affecting both Ext Core and Ext JS. The time taken to report issues and create test cases is much appreciated.  The list of issues resolved for this deployment can be found for Ext Core and Ext JS separately. Some of the major fixes include:

• Items are now automatically laid out when they are first shown - rather than trying to calculate dimensions when they are hidden. This will solve a number of layout issues that occur across all components.
• The toolbar overflow has been improved to support all toolbar items, including CycleButtons and Buttons with toggle enabled (both grouping and otherwise).
• Issues with some animations in the Fx library have been corrected.

New Examples

Several new examples have been added in this version to help you get up and running with Ext 3.0 quickly.

• A new example detailing the new REST support for stores has been included, which supports full CRUD operations.

// A single store using the Proxy, Reader and Writer together
// through a RESTful interface
var store = new Ext.data.Store({
       id: 'user',
       restful: true, // <-- This Store is RESTful
       proxy: proxy,
       reader: reader,
       writer: writer // <-- plug a DataWriter into the store just as you would a Reader
});

• An excellent demo illustrating the use of multiple providers together is now available. Here we use the Ext.direct polling to make regular requests to get the server’s time. These requests can be interspersed with those of a remoting provider, which allows both an echo and a multiplication to take place.

<script type="text/javascript" src="php/api.php"></script> //Ext.app.REMOTING_API
 
<script type="text/javascript">
Ext.onReady(function(){
    Ext.Direct.addProvider(
            Ext.app.REMOTING_API,
           {
               type:'polling',
               url: 'php/poll.php'     //additional Provider
           }
     );
});
</script>

• An additional example demonstrates the new writer capabilities of Ext. It provides full CRUD support using a grid, without any use of Ext direct. It shows how the writer can be used with legacy style server interaction.

New Features

It wouldn’t be a cool release if we didn’t add some goodies. The documentation has been significantly improved, with a number of classes getting extra information or examples added to their reference page. Peruse the new and updated documentation to find some hidden gems.

REST support

Many web frameworks today are implementing REST services to simplify the CRUD process. With Ext’s new data package enhancements, designing a RESTful Store is a snap. Simply plug a suitable DataWriter extension, like JsonWriter, into any Store along with a standard HttpProxy and set the new Store configuration-property restful: true. Your Store will now automatically generate GET, POST, PUT and DELETE requests to your server.

DataWriter

The Ext JS 3.0 data package introduces compelling enhancements with a new component called DataWriter (along with descendant JsonWriter). These collection of enhancements will simplify your interaction with Ext.data.Store by automatically generating CRUD requests to your server-side framework. Once you plug a suitable DataWriter extension, like JsonWriter, into your Store you’ll never have to manually compose Ajax CRUD requests to your server again — it’s all automated now and highly configurable.

//define and we'll handle the rest
var proxy = new Ext.data.HttpProxy({
    api: {
        read    : 'app.php/users/read',
        create  : 'app.php/users/create',
        update  : 'app.php/users/update',
        destroy : 'app.php/users/destroy'
    }
});

Ext.Error

A base error class has been added, with the intention of extending this to provide more robust error handling throughout the framework in the debug build. As part of this, we will be looking at introducing extra code into the debug build to check for common errors and problems. The developer will be alerted to the issue allowing them to quickly find the point of failure and rectify the problem. These extra checks will be automatically removed in the production build so that performance is not negatively impacted. Stay tuned for more details.

As an example, here are some errors used in data namespace to make it easier for new and seasoned developers:

"DataProxy attempted to execute an API-action but found an undefined url / function.  
Please review your Proxy url/api-configuration."

"Could not locate your "root" property in your server response.  
Please review your JsonReader config to ensure the config-property "root" matches the property 
your server-response.  See the JsonReader docs for additional assistance."

We look forward to community input on where we should add additional checks based on your experiences.

Ext.direct interoperation with Ext.Component subclasses

The main feature that has been added in this release candidate is extra interoperability between Ext.direct and other Ext.Component classes. Both the Ext.tree.TreePanel and Ext.form.FormPanel can now load their data via Ext.direct.

Loading a tree using Ext Direct

In this case our server side method takes a single parameter (the id of the node) and returns an array of JSON nodes. An example of this can be found here.

API Definition:

Ext.app.REMOTING_API = {
    "url": "php/router.php",
    "type": "remoting",
    "actions": {
        "TestAction": [{
            "name": "getTree",
            "len": 1
        }]
    }
};

Sample code

Ext.onReady(function(){
    Ext.Direct.addProvider(Ext.app.REMOTING_API); //setup provider
 
    var tree = new Ext.tree.TreePanel({
        width: 400,
        height: 400,
        autoScroll: true,
        renderTo: document.body,
        root: {
            id: 'root',
            text: 'Root'
        },
        loader: new Ext.tree.TreeLoader({
            directFn: TestAction.getTree //specify directFn on tree
        }),
        fbar: [{
            text: 'Reload root',
            handler: function(){
                tree.getRootNode().reload();
            }
        }]
    });
});

Forms and Ext Direct

By popular demand, we’ve added Ext.direct for loading and submitting data via forms.

var form = new Ext.form.FormPanel({
               api: {
                      load: App.ss.ClientForm.load,   
                      submit: App.ss.ClientForm.submit
                      },
                paramOrder: ['uid'],
                defaultType: 'textfield',
                items: [/* Ext.form.Fields go here */]
});

We encourage you to download and use the latest release candidate. We hope you enjoy using Ext JS 3.0 - we had a blast creating it.

Lastly, following a tradition started with Ext 1.0, we are offering a pre-release sale with hefty discounts to upgrade your 2.x license. If you’ve thought about purchasing an Ext License, for a limited time, you can purchase online for less than an Ext 2.x License. There’s no better time to support the Ext team. Enjoy.

With close to 100 billion text messages sent every month in the U.S., text messaging has clearly become a communication medium many of us have come to rely on. Zipwhip, a text messaging utility for the web with a polished Ext-based user interface, aims to take texting to a new level. The team at Zipwhip were eager to share their enthusiasm and approach to building with Ext.

Tell us a little bit about Zipwhip and your goals for the application.

Zipwhip is a utility for text messaging from the web. Text messaging is the fastest growing communication medium, but is still locked inside the mobile phone. We aim to help bring text messaging everywhere.

To pull off our ambitious goals, we’re using just about every web 2.0 trick in the book—comet to send carrier delivery receipts back to the browser in real-time, Ajax for server communications, download-on-demand Javascript packages (with preloading), Flash for audio notifications, and many others.

Why did you choose Ext JS?

One of the design decisions we made early on was that we wanted a rich desktop-like experience inside the web browser. We investigated the other major players in the field, but ultimately decided that ExtJS was the best. One of the things that made ExtJS especially appealing was the “Window” object that can contain “Panel” objects. Our core requirement was a windowed interface and having Ext.Window cross-browser out of the box was a major win.

Ext allowed us to focus on putting together the Ext building blocks that were engineered to be cross browser rather than reinvent the wheel. We had a limited budget and limited time and Ext provided 90% of the functionality we had in mind. We used a combination of Ext layouts and CSS to achieve many of the window structures used in the site. Theming the Ext widgets and integrating them with custom css layouts was a breeze.

Lastly, the XType architecture allowed us to create Javascript packages and download them on demand. This allows us to create an application that was not bounded by download size. A browser would have a difficult time rendering our site if not for lazy loading. What used to be a difficult custom built proposition (lazy loading) became an afterthought with Ext JS.

The Zipwhip application is extremely feature-rich. How did you manage the UI code complexity?

One of the small footnotes in Ext JS is the “plugin.” We’ve made that concept into a corner-stone of our application. Each carrier requires different functionality, features, and different business rules. With progressive enhancement we can swap in plugins that provide different implementations of various features, and ensure we only download the plugins that are needed.

Another thing that simplified my life greatly was David Davis’ (xantus) implementation of PubSub. This allowed us to decouple areas of the code, which made for a simple core framework. We implemented PubSub very late in the development process and are still working to fully take advantage of this wonderful design pattern.

Finally, keeping the code divided into standard namespaces was invaluable. We segmented common “Operating System” level widgets into Zw.controls and put all of our Ext.data.Records into Zw.data. Namespacing the code kept things manageable.

Oh yeah, and one class per file. Nobody likes a 10,000 line file.

What other techniques did you use to achieve such a gorgeous UI?

Most of what you see in the Zipwhip application is standard Ext JS with some fancy css overrides. We were surprised how easy it was to add some custom graphics to the existing Ext JS markup.

Ext.layout

One of the most awesome things about Ext JS are the Layouts! Because of the amazing flexibility we could mix css and Ext layouts to give us the desired effect with minimal code. The FormLayout (with anchoring) can manage the position of the fields, whereas CSS could manage the complexity of the Phone Preview Area.

Also Ext JS layouts improve performance and page weight. Specifically the layouts each decide when to render the content they are responsible for. This means that the Threading tab is only rendered the first time the user views the tab.

Ext.menu.Menu and Ext.DataView

Ext.menu.Menu (and the Adapter) became one of the handiest components in the ExtJS library. All of our Right-click menus were implemented with the Ext.menu.Menu. We host panels inside the menu and use a combination of CSS trickery plus Ext layouts to get the resulting effect.

Possibly the part we used the most out of Ext was the Ext.DataView. In the Contacts window (and Corkboard), we utilize an Ext.DataView and customized it to allow rendering of Ext.Components. The DataView abstracts away the difficulty of managing a list of Widgets linked to a Ext.data.Store.

Ext.SplitButton

The ContactCard (Zw.controls.ContactCard) extends the Ext.SplitButton. I know our ContactCard doesn’t look anything like a split button, but it truly was the best approach. Thanks to the way that Ext designed their components, we were able to easily modify the Template that is used to generate the button. Also thanks to the xtype, delay rendering, and plugin model the API was extremely simple.

items: {
     xtype: 'Zw.controls.ContactCard',
     closable: true,
     plugins:  [
           "Zw.controls.ContactCardEditNamePlugin",  //enable it to be editable
           new Zw.controls.ContactCardDropdownPlugin(), {  // allow right clicks on the card
           xtype: 'Zw.controls.ContactCardPopupPlugin'  //pop it up if its too small 
     }],
     listeners: {
          scope: this,
          'close': this.onContactCardClose,
          'rename': this.onContactCardRename
     }
}

What features could we add to Ext to make building a rich application like Zipwhip easier in the future?

We had the situation where we needed to create an Ext.DataView that displays Widgets. Currently you can only use an Ext.DataView with an Ext.Template. A solution that allows for controls to be created and inserted according to an Ext.data.Store would be valuable.

Additionally, “best practices” for preventing and dealing with memory leaks would make building an RIA easier. Memory leaks with templates, dataviews, and elements can cripple the development process if not planned for.

Do you have any advice for developers using Ext for the first time?

The best way to learn is to do. The rich examples provided give you a great starting point that can quite easily end up in your final product. One of the key value propositions of using Ext JS is the rich documentation - use it often.

Also put together various folder structures to gain experience for what feels right. A folder structure can make a huge difference on the quality of your product. Pick something that you can grow into and is not overly structured. I divide my OS, Controls, and Features and have found it rewarding, while not too restrictive.

Final thoughts?

Ext JS is more than an abstraction layer on top of Javascript (like other libraries). Ext JS is a set of design patterns and object models that naturally fit into application development. We continually reach inside the Ext JS treasure box when developing new functionality and find that most of the hard engineering has already been done. All that is left is to socket together a few pieces and tweak some CSS.

There is a growing amount of choice in the world of Javascript frameworks. We evaluated them all and decided Ext JS was the best. This was a hard choice for us initially, but now that we’ve launched our application to the public and it’s getting used every day, we’re really glad we selected Ext JS. The application has turned out to be everything we imagined and we like working with the Ext JS framework more and more.

As developers, we spend countless hours researching best practices to build engaging software. Often we find ourselves implementing the same repetitive functionality to wire our frontend to our backend. We’ve become accustomed to partaking in complicated design patterns to help separate logic from presentation - forcing the browser to play the role of a dumb terminal. While the RIA movement has unshackled the web browser from that awful fate, accessing our server side logic remains mostly unchanged. Ext.Direct aims to solve this issue for developers creating Ext JS applications by providing a single communication point with the server-side.

Common Concerns

At Ext, we’ve integrated Ext JS with many languages and platforms from Mainframe systems to Java to MUMPS to Perl. However, we noticed that there are several issues that are common across all server-side languages when creating Ext apps.

• How to organize code and where to place appropriate business logic.
• Parsing and formatting data on the server side.
• Keeping a maintainable structure.
• Parsing Ajax responses and retrieving error conditions.
• Doing data validation in multiple areas.

Wouldn’t it be nice if we had a cross-language standard that solved the problem the same way?

Introducing Ext.Direct

Ext.Direct is a new package in Ext JS 3.0 that helps alleviate many of these issues by streamlining communication between your client and server. When using Ext.Direct, you can expect to write 30% less code by eliminating common boiler plate code.

The Ext.direct namespace introduces several new classes for a close integration with the server-side. New classes have also been added to the Ext.data namespace for working with Ext.data.Stores which are backed by data from an Ext.Direct method.

Ext.Direct uses a provider architecture, where one or more providers are used to transport data to and from the server. There are several providers that exist in the core at the moment, for example a JsonProvider for simple JSON operations and a PollingProvider for repeated requests. One of the most powerful providers is the RemotingProvider.

RemotingProvider - Client-side Stubs

The RemotingProvider empowers the developer by mirroring server side methods on the client-side and allowing them to call the server-side methods as if they were sitting on the client-side. The server-side simply describes what classes and methods are available on the client-side. This allows for code to be organized in a fashion that is maintainable, while providing a clear path between client and server, something that is not always apparent when using URLs.

Intrinsic Call Batching

The provider immediately batches together calls which are received within a configurable time frame and sends them off in a single request. This assists in optimizing the application by reducing the amount of round trips that have to be made to the server machine. If a series of calls are received within the specified timeout period, the calls will be concatenated together and sent off to the server as a single request.

Server-side Stacks

In order for Ext JS’s Direct protocol to work you must have a compatible Ext.Direct Server-side stack residing on your server. The server-side stacks use a ‘router’ to direct requests from the client to the appropriate server-side method. Because the API is completely platform-agnostic, you could completely swap out a Java based server solution and replace it with one that uses C# without changing your JavaScript at all. Ext is providing a complete remoting specification along with several reference implementations of different server-side stacks in PHP, .Net, Ruby and ColdFusion. Each of these are licensed under an MIT license, so that the community can expand upon what has already been done and integrate them into their favorite MVC framework such as Zend Framework or Struts.

An Example - The Ext Support App

Support subscribers have a new tool at their disposal to receive a response from the Ext Team. We have developed the new Ext-based application that will be used to streamline the process of managing user support queries . The Ext support application is built on top of Ext 3.0 and utilizes Ext.Direct extensively.

In order to see the benefit of Ext.Direct more clearly, let’s take a look at how we utilized it. Ext.Direct enables server-side developers to easily expose methods from the server-side to the client-side. In this example, we are exposing two methods of the TicketAction class - getTickets and getOpenTickets.

We can now call these methods as if they were local client-side methods without worrying about how the request is sent to the server-side and how the response is processed. We can also use these methods to populate an Ext.data.Store with the new DirectStore object.

var store = new Ext.data.DirectStore({
    storeId:'open-tickets',
    directFn: TicketAction.getOpenTickets,  //it's really that easy
    paramsAsHash: true,
    idProperty: 'tid',
    fields: [{
        name: 'tid',
        type: 'int'
    },
        'title',
        'display_name',
    {
        name: 'last_post_time',
        type: 'date',
        dateFormat: 'timestamp'
    }],
    sortInfo: {
        field: 'last_post_time',
        direction: 'DESC'
    }
});

The TicketAction.getOpenTickets method can be called at any time, it is not required that it used solely in conjunction with a store.

I hope that the simple example above illustrates how Ext.Direct can help you better organize your client-server communication in your applications.

Ext.Direct Forum

We have added a new Ext.Direct forum under the the Ext JS 3.0 category. Several community members have already submitted server-side stacks for their favorite environments. We already have a list of several server-side stacks in a stickied forum thread. We encourage the community to contribute back server-side stacks for their favorite environments by implementing the Ext.Direct Remoting specification. There are five sever-side stacks currently available in our Ext.Direct pack with more implementations soon to come.

The Ext Team is proud to announce the release of Ext JS 3.0 RC1.1 available for immediate download. This new version of the Ext framework is the culmination of many long hours of dedication by the Ext Team. We appreciate our community of testers and supporters whom have made the stability of this release possible. Ext 3.0 is another leap forward providing increased performance, consistency, flexibility and UI enhancements to make you more productive - all without a significant size increase.

There are many enhancements in Ext JS 3.0, too many to include in a single post. Some of the major features in Ext JS 3.0 are the splitting of Ext Core and Ext JS, Charting for visualizations, additional User Interface improvements, CRUD-like support with Ext.data.DataWriter, Remoting using Ext.Direct, CSS enhancements to make theming easier, and Accessibility improvements - Section 508 and ARIA support. We also fixed several browser issues for the latest Chrome and Safari releases and added IE8 support.

Ext Core

The first major change to Ext JS 3.0 is that it has been built to sit on top of the new Ext Core library. Ext Core 3.0 is a lightweight library intended to give you all of the functionality to enhance a webpage. Drawing upon our experience creating rich user interfaces, we isolated the most powerful features used to enhance new or existing web pages and placed them in the Ext Core library. Developers familiar with Ext JS can leverage their existing skillset to provide an enhanced user experience to their web pages.

Winston Churchill once said, “We make a living by what we get, but we make a life by what we give.” As avid members of the open source community, Ext continues to give back. This time, we are releasing Ext Core under the permissive MIT license to be used by all for free.

New UI Features

Ext JS 3.0 introduces several new UI Components and enhancements to many existing components.

New UI Components

• RowEditor
• ListView
• Charting
• ButtonGroup
• GroupTabs

RowEditor

Editing a row in a grid just got a lot easier. The RowEditor is another great new UI component allowing you to rapidly edit full rows in a grid. You can even enable a validation mode which uses the new AnchorTips to notify the user of all validation errors at once.

ListView

ListView is a high performance, light-weight version of a grid like display. It provides you with selection, column resizing, sorting and other DataView features. The columns have percentage based widths and uses templates to render the data in any required format. If you need to show your data in a grid like display without some of the more advanced features of the Grid, then ListView is the perfect solution.

Charting

The Ext.chart package will allow you to visualize your data with flash based charting. Each chart binds directly to an Ext.data.Store. The new FlashComponent class, which extends BoxComponent, allows you to easily create custom Flash Components. By binding the charts directly to an Ext.data.Store, you don’t have to worry about updating your chart, they will update automatically.

ButtonGroup

ButtonGroup is a new component that will allow you to group together Buttons of different sizes to create complex toolbars enabling your users to find the most common actions first. We created an example to show the flexibility and power of this new component.

Sample code:

var btnGroup = new Ext.ButtonGroup({
       title: 'Clipboard',
       columns: 2,
       defaults: {
            scale: 'small'
       },
       items: [{
           xtype:'splitbutton',
           text: 'Add',
           iconCls: 'add16',
           menu: [{text: 'Add'}]
        },{
           xtype:'splitbutton',
           text: 'Cut',
           iconCls: 'add16',
           menu: [{text: 'Cut'}]
        },{
           text: 'Copy',
           iconCls: 'add16'
        },{
           text: 'Paste',
           iconCls: 'add16',
           menu: [{text: 'Paste'}]
        }]
     });

Grouped Tabs

Horizontal navigation can always be challenging. We’ve introduced GroupTabs to assist you in creating portal layouts similar to iGoogle, or providing a interface to access similar tasks quickly.

Sample Code:

var viewport = new Ext.Viewport({
        layout:'fit',
        items:[{
            xtype: 'grouptabpanel',
            tabWidth: 130,
            activeGroup: 0,
            items: [{
                mainItem: 1,
                items: [{
                    title: 'Tickets',
                    iconCls: 'x-icon-subscriptions',
                    tabTip: 'Tickets tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }, {
                    title: 'Subscriptions',
                    iconCls: 'x-icon-subscriptions',
                    tabTip: 'Subscriptions tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }, {
                    title: 'Users',
                    iconCls: 'x-icon-users',
                    tabTip: 'Users tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }]
            }, {
                expanded: true,
                items: [{
                    title: 'Configuration',
                    iconCls: 'x-icon-configuration',
                    tabTip: 'Configuration tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }, {
                    title: 'Email Templates',
                    iconCls: 'x-icon-templates',
                    tabTip: 'Templates tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }]
            }]
        }]
    });

Enhanced Components

• Buttons
• Toolbar Overflow
• Menu Overflow
• AnchorTips
• Buffered GridView
• Debug Console

Buttons

Buttons in Ext JS 3.0 have been refactored to be a valid BoxComponent which enables them to partake in layout management. Buttons can now scale to any height or width and have advanced text positioning. Rather than being limited to only positioning buttons in a buttons configuration, they can now be placed anywhere you please.

Toolbar Overflow

Toolbars can now create a menu for items that don’t fit the visible toolbar area. The items in the menu still react with the same handlers as the toolbar items. This new behavior is turned on by default and can be disabled with the configuration option enableOverflow.

Menu Overflow

Menus now also handle overflowing in a more gracious manner. Whenever a menu gets so long that the items won’t fit the viewable area, it provides the user with an easy UI to scroll the menu. This feature is turned on by default and can be disabled by the configuration option enableScrolling.

ToolTips

Tooltips now support an anchor configuration which will allow you to bring attention to a particular element or component with a small callout arrow.

Sample Code

new Ext.ToolTip({
        target: 'bottomCallout',
        anchor: 'top',
        anchorOffset: 85,
        html: 'This tip\'s anchor is centered'
    });

Buffered GridView

Buffered GridView enhances performance by waiting to render rows until they are visible. As your user scrolls away from content which is no longer visible, the BufferedGridView will clean up the old DOM markup to minimize the DOM structure. As a result of the smaller markup, the performance of resizing, forceFit, autoExpandColumn and other layout and DOM manipulation features in a large grid will improve substantially. Buffer GridView is limited to working on fixed height rows.

Debug Console

The Debug Console has been revamped and we have added three new tabs, named Component Inspector, Object Inspector and Data Stores which are specific to Ext Development. Component Inspector will show you all components which have currently been registered with the ComponentMgr and the parent child relationships among components. By mousing over a particular component you will notice that it will be masked on the page. The Object Inspector will allow you to inspect objects and peek inside their contents. The Data Stores tab will display all stores which have been registered with the StoreMgr and how many records are currently loaded into each store.

Summary

This blog entry covers all of the user interface components which are new to Ext JS 3.0 or which have been significantly enhanced. Stay tuned for another entry that details all of the non-ui related improvements such as Ext.data package enhancements, Accessibility improvements, Ext.Direct and the refining of memory management within Ext.

Upgrading

User upgrading to Ext JS 3.0, will be happy to hear there are little to no breaking changes. We took great care in only creating breaking changes where absolutely necessary. You may encounter issues upgrading if you were previously manipulating private properties of an Ext.menu.Menu or an Ext.Toolbar or if you had custom styling of an Ext.Button.

Following a tradition started with Ext 1.0, we are offering a pre-release sale with hefty discounts to upgrade your 2.x license. If you’ve thought about purchasing an Ext License, for a limited time, you can purchase online for less than an Ext 2.x License. There’s no better time to support the Ext team.

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.

Learning an exciting software framework can be like climbing a mountain — it requires proper equipment, technical skill and determination. To help new and seasoned community members reach the Ext apex, three new books have come to our attention to help guide your path.

Ext JS in Action

Author: Jesus D. Garcia, Jr.
Discount code: extjs40 (40% off until April 1)
Description:

• Part 1: Introduction to Ext JS
  • A framework apart
  • An Ext JS primer
  • A place for components
  • Organizing components
• Part 2: Ext components
  • Building a dynamic form
  • The venerable Ext DataGrid
  • Taking root with Ext Trees
  • Toolbars and menus
  • Advanced element management
  • The Ext toolbox
  • Drag and drop
• Part 3: Building a configurable composite component
  • Developing object-oriented code with Ext
  • Building a composite widget
  • Applying advance UI techniques

 

The author, Jesus Garcia is a long-time member of the Ext JS forums with a well-documented history of helping others in his 7600+ posts. His book, Ext JS In Action, will make an excellent companion to Learning Ext JS below, since it takes a more-technical bottom-up approach to teaching Ext JS. Mr. Garcia demonstrates a thorough understanding of low-level DOM manipulation and event-handling, including the differences between browsers.

The book contains many excellent diagrams primed for printing and posting beside your monitor, like the following illustration of the Ext class hierarchy depicting common descendants of Ext.Component:

Though still in development, this excellent book for both Ext JS new-comers and advanced developers alike is currently available through the Manning Early Access Program. Says Steven Hong of Manning Publications:

“I’ve taken the liberty of setting up a discount code for your readers to use. Until April 1, your readers can use the code extjs40 at www.manning/garcia to receive 40% off the retail value of the book”

We at Ext JS thank Manning Publications for their generous offer to our community.

Learning Ext JS

Authors: Shea Frederick, Colin Ramsay, Steve “Cutter” Blades
Description:

• Chapter 1 introduces you to the process of installing the required Ext JS library files, and setting up a basic page that displays an alert-style message. This provides us with a way to test whether your setup was done correctly, and whether you’re ready to play with some code. We also cover how to set up other base libraries such as jQuery, YUI, and Prototype, to work in conjunction with Ext JS.
• Chapter 2 covers how to interact with the web page and the user. With example code that uses simple components, we quickly start to see the level of user interactivity that Ext JS provides right out of the box. We assemble a series of dialogs that appear and modify the existing pages depending upon the users’ inputs.
• Chapter 3 launches us into using the first major widget—forms. We start by creating a simple form with three fields, explore the different form field types, and then add some simple validation to our form. From there we move on to creating custom validation and database-driven combo-box’es and handling form submissions.
• Chapter 4 provides an overview of how to use toolbars and buttons within your
  application. These components are typically undervalued, yet they provide crucial user interface functions. We jump straight into creating toolbars with buttons, split buttons, and menus, along with adding mechanical elements such as spacers and dividers. Next, we cover customizing the toolbar with stylized icon buttons and form fields.
• Chapter 5 covers grids—the most widely-utilized component in the Ext JS library. In
  this chapter, we learn how to set up a grid panel using both local and remote data, and in both in XML and JSON formats. We also discuss how to prepare different data types and how to create renderers that will style and format the data to your preference. Using the selection model and paging are among the many interesting points covered in this chapter.
• Chapter 6 dives into editor grids. Here, we learn how to set up an editor grid using
  different form field types, and how to save changes made in the grid back to the server or database. We also discuss tactics for adding and removing rows of data to and from our data store, and the server or the database.
• Chapter 7 explores the concept of using the layout component to bring all the portions of your application together into a cohesive web application. We start by using a viewport with a border layout to contain the many parts of our application. From there we are able to add other layout features such as tab panels, accordions, and toolbars. We finish up by learning how to nest layouts and make dynamic changes to the layout components.
• Chapter 8 discusses the presentation of hierarchical information using the Ext JS Tree support. Using real-world examples of hierarchical data, you will discover how to display and manipulate a Tree view. You will use AJAX techniques to persist the modifications to a server and learn how to tweak the Tree to support advanced scenarios.
• Chapter 9 demonstrates how Ext JS can provide attractive user prompts that can either present information or accept input. We then discuss the extension of these dialogs in the form of Ext.Window, a fully-fledged means of creating customizable pop-up windows.
• In Chapter 10, we take a tour of the visual effects available in the Ext JS effects package. You will learn how to apply animations to create smooth transitions and notifications to enhance the user experience.

Well-written and well-produced, Learning Ext JS takes a top-down approach to teaching Ext JS, which might be daunting for those having little experience with the framework. However, this approach will certainly immerse the reader quickly into a number of common techniques used througout the framework, like XType, configuration objects and common component configuration parameters.

After starting off with an excellent tutorial on how to download and include the library’s JavaScript & CSS assets, the authors quickly jump full-force into Ext forms in the third chapter and beyond, guiding the reader through all of Ext’s high-level widgets using an evolving “movie database” application with server-side code examples in both php and ColdFusion.

var store = new Ext.data.GroupingStore({
  url: 'movies.json',
  sortInfo: {
    field: 'genre',
    direction: "ASC"
  },
  groupField: 'genre',
  reader: new Ext.data.JsonReader({
    root:'rows',
    id:'id'
  },fields);
});
var grid = new Ext.grid.GridPanel({
  renderTo: document.body,
  frame:true,
  title: 'Movie Database',
  height:400,
  width:520,
  store: store,
  autoExpandColumn: 'title',
  columns: // column model goes here //,
  view: new Ext.grid.GroupingView()
});

In the final chapters, the authors provide some excellent material in more advanced topics, like Ext’s data package, extending Ext core classes with Ext.extend, overriding initComponent & onRender in your extensions and organizing your extensions into separate files. If you’ve already got experience with Ext JS, this book will do wonders in focusing your skills.

Ext JS Projects with Gears

Author: Frank Zammetti
Description (by the author)

• Nine chapters in total. The first is your typical “Intro to Ext JS”. I start with a few pages on RIA development, the evolution of web development in general, etc. I talk about how there’s now a lot of choices in toolkits and of course wind up saying that Ext JS is the best of the bunch IMO I then quickly give a basic first application with Ext JS (not much more than “hello world”). Then it’s on to some details… things like Ext JS’s overall structure, the stuff added to intrinsic classes, then the stuff directly under the Ext namespace. I then go into Ext.util in some detail.
• Chapter 2 is the more “advanced” introduction… I cover the inheritance model behind widgets, the basics of widget usage, then details about the concept of layout and layout managers. I then cover most of the core widgets in some detail. I also talk about the data subsystem, templating capabilities, drag-and-drop and state management. I also talk a bit about plugins and some of the great user extensions out there. This chapter also introduces Gears, which although the lesser player in the game is a big part of the chapters to follow.
• Chapters 3-9 are the project chapters. Each of them presents a sovereign, unique, full application using Ext and Gears. This is the meat of the book (the “practical projects”!). The idea here is learn-by-example (and learn-by-doing because the end of each chapter presents suggested exercises to the reader).

In the Ext forum-post where Mr. Zammetti introduced Ext JS With Gears, he stresses:

“Keep in mind that this book is in no way trying to be an exhaustive, detailed look at Ext… I purposely had to leave some things out, but I tried my best to cover everything that I thought was most relevant to a modern web developer.”

Frank Zammetti is a prolific writer at Apress, authoring five books there so far.

extjs.com

Those new to Ext JS should be aware of a number of important learning resources within extjs.com itself, where you’ll find material on gathering the right equipment along with lessons and tutorials to hone your skills, from javascript fundamentals to advanced techniques.

Ext API Docs

Like a GPS device for the framework, the Ext API docs have always been of superior quality and are one of the primary reasons for the framework’s success. You can find the docs online at www.extjs.com/docs, in your locally downloaded copy of the library (eg: ext-2.2/docs) or as a downloadable Adobe Air application.

The Ext Forum

The Ext forum is a large, diverse community with over 60000 registered users (as much as a small city!), including a couple of heavy-weights with over 10000 posts. These guys have seen it all and know what they’re talking about (some of you might recognize the fourth character in this list, Mr. jgarcia, the author of Ext JS In Action above.)

Whichever server-side technologies you’re bringing with you into Ext — .NET, Merb/Ruby on Rails, Enterprise Java or PHP — you’ll find someone in the Ext Forum who’s already been down the road you’re on, so register now—it’s free.

Community Learning Center

Available through the Support tab on our website, the Ext JS Community Learning Center contains an evolving collection of training resources that will accelerate your transition into Ext JS, including the Ext JS Manual, interactive demos, tutorials, screencasts and much more.

Ext Enterprise Training

We love to travel and we love to teach. From beginning JavaScript and CSS to custom component creation and CSS theming, your team will learn how to bring it all together to create innovative web user interfaces with hands-on training by a member of the Ext Core Development Team.

Ext Conference 2009

This April, join Jack and the Core Development Team as we host the 1st Annual Ext Conference and Ext 3.0 release party. Connect with other members of the Ext Community while learning about Ext 3.0′ s innovative features.

Tools, Black-belts & Meetups

Jozef Sakalos, aka Saki

One of the top Ext experts in the world as well as a member of the Ext Support Team, Saki maintains an Ext Examples Page as well as an active blog.

The User-extension Repository

The User-extension repository is an attempt to build a centralized database of API documentation for 3rd-party ux (user-extension) components using the familiar Ext documentation style.

Meetups

Both Jay Garcia (author of Ext JS in Action) and Shea Frederick (an author of Learning Ext JS) have been partaking in the Baltimore/DC JavaScript UserGroup Peter Kellner has also organized the San Francisco Ext JS UserGroup. I gave a presentation last week on the innovative new features Ext 3.0 to the S.F. Ext JS Group via a webex.

Conclusion

As the Ext framework matures, the community surrounding it is also maturing. We are seeing several excellent resources for learning Ext sprout up and an extremely active blogosphere discussing how people are using Ext in their day to day projects. If you regularly blog about Ext, please let us know we’d like to follow you on your journey in discovering Ext. Start a meetup in your area and connect with other members of the community who are building applications on the Ext platform.

Pixel Bender is an exciting new technology by Adobe which brings video and image processing capabilities to the flash runtime. It allows you to create and apply filters to ‘bend’ pixels and create compelling animations which have never been possible in an HTML environment. Because Adobe AIR uses flash to load any HTML content, we can leverage these powerful filters on a standard Ext Application in the AIR environment. Ext is releasing a Pixel Bender Explorer demo which allows you to explore many of the new filters which have been created by the Adobe Community and demonstrates how to integrate them into an Ext Application.

Pixel Bender Explorer

Download and install the Pixel Bender Explorer application. Apply different filters or effects by clicking on the Filter Grid. By selecting a filter on the left hand side and adjusting the sliders you can apply live effects to the current target video, browser or image. For some of the filters we have already built some animations such as bend/flatten, waveIn/waveOut, dissolve/combine and tileIn. You can test these animations by choosing the appropriate filter and clicking the animation button above the sliders. These animations can be called within code with a single method call on any Ext.air.NativeWindow or Ext.air.VideoPanel.

Here is an example of bending an Ext.air.NativeWindow:

var win = new Ext.air.NativeWindow({
        file: '../html/browser.html',
        transparent: true,
        chrome: 'none',
        width: 640,
        height: 480
});
win.bend();

Construction of Pixel Bender Kernels

Constructing your own Pixel Bender Effects and Animations is a multi-step process. First, you need to construct a kernel or filter for Pixel Bender. These kernels describe how each pixel should change for a single frame based on a mathematical algorithm which you implement. Kernels are written in the Pixel Bender Kernel Language and compiled with the Pixel Bender Toolkit. The language is very similar to GLSL (OpenGL Shading Language). The benefits of writing effects in this language is that are generalized to all common video hardware platforms and can be used in other Adobe Applications such as After Effects and Photoshop. There is a great article, Pixel Bender basics for Flex and AIR, created by Charles Ward of Adobe that explains the Pixel Bender language in more detail.

Using Pixel Bender Kernels

After compiling the source code of a Pixel Bender Kernel the extension will change from .pbk (source form) to .pbj (binary/compiled form). The compiled version of the kernel is the only file that we need in order to use the new kernel. After compiling a new kernel, you can place the .pbj file in the kernels/ directory of your installed Pixel Bender Explorer application and you will be able to test it after restarting the application.

Pixel Bender Exchange

There is a lively community around the creation of Pixel Bender Kernels on the Pixel Bender Exchange, most of which are under an open source license. Download a few kernels and take them for a test run in the Pixel Bender Explorer. The Explorer provides you all of the tools necessary to create your own custom animations for a NativeWindow or VideoPanel. For example, if you wanted to use the smudge filter created by Frank Reitberger as an animation you would determine the paramName that you want to change and where it should start and end along with a few other configurations.

Using the same NativeWindow as shown in the example above:

win.animFn({
    paramName: 'amount',
    reset: true,			
    startValue: 5,
    endValue: 0,
    duration: 1,
    mode: 'easeOutStrong',
    url: 'app:/kernels/smudger.pbj'
});

Code Explanation

This will tween the value of the parameter amount from 5 to 0 over a duration of 1 second. This will have an effect which I would name smudgeIn because it starts smudged and will eventually look normal. We are using one of Robert Penner’s Easing equations easeOutStrong. Support has been added for 15 different easing modes, which explain how fast/slow we adjust the value over time. The filter also needs to be reset at the end of animation because there is no parameter which will not affect the image. (When we set amount to 0 it will still have a slight change on the target.) Anyone who is developing Pixel Bender Kernels, I encourage you to have a parameter which reflects the unapplied state vs the fully applied state. A good example of this are the Adobe filters which use the parameter of transition (0 does nothing, 1 is fully applied).

Wrapping up

Pixel Bender can spruce up an Ext.air application by adding custom animations to wow your users. However, you should be cautious about the over-use of these filters throughout your application. For a good example of how effective these filters and animations can be to provide proper user feedback you should check Adobe’s signature sample BlackBookSafe. Each time an animation occurs it is clear why it happened, not a surprise to the user and adds character to the application. When using these animations you should strive for the same goal, not to surprise your user, but to impress them.

Ext is pleased to announce the 1st Annual Ext Conference and Ext 3.0 release party on April 14 to 16, 2009 in Orlando, Florida! Join Jack and the Core Development Team for an intense 3-day conference exploring all of the new features packed into Ext 3.0. Discover best practices for building applications and connect with other members of the Ext Community. The conference provides sessions which will be of interest to all parties involved in application development including managers, designers, developers and application architects.

Conference Agenda

Sessions cover all three libraries included under the Ext umbrella: Ext JS 3.0, Ext GWT 2.0 & Ext Core 3.0.

• Ext JS is the library that allows you to write your applications in JavaScript with complete platform independence.
• Ext GWT is the library that allows you to leverage pre-existing Java skills for client-side development.
• Ext Core is a lightweight, feature rich library weighing in at 49.9Kb and is perfect for your smaller projects and websites.

Connect with the Ext Team and guest speakers as they share their expertise in application development with 24 exciting sessions.

Conference Location

The Ext Conference is being held at the Ritz-Carlton Grande Lakes conveniently located only 10 miles away from Orlando International Airport and Disney World. Bring the family and stay for the weekend. The Ritz-Carlton provides complimentary transportation to local theme parks like Universal Studios and SeaWorld. By working directly with the Ritz-Carlton, we were able to negotiate a special rate for all Ext conference attendees. You can stay at the Ritz-Calrton’s luxurious 5-star hotel for $149 a night.

Connecting the Community

Ext recognizes that our community is critical to the success of our projects. Without the rich ecosystem of forums, user extensions, themes and samples that the community has provided we would not be in the same place we are today. The conference provides a unique opportunity for the community to come together and share innovative ideas about Ext development. Check out the live attendance list which lets you know who has already registered for the conference.

Register Today

Ext will be offering a $250 early registration discount for registering by February 10th 12:00 AM EST. Community leaders will also be recognized during the registration process. Register today and connect with the Ext Team and Community in April!

This past week members of the Ext team were sitting in my living room watching TV when we saw CNN report Toys for Tots is in desperate need of toys this year. Toys for Tots is a non-profit organization that works with the United States Marine Corps to gather and distribute toys to needy and underprivileged children during the holidays. Toys for Tots needs double the amount of toys this year. Because of the challenging economic times, many families are unable to afford gifts for their children and not as many people are able to donate. That’s when we began thinking “How can we help?”

Origin of Toys for Tots

“Toys for Tots began in 1947 when Major Bill Hendricks, USMCR and a group of Marine Reservists in Los Angeles collected and distributed 5,000 toys to needy children. The idea came from Bill’s wife, Diane. In the fall of 1947, Diane handcrafted a Raggedy Ann doll and asked Bill to deliver the doll to an organization, which would give it to a needy child at Christmas. When Bill determined that no agency existed, Diane told Bill that he should start one. He did. The 1947 pilot project was so successful that the Marine Corps adopted Toys for Tots in 1948 and expanded it into a nationwide campaign.” from http://www.toysfortots.org

How You Can Help

Toys for Tots accepts several different types of contributions, including donations, and toys at drop offs through out the nation. Locate a drop off location near you.

How Ext will Contribute

Ext will donate a portion of sales to the charity, Toys for Tots for the entire month of December. If you already made a purchase during December, you have already contributed. Ext will donate a portion of each sale from our store for both Ext JS & Ext GWT. We will donate the following amounts for the purchase of a license.

• Single Developer: $20
• Team: $50
• Workgroup: $150
• Enterprise: $500

A Call to Action

We understand that there are many causes that members of our community feel just as strongly about, and we encourage you to join us or to support the cause of your choosing in any way that you can. Happy Holidays from Ext!

In collaboration with Adobe, Ext is releasing several new enhancements to the Ext.air package today. These include improvements to existing classes responsible for Sounds, Windowing and Database as well as new classes responsible for Notification, Clipboard and File System Interaction. We have also added new samples demonstrating how to use these new features. One of these examples is ExtPlayer, a simple MP3 player, that leverages the new Ext.air.MusicPlayer and Ext.air.Notify classes. You can install ExtPlayer or download the source.

Ext.air.MusicPlayer

Ext 2.0.2 introduced an Ext.air.Sound class, which is useful for playing small sounds such as beep and chimes. In contrast, Ext.air.MusicPlayer is meant for long running sounds such as music and podcasts which you would never want multiple files playing at the same time. MusicPlayer supports all of the basic operations, stop, pause, play and skipTo along with supporting events. The MusicPlayer enables the developer to add music and podcasts to their AIR-enabled Ext application very quickly.

var mp = new Ext.air.MusicPlayer();
mp.adjustVolume(0.5);
mp.play(url);

Ext.air.Notify

The new notification class allows you to notify your users with toast or growl-like messages from the operating system. This allows you to notify users that something important has occurred even when your application may not be visible. By displaying these notifications at the operating system level it is sure to get the users attention without being lost within a browser tab.

var msg = 'Title: {0}<br/>Artist: {1}';
var sample = new Ext.air.Notify({
    msg: String.format(msg, id3info.songName, id3info.artist),
    icon: '../famfamfam/music.png'
});

Window and App API’s

We added methods and configurations for common window manipulation tasks that did not already exist. Ext.air.NativeWindow now exposes methods to re-order windows, set a window as always on top, and enable full-screen mode. A new singleton, Ext.air.App will allow you to set your application to start on login and get the currently active window.

Ext.air.App.launchOnStartup(true);

Ext.air.Clipboard

Ext.air.Clipboard allows you to interact with the system’s clipboard. Developers can determine if a particular format has data, set the data and get the data. At this point, this is largely a pass through to an existing class from Adobe air.Clipboard.generalClipboard. There may be enhancements or workarounds which Ext will add in the future including integration with drag and drop.

Ext.air.Clipboard.setData('air:text', 'Sample set on the clipboard');
var data = Ext.air.Clipboard.getData('air:text');

Ext.air.VideoPanel

Ext.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel. VideoPanel’s can also take part in Ext layout management. This means that you can nest your Video’s in a border layout, add toolbars, buttons, just as you have become accustomed to. You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!

var vp = new Ext.Viewport({
    layout: 'fit',
    items: [{
        id: 'video',
        xtype: 'videopanel'
    }]
});
Ext.getCmp('video').loadVideo('sample.flv');

AIR and the Future of Ext.air

Adobe AIR enables web developers to use their existing skill set to create desktop applications. AIR is a cross-platform runtime and allows you to develop your application once and then deploy it across Windows, OS X or Linux. (The Linux runtime is currently in beta status.) Adobe AIR 1.5 was shipped last week at AdobeMAX and features database encryption, an updated WebKit (including SquirrelFish) and Flash Player 10.

Ext will be adding support to encrypt your SQLite database soon. Another exciting technology which was included in Adobe AIR 1.5 is PixelBender. PixelBender allows you to apply lightning fast image or video processing filters to your application. An important feature of AIR that many people are unaware of is that you can mix and match Ajax, Flash and Flex technologies. There are several existing open-source ActionScript libraries which you can take advantage of immediately by including them in your application. A new project from Adobe named Alchemy will even let you compile C or C++ code to the ActionScript virtual machine. You could then consume this code in an Ext application on the AIR platform! The entire Ext.air package including samples can be downloaded here. It will also be included in the next release of Ext.

We are pleased to announce that Ext has partnered with CacheFly, a global content network, to provide free CDN hosting for the Ext JS framework. Cachefly’s globally distributed network and aggressive caching accelerate the delivery of web content like JavaScript and CSS, making for an even faster Ext experience.

The Ext CDN also provides the ability to create your own custom builds using Ext’s Build It! tool, and host them on the CDN. The custom builder implements features to intelligently cache your component selections, adapter, and Ext version to create a unique custom build. These custom builds are cached across sessions and used by anyone who makes the same selections as you have - allowing for caching of custom builds across applications to fully realize the benefits of the CDN.

Creating a Custom Build

We’ve made the process of creating the custom build on the CDN as simple as a selecting the option.

Using the Custom build

To use your custom build on your own site, insert the output into the HEAD section of your site. If you needed to use a build with no grid or tree support you would just paste the following:

 <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-7.js"> </script>
 <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css" />

For those of you that need the complete library and use ext-all.js and ext-all.css we have those available as well.

 <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2/ext-all.js"> </script>
 <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css" />

Summary

There are many ways to judge an application’s performance, however none are as noticeable as the time it takes for an application to load. There are many techniques such as compression using gzip , minification using JSMin, and tools like YSlow to help developers make noticeable improvements. We hope the Ext CDN is another optimization our community will add to their toolbox.

Overview

As developers we can create great software. Unfortunately, we usually introduce a few bugs along the way. Using a testing tool can ensure we catch the bugs and resolve them quickly.

There are many different approaches to testing. Some advocate writing the tests within the application, others suggest a separate testing environment entirely. There are merits to both these approaches. For this blog post, I’ve focused our attention on Selenium as both Ext JS and Ext GWT and benifit from this “black box” testing methodology.

Selenium provides a powerful mechanism to test your Ext applications. Selenium works by executing tests against your running application within the browser of your choice. Selenium tests emulate the way a user would interact with your application by executing JavaScript to simulate user actions. Selenium tests run as a form of “integration” tests as they execute against your running application.

Both Ext JS and Ext GWT applications can benefit from Selenium tests. In fact, with few exceptions, the tests created for one product should be interchangeable as both products produce the same DOM structure.

With GXT applications, GWT provides built in JUnit support. This provides a great way to test your application. However, these tests run only in host mode. Being able to test your compiled application in multiple browsers is important as some issues only appear within your compiled application.

In general, you create Selenium tests and then execute them in a variety of ways. This tutorial will demonstrate creating tests with Selenium IDE, a Firefox plugin, and creating tests within Java. Tests will be loaded and executed within the Selenium IDE, and Java JUnit tests will be executed using Selenium Remote Control.

Selenium IDE

Selenium IDE is a Firefox extension that allows you to create, edit, and execute your tests. Tests can either be created manually, or by “recording” your actions. Recording can help you get a feel on how the Selenium commands are generated, but in most cases you will want to tweak the generated commands.

A Selenium test is a list of commands. Commands can be seen as actions, such as “click this element”, “type into this field”, and “assert an element exists”.

Install Selenium IDE

First, you will need to install the plugin which can be found here. Once installed you can choose Tools / Selenium IDE or View / Sidebar / Selenium IDE from the Firefox application menu.

Spend some time playing around with Selenium IDE. You can use the record button (red circle) to have the tool record your actions or you can enter commands manually. Most commands require a locator string. The locater string is repsonsible for identifying elements. There are various “types” of locator strings which are covered later.

Using Selenium IDE you can save and load tests. Also, notice the source tab. This tab allows you to view the test source. Selenium tests are saved as HTML files and can be exported to multiple server-side languages PHP, Ruby, Java, C#, Perl, and Python.

Creating a new Selenium Test

In this example, we will be testing both an Ext JS and Ext GWT form and it’s fields. First, let us take a look at the example code we will be testing. You can find the source code here:

Rather than creating a test from scratch, we will load an existing test file (listed above). Download this either the Ext JS or Ext GWT file to your file system. Then open the test in the Selenium IDE by selecting File / Open. Once loaded, Selenium IDE should look this this:

Notice the list of commands. Take a look at each command to get a feel of what the test is doing. If you opened Selenium IDE as seperate window, close it. Then open Selenium IDE using View / Sidebar / Selenium IDE. This will place selenium in the sidebar making it easier to run and monitor tests.

You can execute the test by clicking the first icon with the green arrow in the tool bar. Notice that you can control execution speed, use break points, execute individual commands, etc. After running your test, you screen should look like this:

Notice the form fields have been filled out. Examine the commands closely to see what actions were taken and what assertions where made. This test only touches the surface of things you can accomplish with commands. Note: When running the Ext JS test file, the radios and check boxes will not show the checked state, however, the true state will be correct, and the tests will run successfully.

Selenium Locators

Many Selenium commands require a locator to be specified. A locator is a way to identify an element in the page (the DOM to be specific). There are various types of locators including id, name, dom, xpath, link, and css. For this tutorial, XPath expressions where used. XPath expressions provide a powerful mechanism to identify elements. Example expressions look like this:

Here are a few examples using CSS selectors:

Executing Tests with Selenium Remote Control (RC)

Selenium IDE provides a great way to create your tests and execute them in Firefox. Tests can only be run by manually opening Firefox and executing tests. What if you want to run you want to automate your tests and run them in other browsers? This is where Selenium Remote Control comes into play.

From the Selenium website: “Selenium Remote Control (RC) is a test tool that allows you to write automated web application UI tests in any programming language against any HTTP website using any mainstream JavaScript-enabled browser. Selenium RC comes in two parts. 1. A server which automatically launches and kills browsers, and acts as a HTTP proxy for web requests from them. 2. Client libraries for your favorite computer language.”

Download Selenium RC

In addition to Selenium IDE, Selenium RC must be downloaded and can be found here. After downloading, unzip the file to your file system.

Starting the Server

The first step in using Selenium is to start the server. The server is responsible for executing your tests. The server will open browser instances, run tests, and close browsers. The server is written in Java and can be started by executing this command:

java -jar selenium-server.jar

The command should be executed from the folder where the selenium-server.jar is located.

To run your tests in Java, you must reference the Java client library. See selenium-java-client-driver.jar in the Selenium RC download.

Creating a test in Java

Selenium RC supports various languages, we will focus on Java. Rather than creating the Java test from scratch, Selenium IDE can be used to create the base Java code needed to create the test. From Selenium IDE, select the source tab, then choose Options / Format / Java. You will see the test is converted form HTML to Java. You can then copy and past the Java code to be used in your Java test. You can use the same steps to create code in other languages such as PHP and Ruby.

Here is the Java code that was created using the template code from Selenium IDE:

public class SeleniumTestCase extends SeleneseTestCase  {
 
  private Selenium selenium;
 
  public void setUp() {
    selenium = new DefaultSelenium("localhost", 4444, "*iexplore", "http://extjs.com");
    selenium.start();
  }
 
  public void testForm() {
    selenium.open("http://extjs.com/playpen/gxt/selenium/");
    pause(500);
    selenium.type("//input[@name='name']", "John");
    selenium.fireEvent("//input[@name='name']", "blur");
    assertTrue(selenium.isElementPresent("//input[@name='name' and contains(@class, 'x-form-invalid')]"));
    selenium.type("//input[@name='name']", "Darrell");
    selenium.fireEvent("//input[@name='name']", "blur");
    assertFalse(selenium.isElementPresent("//input[@name='name' and contains(@class, 'x-form-invalid')]"));
    selenium.type("//input[@name='email']", "darrell@foo.com");
    assertEquals("Darrell", selenium.getValue("//input[@name='name']"));
    assertEquals("darrell@foo.com", selenium.getValue("//input[@name='email']"));
    selenium.focus("//input[@name='company']");
    selenium.click("//input[@name='company']/following-sibling::img");
    assertEquals("43", selenium.getXpathCount("//div[@class='x-combo-list-item']"));
    selenium.click("//div[@id='Apple']");
    assertEquals("Apple Inc.", selenium.getValue("//input[@name='company']"));
    selenium.click("//input[@name='birthday']/following-sibling::img");
    selenium.click("//button[contains(text(), \"Today\")]");
    assertTrue(selenium.getValue("//input[@name='birthday']").matches("^[\\s\\S]*$"));
    selenium.check("//input[@value='Classical']");
    assertEquals("on", selenium.getValue("//input[@value='Classical']"));
    selenium.check("//input[@value='Blue']");
    assertEquals("on", selenium.getValue("//input[@value='Blue']"));
  }
 
  public void tearDown() {
    selenium.stop();
  }
 
}

Notice the use of “pause” after opening the application. This is needed to allow the GWT application to load. Other than that, the test code is a direct paste from the code generated in Selenium IDE. Notice that the test is using “*explorer” to execute the test. Firefox, Opera, Safari, Chrome are also supported. Keep in mind that the browser must be installed on the same maching where the Selnium server is running.

The new JUnit test can be executed just like any other JUnit test. The test can be executed with Eclipse.

Selenium Grid

Although it is not used in the tutorial, Selenium Grid is worth mentioning. From the website: “Based on the excellent Selenium web testing tool, Selenium Grid allows you to run multiple instances of Selenium Remote Control in parallel. Even better, it makes all these Selenium Remote Controls appear as a single one, so your tests do not have to worry about the actual infrastructure. Selenium Grid cuts down on the time required to run a Selenium test suite to a fraction of the time that a single instance of Selenium instance would take to run.”

Summary

The tutorial demonstrated how load and run tests within Selenium IDE. The test code was ported to Java where it was run using Selenium Remote Control in a JUnit. This tutorial demonstrated the major moving parts involved in Selenium tests. It is recommended to take a look at the Selenium documentation and tutorials for more information.

Many thanks go out to the Selenium Team. There is a slight learning curve getting familiar with the product but I found it straightforward. The time was well spent as it opens up a new approach to testing web applications.

We are excited to be a part of JackBe’s announcement this week of both the Mashup Developer Community (MDC) and the free Presto Enterprise Mashup Developer Edition (DE). JackBe, the leading provider of enterprise mashup software, partnered with Ext JS to support the creation of sophisticated mashup widgets. By JackBe leveraging Ext JS, our community now has the added benefit of being “mashup-ready” developers.

Getting Started

Much of JackBe’s mashup UI technology is based on Ext JS. As an Ext JS developer, you’ll be right at home developing custom Mashlets using all your Ext JS knowledge. JackBe has some great examples of Ext-based mashlets, including a Competitive Intelligence mashlet, and their very popular ‘People Finder’ mashlet. My personal favorite was the sample mashlet application “Mashboard”.

Putting It Together

Presto includes a Mashlet Wizard that creates templated mashlets in a few clicks. But the real power is when you get your hands dirty and write plain-ole Ext JS code. The learning curve for an Ext JS developer is a few hours.

Every call to a mashlet will query the latest data from all of the data sources in the mashup, apply all of the sorts, merge, join/filter/extract operations you have specified, and render your prebuilt Ext interface with that new data. Many mashlets are also syndicatable and are accessed as simply as a script tag which can run in any browser. They can also be published as a JSR-168 portlet, or a widget in Netvibes or iGoogle, and even run on the iPhone. Mashlets are delivered from the Presto Mashup Server and hides all the security and governance required of most enterprise apps, particularly the ones that connect to many underlying data sources.

Interesting Stats

Gartner recently rated Enterprise Mashups as a Top IT Technology for the second straight year. In addition, Forrester estimates that mashups will be a $700 million market in 5 years. Therefore, Ext JS developers have the skills today to participate in a rapidly growing market.

Summary

We are thrilled JackBe selected Ext JS as their UI technology to, as they put it, ‘give Mashups a face’ . Deepak Alur, the VP of JackBe engineering said, “Partnering with Ext JS and using Ext JS javascript library as a foundation for our Mashlet technology was a no-brainer. It takes only a few minutes to see how powerful and enterprise-ready Ext JS is. It’s a perfect fit for us and our mashup developer community.”

I’ve been perusing JackBe’s Mashup Developer Community and also been getting personal demos from the JackBe. I am impressed with the speed and power you get from Presto Mashups and Mashlets. I recommend you join the MDC and download Presto DE. JackBe has started a Mash for Cash contest to find the best mashup developers. Our community has the leg up mashing with Presto and Ext JS. So, get to Mashing!

With the growing popularity of Web 2.0, more companies are providing public APIs for developers to create new and exciting compilations. These APIs can be used to grab small snippets of content which can be used in an application or site. Commonly referred to as a mashup, content from different sources are collected and presented to the user in a single interface. By aggregating the data in a single place, users remain on your site and need not be inconvenienced by multiple interfaces.

Flickr is a popular image sharing management tool. Amongst a number of services, it allows users to create online photo albums and the ability to categorize and tag photos. In this post we’ll look at retrieving data from Flickr by extending Ext’s native data package to display an image gallery. The image gallery widget will support the ability to search images based on how they are tagged inside Flickr.

Getting Started

To begin using the Flickr web services, we need to get an API key. The API key is sent with all requests and is used to identify the caller. Instructions on obtaining a key can be found here (there is no cost to get one). Once we have our key, we can look at the various methods the service exposes to us, which can be broadly classified as blog information, user information, contact information and photos. It is important to note that a lot of the methods in the Flickr API require authentication via a username and password. In our example, we will be using a public method only, which can be run without needing to be authenticated.

Cross domain restrictions and workarounds

Due to security restrictions in web browsers, Ajax requests can only be made to the domain of origin. Practically, this means we can’t make a call to another domain to request data. This poses a problem for building our image gallery. Enter Ext.data.ScriptTagProxy! ScriptTagProxy uses a technique called JSONP or JSON with padding that bypasses cross-domain restrictions by using script tags to transport data. It works by dynamically creating a new function in the window scope of the document. It then injects a script tag into the head of the document pointing at the remote resource with a url parameter of the name of the function it just created. The server-side must then use this url parameter to wrap around an object literal. Check out the Ext documentation for a Java Example.

Helper Classes

For the image gallery, I’ve written 2 small classes to assist with loading data from Flickr. The first is the FlickrProxy, which handles simple tasks like appending the api key and the method to each request. The second class is the FlickrPhotoReader, which defines the response format of photos. There are a number of different objects that get returned, so additional readers could be created for that purpose. The other class created is a FlickrWindow class. It is used to do basic paging operations and handle searching for images by tags.

Putting It All Together

Now we have all our components, we can use our new gallery. The code to create it is as follows:

var store = new Ext.data.Store({
    reader: new Flickr.FlickrPhotoReader(),
    proxy: new Flickr.FlickrProxy({
        apiKey: 'd4396e08e2a00f2c913d1fe5aa040c16',
        method: 'photos.search'
    })
});
 
var win = new Flickr.FlickrWindow({
    store: store,
    width: 400,
    height: 400
});
win.show();

The example code has been packaged as a zip and is available here.

After populating our data store, we can now navigate between the images. Some images are available in multiple sizes. You can use the image menu drop down to select what size you’d like displayed. If an image is not available in the size you have chosen you will receive a white image back with the text “This photo is currently unavailable.”

Next Steps

This example only uses a very small portion of the Flickr API. You can use the FlickrProxy as a base for accessing other methods offered in the Flickr API. The methods which require user authentication could prove to be particularly interesting for those of you who use Flickr on a regular basis. We’re always amazed at the wealth of talent and creativity in the Ext community and would love to see what you can create withthis small stepping stone into Flickr’s data services.

Creating cross-browser consistent visualizations of data without Adobe’s Flash plugin has always been a difficult issue to address. Google introduced a Visualization API earlier this year which enables you to present tabular data in the form of charts, maps, and other graphical representations without the need for Flash. (Some visualizations actually do use flash, but most are implemented with SVG and/or VML.)

Working with different API’s can present hurdles as we attempt to massage the same data in two different data structures - one for a grid and another for a pie chart. To address this specific challenge, I developed a short user extension Ext.ux.GVisualizationPanel enabling users to integrate visualizations into Ext JS applications without concern for these issues. The GVisualizationPanel adapts any Ext data Store into the google’s format and enables you to embed any type of visualization into a panel.

Adapting google’s DataTable to an Ext Store

All Google Visualization’s are backed by a google.visualization.DataTable. According to Google, “A DataTable is a two dimensional table, with rows and columns and cells. Each column has a defined data type.” Google’s DataTable and Ext’s data Store are analogous and serve similar purposes. Their primary purpose is to enable developers to manipulate data in a single place and drive your GUI from that data. In order to continue changing our data in a single place and avoid having to manually synchronize 2 data structures, we will need to create an adapter to convert any Ext Store to a Google Table.

Differences between Ext.data.Store and google.visualization.DataTable

A key difference between Ext’s Store and Google’s DataTable is that the Ext data Store only handles data & schema information. On the contrary, Google’s DataTable requires presentation information like Label’s. The Ext.ux.GDataTableAdapter eliminates any inconsistencies between the 2 API’s allowing you to apply the same store to a visualization as you would apply to an Ext GridPanel. Ext.data.Store provides the developer with more formats by choosing a JsonReader, XmlReader or ArrayReader. Google’s DataTable is limited to programmatically adding data via methods or loading data from a Google Spreadsheet. This makes the Ext.data.Store a more favorable data structure in most cases. A final difference between Ext.data.Store and Google DataTable is that they each use different data types.

Using the Adapter

By eliminating the differences between Store and Table with the adapter, a single Ext.data.Store can be bound to Ext components and Google Visualizations at the same time. The Organizational Chart sample demonstrates how to synchronize a Google OrganizationChart and an Ext grid by binding them to the same Ext.data.Store. The sample also demonstrates how to consume the ’select’ event exposed by the GVisualizationPanel.

Adapting your existing Ext Store’s can be done with Ext.ux.GDataTableAdapter’s static adapt method.

var dataTable = Ext.ux.GDataTableAdapter.adapt({
	store: myDs,
	columns: [{
		dataIndex: 'yr',
		label: 'Year'
	},{
		dataIndex: 'sales',
		label: 'Sales'
	},{
		dataIndex: 'expenses',
		label: 'Expenses'
	}]
});

Using the GVisualizationPanel

GVisualizationPanel works like any typical Ext.Panel and can partake in the container model and layout management. This means you can integrate it into your existing border layout or as a custom portlet. The class has been registered with the xtype of ‘gvisualization’. To use a visualization you will need to determine the visualizationPkg you’d like to use from Google. Then setup an appropriate store and pass in the visualizationPkg, store and columns configuration to create a new visualization.

For example, to create the Intensity Map used in the demo we can use the following code:

var countryStore = new Ext.data.SimpleStore({
    fields: [{
        name: 'Country',
        type: 'string'
    },{
 
        name: 'pop',
        type: 'int'
    },{
        name: 'area',
        type: 'int'
    }],
    data: [
        ['CN', 1324, 9640821],        
        ['IN', 1134, 3287263],
        ['US', 304, 9629091],
        ['ID', 232, 1904569],
        ['BR', 187, 8514877]        
    ]
});
var intensityMap = new Ext.ux.GVisualizationPanel({
    id: 'intensityMap',
    visualizationPkg: 'intensitymap',
    title: 'Intensity Map Sample',
    store: countryStore,
    columns: ['Country',{
        dataIndex: 'pop',
        label: 'Population (mil)'
    },{
        dataIndex: 'area',
        label: 'Area (km2)'
    }]
});

In Conclusion

Using the GDataTableAdapter to adapt or convert an Ext.data.Store to a google.visualization.DataTable is a good way to allow Ext Developers to use Google Visualizations without worrying about any underlying differences. Some of Google’s Visualizations have additional configuration options which can be used through a visualizationCfg configuration. GVisualizationPanel is a powerful implementation which supports any of the visualizations provided by Google in their gallery by simply setting a visualizationPkg config. Take a look at the many different types of visualizations available in Google’s Visualization Gallery.

As Enterprise applications begin moving to the web instead of the desktop many developers may forget about providing key bindings for their applications. Most web applications use the keyboard only for text entry and do not associate particular key combinations with user actions. By providing this type of key handling, particularly for applications which require a lot of data entry, we can improve the end-user experience.

While at a recent client engagement, we wanted to provide a smooth transition for users skilled at working with a legacy ‘green screen’ application to using a new Ext JS version. Part of this transition involved enabling power users to continue navigate the application with the same key handling. By the end-users not having to remove their hands from the keyboard, their efficiency increases substantially. Here’s some insight into how we accomplished the task at hand.

Ext.KeyMap

Ext provides several components that support keyboard navigation out of the box such as GridPanel, ComboBox, and TreePanel. To implement custom keyboard handling, developers can use the Ext.KeyMap and Ext.KeyNav classes to attach keyboard bindings to any component or element they wish.

The first set of keys we wanted to handle was all of the Function keys (F1-12). While most browsers reserve some/all of these keys, with some ext-pertise, we are able to override the default function if need be for our application. The application we were working with was completely dynamic and server driven, so we really couldn’t define all of the handlers ahead of time. This led to us dynamically building an array of key handler configuration objects and passing them all through to our new Ext.KeyMap object.

var keys = [];
for(var i = 0;i < buttons.length;i++) {
    var btn = buttons[i];
    // fkey property contains a string referencing the Ext constants (ie: Ext.EventObject.F1)
    var fk = eval(button.fkey);
    btn.handler = this.handleKey.createDelegate(this, [fk]);
 
    keys.push({
        key: fk,
        handler: this.handleKey.createDelegate(this, [fk]),
        stopEvent: true,
        scope: this
    });
}

This implementation demonstrates creating a toolbar and assigning function keys that would perform the same action when the button was clicked or when using the mouse. buttons is an array of button configurations that we pulled from the Json response from the server. The server is sending over a string which references some constants built into the Ext.EventObject for function keys. Since the data comes over as a string we can simply eval it and get the resulting number.

We use a generic handler for all of the click and keypress functions since it is all controlled from the server. createDelegate lets us pass along the key that was pressed so that we can share the same handler function regardless of if the event was a click or a keypress. With the keys array built and our handlers added into the buttons array, we are able to toss these into our Panel configuration and it will do the heavy lifting for us.

tabPanel.add({
    title: 'Test Panel',
    tbar: buttons,
    keys: keys
    ...
});

With our layout in place, adding a tab with our key handlers is pretty simple. The tbar parameter takes our array of Ext.Button configs that were server generated (aside from the handler), and the keys parameter takes an array to pass along to the Ext.KeyMap object.

Ext.KeyNav

The next set of key handling added was some additions to the grid keyboard navigation. The GridPanel has built in key navigation from the RowSelectionModel that it creates. Check out this grid example and select a row, you can then use the arrow keys to move up/down and even hold shift and press down to select a range of rows. We added a simple way to navigate through a large paged data set by extending GridPanel. The PagingToolbar provides keyboard handling once you’ve focused within the built-in TextField, but we wanted to allow the users to just hit ‘page down’ or ‘end’ when focus was anywhere within the GridPanel and ensure it functions as expected.

MyGrid = Ext.extend(Ext.grid.GridPanel,{
...
afterRender : function() {
   MyGrid.superclass.afterRender.call(this);
 
    this.nav = new Ext.KeyNav(this.getEl(),{
        pageDown: this.pagingNav.createDelegate(this,['next']),
        pageUp: this.pagingNav.createDelegate(this, ['prev']),
        home: this.pagingNav.createDelegate(this,['first']),
        end: this.pagingNav.createDelegate(this,['last']),
        scope: this
    });
},
 
pagingNav: function(page) {
    var pt = this.getBottomToolbar();
    if (!pt[page].disabled) {
        pt.onClick(page);
    }
},
...
});

This is a snippet from an extended GridPanel class, and it assumes that there is an Ext.PagingToolbar in place and it is the bottom toolbar (bbar). We could certainly write this code without the PagingToolbar, but it has already done the work to calculate page sizes and has handlers in place for determining the proper load call when skipping backwards/forwards in pages. We create our new Ext.KeyNav object and apply it to the GridPanel’s underlying Ext.Element. KeyNav does the work of assigning handlers to the proper key codes and calls our pagingNav function with the parameter that we bound to it using createDelegate. The pagingNav function merely checks to see if that particular button is disabled, for instance if you’re on the last page, you cannot press the next button again, so we don’t let them “page down” again either. As long as that button is not disabled we act as if the user clicked on the page next button and let the PagingToolbar do it’s magic and load the proper page.

Utilizing these techniques we were able to provide a seamless keyboard navigation experience for our client and their customers migrating from the legacy application to the web application

Getting Started

As you can see, adding custom key handling within an Ext JS application is quite easy. For any custom keys, including function keys, alpha keys with or without modifiers (alt/shift/ctrl) there is Ext.KeyMap. For navigation, arrows, paging, home/end there is Ext.KeyNav. There’s some more handy example code available for each right within the API documentation if you need any further help getting started.

Come join Jack Slocum and I for two developer focused sessions, “Hands On Ext” and “Advanced CSS and Theming of Ext JS” at The Ajax Experience at the end of this month. Feel free to follow along with your laptop or watch as we build an application and demonstrate how to create a custom theme in each hour long session. The Ajax Experience is a three day conference with many interesting sessions on Ajax, Web 2.0 technologies and JavaScript frameworks targeted at developers. This year’s conference will be held in Boston, MA from September 29th to October 1st. Registration is still open and we are hoping to see you there!

Session: Hands on Ext

Speaker: Aaron Conran
Duration: 1 hour
Hands On Ext will be a fast-paced session in which we will build an Ext application in less than an hour. This session will demonstrate how to get started using Ext JS and show how quickly you can put together a simple application from scratch. Learn how to utilize Ext’s high-level UI widgets like GridPanel, TabPanel and FormPanel instead of re-inventing the wheel.

Session: Advanced CSS And Theming of Ext

Speaker: Jack Slocum
Duration: 1 hour
Join Jack as he demonstrates how to manipulate the look and feel of Ext to integrate seamlessly with your application or company’s style guide. As you probably know, all Ext widgets can be transformed to look radically different simply by adding an additional CSS theme file. Learn how to create a custom theme for your Ext application step by step in this hands-on demonstration.

Meet Up

Jack and I are hoping to meet with members of the Ext community to discuss our plans and the future of Ext. We’d also like to find out more about what you guys are creating with Ext. We are planning on having a meet-up after the conference on the 2nd day (Sept. 29th). If you’d like to meetup please send your contact information to meetup@extjs.com. Feel free to suggest a location if you know of a good spot to meet.

We’re Growing

Ext is a growing company and we are looking for talented developers to join our team. Please take a look at jobs.extjs.com if you have the skill set, drive and desire to join our team and grow with us. If you will be at The Ajax Experience, make an additional note so that we can be sure to meet you. The Ajax Experience should be a very exciting conference with many different frameworks and technologies represented. Please be sure to stop by our sessions and the meet-up if you are already an Ext developer or want to know more about Ext. Finally, we’d like to thank the Ajaxians for inviting us to present at The Ajax Experience.

When Google Chrome was released last week, I was interested in seeing how the Application mode feature worked. I revived an old project to interface with the Google Contacts Data API and built a small application to manage your google contacts which you can ‘install’. The example extends the Ext.data.DataProxy to allow you to populate a store with your contact information to bind to any store driven components such as Grid, EditorGrid, ComboBox and DataView.

Google Contact Manager

Google Contact Manager will show and allow you to edit the title, primary email and primary phone of all your contacts. At this time there is nothing special that you need to keep in mind when developing a Google Chrome Application. To ‘install’ an application, select the Page icon to the right of the URL box and choose “Create Application shortcuts…” You can then choose to create shortcuts on your Desktop, Start Menu or Quick Launch bar. I chose to create the shortcut on my Desktop. Hopefully Google releases an additional API or a 3rd party plugin which allows you to integrate your web app with more desktop like features.

Working with the Google Data API

This example interfaces directly with Google’s Data API with no need for a server-side backend. Google has released a JavaScript developer guide which is very useful when interfacing with their API. The example authenticates using Google’s AuthSub proxy to obtain the contact information. The authentication token is stored as a cookie with a two-year expiration. One additional caveat when using the Google JavaScript API is that you must have an image hosted at the same domain as your page or it cannot authenticate. Google has recently released many different Data API’s which you can interact with directly through JavaScript including a Language Translation API, a Visualization API and a Notebook API.

Google Chrome’s Future

Google Chrome seems like it will be a game-changing step made by Google for the browser environment. If they kept this project secret for nearly 2 years, I wonder what else they have up their sleeves. I am eagerly awaiting the stable release of Google Chrome as well as the Linux and OS X versions. Google Chrome is currently in Beta and therefore it is not yet an officially supported browser. We have full intentions of bringing Google Chrome into our supported platforms and have created an issue tracking thread on the forums.

Ext GWT 1.1 is right around the corner and incorporates the popular Portal and Web Desktop interface.

WebDesktop

The desktop mimics the behavior of the operating system look at feel. It is now possible to create multi-window applications with support for a task bar and start menu. Windows support normal, maximize, and minimize states. The start menu is a custom menu that allows new menu items. In addition, there is support for a “task” area for adding additional items.

Portals

Portal is a custom layout container that uses a multi-column layout on contains Portlets. Each Portlet can be drag and dropped to change order or move to another column. Each Portlet can contain any content and supports icons to expand / collapse, close, etc.

It could not be much easier to create content for a Portal:

    // create a portal
    Portal portal = new Portal(3);
    portal.setBorders(true);
    portal.setStyleAttribute("backgroundColor", "white");
 
    // set colum widts as pixels or percentages
    portal.setColumnWidth(0, .33);
    portal.setColumnWidth(1, .33);
    portal.setColumnWidth(2, .33);
 
    // create and add a potal to a column
    Portlet portlet = new Portlet();
    portlet.setHeading("Grid in a Portlet");
    portlet.setCollapsible(true);
    portal.add(portlet, 0);

Preview Now Available

There have been many new additions to the 1.1 release including all items from our Roadmap:

• Auto complete and auto fill ComboBox
• Grid and grid plugins
• Editable grid
• Portals
• WebDesktop
• Advanced form layouts
• Java bean support

Anyone interested in a sneak peak can download the build here. 1.1 final will be released soon and work has already begun on 1.2. Drag and drop is the first item on the agenda for 1.2

We first heard about Marketo a long time ago, as they were a very early adopter of the Ext framework. The initial version of their marketing automation application was very nice even using pre-1.0 versions of Ext, and it has steadily improved over time. In addition to using the standard Ext components extensively, Marketo also employs their own custom UI theme to give the application a polished and distinctive look. They have also extended the base Ext platform with many sophisticated user interaction techniques that add power and expressiveness to the user experience.

I recently spoke with Glen Lipka, Marketo’s Director of UX and Product Management, and Paul Abrams, lead UI engineer, about their application and their use of Ext.

Tell us a little bit about Marketo and how you’re using Ext.

Marketo is sophisticated yet easy marketing automation that helps B2B marketing professionals drive revenue and improve accountability. In short, we are a Marketing department’s one-stop, on-demand resource. We use Ext as the fundamental base for the client-side interface. Additionally, I use the numerous examples posted on extjs.com and the forums as my UI design toolkit. When faced with a feature or problem, I often look at different UI examples. The samples on Ext give me confidence that we could implement that approach quickly without reinventing the wheel.

Did you evaluate other JavaScript frameworks when starting work on Marketo? Why did you choose Ext?

We started using Ext very early, when it was called YUI-Ext. We were using YUI and Prototype and homegrown and others at the time. The mishmash wasn’t helping us, rather it was making maintenance difficult. When we started using YUI-Ext 0.33, there were lots of hurdles, but it still made things much better. We understood the vision and bought in. We skipped 1.0 and introduced 2.0 when it came out in Beta. By this I mean that we ran 0.33 and 2.0 simultaneously. The new efforts in 2.0 totally transformed our development process. The flexibility of the system and the general intuitive nature of how it was built made it an easy choice to standardize on.

How does Ext fit into your overall technical architecture?

We have a LAMPhp stack using the Symfony framework. Before Ext, we used a lot of one-off HTML. The CSS and HTML burden of trying to maintain duplicate code everywhere was a hassle. Now, we use Ext configurations and subclass components we want to extend. The potential of UI variations has dropped significantly and we can now reuse UI patterns much more effectively.

How has the transition from .33 to 2.0 been going?

We introduced 2.0 in the fall of 2007 and ran it with 0.33 and our legacy code. The new tree, grid and other components were much more in line with our needs. There were many useful enhancements in 2.0.

We are finally ready to remove the legacy 0.33 code. We hoped the technical switch would involve upgrading components to their Ext 2.x equivalent and be relatively painless. It took six months on and off experimenting with different strategies before finding a new app structure and upgrade approach that worked, and then a couple of months of solid work rebuilding all the components derived from YUI and YUI-Ext 0.33 from scratch in Ext 2.x. Unfortunately, little was reusable. We have delayed a few components while we are designing a new skin, and later this year we will have a 100% Ext 2.x application. This has been a long time coming, but we are excited about it.

The Marketo application is extremely feature-rich. How did you manage the UI code complexity?

Just like Ext, we organize our code base into components and try to reuse as much code as possible. For example, our main Viewport lives in a folder/namespace and gets its own .js and .css files. We also have custom extensions for most of the major building blocks such as trees, combo boxes, grids, dialogs, etc.

What features could we add to Ext to make building a rich application like Marketo easier in the future?

There have been several places where building a custom extension involved overriding private methods, so more subclass hooks and smaller methods would help.

Ext also needs a unified Ajax session manager similar to the role of the Ext window manager. A rich web application like Marketo needs more management over the user session, such as detecting a session timeout and showing a login prompt. Another example is managing groups of Ajax requests, so that making a request to the same group could abort ongoing requests. Building an Ext RIA would involve creating a Viewport and an Ajax session manager, and then building components on top of that foundation. We rolled our own session manager in the 0.33 days and need to hook in the new Ext 2.x components.

Do you have any advice for developers just starting out with Ext for the first time?

If you are building a large application, don’t try to use Ext to decorate an existing app via “unobtrusive JavaScript” or build an app half with conventional construction and half with Ext. Instead, embrace Ext as a framework and start from scratch with something like a Viewport, and build components on top of that foundation.

We are pleased to announce the release of Ext 2.2, a fully backwards-compatible maintenance release of Ext. This is a recommended upgrade for all Ext 2.x users as it not only adds many new components and examples, but also provides a host of important bug fixes and performance improvements.

New Features

While many minor release versions are simply boring bug fix releases, we have also decided to pack a bunch of brand new components and extensions into 2.2 for your enjoyment. Let’s start off with the fun stuff!

CheckboxGroup / RadioGroup

Technically, while the individual Checkbox and Radio controls are not new, they may as well be, considering the overhaul they have had in this release. Gone are the ugly standard browser input controls, now replaced by attractive, visually-consistent Ext-ified versions (a long-overdue improvement).

In addition to that, we’ve added group controls for both that support complex layouts with just a config option or two. This was inspired, in part, by the RadioGroup user extension created by community member vtswingkid. Previously in order to accomplish similar grouping layouts for checkbox/radio controls you would have had to create a container with a ColumnLayout and manually place your controls across multiple column configs. Now you can do something as simple as…

	... },{
	    xtype: 'checkboxgroup',
	    fieldLabel: 'Multi-Column (horizontal)',
	    columns: 3,
	    items: [
	        {boxLabel: 'Item 1', name: 'cb-horiz-1'},
	        {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
	        {boxLabel: 'Item 3', name: 'cb-horiz-3'},
	        {boxLabel: 'Item 4', name: 'cb-horiz-4'},
	        {boxLabel: 'Item 5', name: 'cb-horiz-5'}
	    ]
	},{ ...

Check out the live example.

History

Another component that has been missing in Ext is a browser history utility to enable history stack navigation within your single-page Ext application. The new Ext.History singleton makes it extremely easy to do exactly that, and it uses an event-based API to notify you when the browser history has changed. Check out the live example.

MultiSelect / ItemSelector

These two components were contributed to Ext by community member TJ Stuart (thanks TJ). The MultiSelect is a traditional list control that allows for selecting multiple list items, and the ItemSelector combines two MultiSelects into a more sophisticated control that includes drag-and-drop list selection and bulk selection and deselection among other features. Check out the live example.

For the time being these controls are still implemented as user extensions, and the MultiSelect will likely be migrated to become a core component in a future release. They should not yet be considered to be API-stable controls, but should still be quite useful if you need the functionality.

FileUploadField

This is an official extension provided as a sample for implementing a useful form component. Not everyone needs a form upload component, but if you do, you can’t live without it. This control is fully styled and has an API consistent with other Ext form controls. It also supports both Text+Button (read-only text) and Button-only modes, and can participate fully in form layouts. Check out the live example.

XmlTreeLoader

This official extension provides a great demonstration of extending an existing Ext component to provide functionality that you need in your own application. Again, loading an XML document into a tree is not needed by everyone, but if you do need something similar, this should be a great demo. Check out the live example.

GMapPanel

This extension was originally written up as a demo for one of our previous blog posts. However, it proved to be such a hit with the community that we transformed it into an official extension. This is another useful example of extending a standard Ext component, in this case to interface with an external API. Check out the live example.

Other Notable Changes

“But wait, isn’t this a maintenance relase?”

It sure is, and there have been countless fixes and improvements in the framework since 2.1. Here are some of the most important highlights from what’s changed.

Full Firefox 3 Support

Firefox 3 is a fantastic upgrade from version 2 (especially on Mac — I’m looking at you, scrollbars!). Ext performance out of the box on Firefox 3 is far better than it was before. However, the negative is that the new version also introduced a handful of bugs that have been addressed in this Ext release. Most notably:

• Grid columns were visually misaligned
• Ext.onReady stopped working reliably (our desktop demo stopped initializing correctly)
• The DatePicker width ran off the screen, making the control unusable
• The TabPanel contextmenu event stopped firing, killing the TabCloseMenu extension
• Window dragging stopped working correctly
• Various minor visual inconsistencies

If any of these issues sounds familiar, then Ext 2.2 is for you!

Advanced Drag and Drop Examples

There are 3 new advanced drag-and-drop examples available in the Ext distribution, authored by community members Animal and JGarcia (thanks guys). These examples demonstrate:

• How to implement the Ext.DragZone/DropZone classes in the context of a business-style application (live demo)
• Dragging and dropping records from one grid to another (live demo)
• Dragging records from a grid and dropping them onto a form to populate the form’s fields (live demo)

Performance Improvements, Bug Fixes and Other Goodies

• New properties for differentiating Firefox version (Ext.isGecko2 and Ext.isGecko3)
• New support for deferred row rendering in the grid (the default), boosting render performance significantly
• Refactor of EventManager to improve how event handlers are managed, which should help alleviate IE DOM leaks
• Fixed the “small PNG’s can cause performance issues in IE7″ problem
• More than 100 additional fixes and improvements

Consult the 2.2 release notes to get a complete listing of all changes.

We are very happy with this release and hope that it will provide a lot of value to our community. And for all of you version 1.x users, we have not forgotten about you either. We plan to push out Ext 1.2 within the next few days to address many of the same bugs mentioned above, including Firefox 3 issues, so keep an eye out for that.

Download Ext 2.2

We love to see all the different types of applications developed using Ext. SingleHop has developed LEAP, a server management application that gives the end user significant power over administering their remote servers via the web. They started off by customizing our popular web desktop example, but have added lots of neat goodies like dynamic charting, visual server provisioning and built-in SSH and remote desktop capabilities.

I recently spoke with Dan Ushman, a co-founder of SingleHop, to get the scoop on LEAP and find out more about how they used Ext.

Tell us a little bit about LEAP.

LEAP is a first-of-its-kind server management portal designed to allow our dedicated server clients to easily and effectively manage multiple servers from one interface.

Did you evaluate other JavaScript frameworks before deciding on Ext? How did you choose?

We selected Ext JS because, frankly, there is nothing quite like it out there. We thought that our unique product deserved a unique framework that offered true desktop-like UI features. The framework was also selected from about a half dozen other options by our developers for being easiest to work with and most flexible.

How does Ext fit into your overall technical architecture?

We integrated Ext JS into our own back end system, called Manage, built in PHP. The system is purely a LAMP-based setup, using CentOS and Apache with MySQL and PHP running the code. SingleHop has always been a supporter of open source projects, such as Kernel.org and the CentOS project and we’re proud to have built our infrastructure on open source software.

You have customized the Ext desktop example in LEAP — what other types of custom components did you create?

We have not created any custom components/extensions for our initial release, but we did take advantage of a large number of community-created components and hope to give back to the community in the future with any custom components that do get created.

LEAP has a custom theme that nicely fits your company look. Did you use a community theme or create your own?

We did in fact use madrabaz’s Olive Theme in LEAP. The color palette perfectly fit in with our corporate color scheme.

What has been your overall experience using Ext so far?

After some initial confusion with the radically different development process that goes along with an Ext-based site, our development team fell in love in Ext JS. The plethora of components available really help to accelerate the development schedule and are a pleasure to work with.

Do you have any advice for developers just starting out with Ext for the first time?

We found that the best way to dive into Ext was to simply dissect the sample code that it comes with. Most of the common uses for all the components seem to be represented in the sample code. We also found the community forums to be an invaluable resource. The wealth of knowledge represented was large enough for us to not even have to make a single post on the forums.

Early last week Yahoo announced they had released a new search API dubbed “BOSS” for “Build your Own Search Service” - wow, snazzy name. So being the explorer that I am, I started to play with it and poke around in the API - hold on! this is just the same search API service they offered up a while ago - what gives?

Benefits of the new Program

Turns out that BOSS comes without the limitations imposed on their previous search API. This gives everyone the ability to take Yahoo’s search result and re-use them in any way they want. No branding needed, no restrictions on how you are able re-format or merge the information, and no limit on the number of queries you can run.

They provide data for the following categories:

• Web
• News
• Images
• Spelling

The Job at Hand

So with my new-found knowledge of Yahoo’s guilt-free data, I put together a panel that displays the data, allowing integration of custom searches into a single interface. The searches run using BOSS to acquire web, news, and image results from Yahoo. Data is displayed in a DataView, with each result formatted to my liking using a custom template. Results can be paged, and the ComboBox in the paging bar can be used to switch between search services in this example.

Communication between ExtJS and Yahoo is done via a server side proxy, which also handles some data cleanup. This was fairly simple to accomplish - the Yahoo BOSS group even has some user contributed classes to use. I ended up implementing the PHP class posted by Jake. They also provide a callback feature so the data store could be populated without having to use a server side proxy.

Summary

In this example used to display BOSS results, a few form fields provide the functionality that allows searching. Results are displayed using DataView with a paging toolbar. I enabled template swapping based on the type of search that’s performed - that way image results are displayed two wide and web search results display in single rows.

The source files for this experiment can be found here and the live demo here. Play around with BOSS in your ExtJS applications! The possible uses of BOSS are endless.

A commonly requested piece of functionality is to load additional data when scrolling to the bottom of a dataset. DZone is a popular technology news site that uses this type of functionality on their home page. As you scroll to the bottom of a page, a loading indicator displays and then loads new content. This is not a feature which Ext provides out of the box, however by leveraging existing Ext components the task becomes simple. I have created a widget to support this type of functionality named Ext.ux.LiveDataPanel.

When should you use a LiveDataPanel?

A LiveDataPanel is a great widget to use for scrolling through recent chronological data which a user will be reading. Good examples of places would be recent news, recent blog entries, recent alerts, etc. Check out the demo of it showing recent blog entries. LiveDataPanel is not built to load overly large datasets or provide a live paging effect. It is meant to be used when your users will actually be reading the content shown, rather scanning a table row. If you are looking for the live paging effect to support huge datasets take a look at Thorsten Suckow’s excellent LiveGrid component.

How to use a LiveDataPanel

Setting up a live data panel is very similar to implementing an Ext.DataView. You will need to setup an Ext.data.Store (or subclass) which will hold the data you want to display and then an XTemplate to render that data. Here is the code used to create the Blog Entry demo.

// Creating the panel is easy
var p = new Ext.ux.LiveDataPanel({
    frame: true,
    title: 'Latest Blog Entries',
    height: 400,
    width: 590,
    itemSelector: '.entry',
    tpl: Ext.XTemplate.from('tplBlog'),
    store: myStore
});
p.render('entry-list');

Additional Configurations

This component also supports a limit configuration to load different page sizes (defaults to 10) and a loadingIndicatorTxt configuration to change the loading indicator text. LiveDataPanel is a subclass of Panel and therefore supports participating in layout management this component can be dropped into any layout and/or rendered to the page directly.

Summary

A LiveDataPanel can enhance your site by deferring the load of additional content until the user is ready to see it. Markup will never be generated unless it’s needed and therefore the browsers DOM will have a smaller footprint. It’s important to remember to use this component where approriate, because it will load every record into memory and render that record’s markup to the browser. By building upon Ext’s foundation classes, we were able to create a useful component without having to do a lot of the lower level work.

Theres no doubt that Google has some interesting and very useful JavaScript API’s - most of which I end up using over and over again. So why not package them up into an Ext component? Well thats exactly what I decided to do, adding a simple component centered around the Google Maps API.

• Maps Panel
• StreetView Panel

These are components that extend from Panel and showcase just how easy it is to make ExtJS do whatever you need. Since they extend from Panel, it means you can use them anywhere a panel can be used - such as a window, viewport or layout.

In this first release I am only supporting map types of ‘map’ (what Google refers to as the ‘Normal Map’) and the street view ‘panorama’, but I hope to be able to integrate the Moon, Mars and Sky maps soon enough.

With the extended component and a little bit of code we have a functional Google street view window with panning, zoom and navigation.

var panwin = new Ext.Window({
	layout: 'fit',
	closeAction: 'hide',
	title: 'GPanorama Window',
	width:400,
	height:300,
	x: 480,
	y: 60,
        items: {
		xtype: 'gmappanel',
		gmapType: 'panorama',
		setCenter: {
			lat: 42.345573,
			'long': -71.098326
		}
	}
});

It’s just as easy to create a Google map window that maps addresses and places markers at their locations (which could just as easily be nested in a layout instead).

A couple of the primary Google maps handlers and settings are setup as configuration options. For instance, ‘addControl’ allows adding of a standard Google map control (zoom, pan, etc) and the ‘zoomLevel’ sets a default zoom level for the map.

Geocoding can be used by substituting the lat/long configuration options with a ‘geoCodeAddr’ string.

The ’setCenter’ configuration allows the default center location of the map to be set, along with a marker. More markers can be added to the map using the ‘markers’ array.

var mapwin = new Ext.Window({
        layout: 'fit',
	title: 'GMap Window',
        closeAction: 'hide',
	width:400,
	height:400,
	x: 40,
	y: 60,
        items: {
            xtype: 'gmappanel',
            region: 'center',
    		zoomLevel: 14,
    		gmapType: 'map',
    		addControl: new GSmallMapControl(),
    		setCenter: {
    			geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
    			marker: {title: 'Fenway Park'}
    		},
    		markers: [{
    			lat: 42.339641,
    			'long': -71.094224,
    			marker: {title: 'Boston Museum of Fine Arts'}
    		},{
    			lat: 42.339419,
    			'long': -71.09077,
    			marker: {title: 'Northeastern University'}
    		}]
        }
});

With a bit more work, we could have the many offerings of the Google Maps API integrated for easy usage with ExtJS. For now the functionality thats missing can be accessed using the ‘getMap’ handler.

Take a look at the code, see how to use it, or just play with the example.

Shortly after Aptana released Jaxer, a new server-side JavaScript platform, I was able to spend some time running Ext JS code on the server-side. Jaxer facilitates a tightly knit integration between the client and server by allowing you to include JS code that will be run on the server, client, both, or as a server-proxy. The server-proxy allows Jaxer to wrap client and server-side communications up allowing either synchronous or asynchronous calls between the client and server. Jaxer provides a means for file, database or even socket access as one would expect from a server-side platform. Check out Aptana Jaxer for more details on how you can leverage your JavaScript skills on the server-side.

Jaxer Store and the Ext Grid

Download the complete source for these examples if you would like to setup the code on your own Jaxer server. This first example shows off a very simple wrapper around an Ext.data.Store and the corresponding Jaxer server code.

JaxerStoreServer.js contains a simple server side function that builds and executes a query. It assumes that you have already properly configured Jaxer’s config.js to point to the corresponding database. Notice that no server-side post processing is involved as it natively returns a JSON object.

function ExtJaxerProxy(params) {
   var fld = [], q = [];
   var fields = params.fields;
   for (var i = 0; i < fields.length; i++) {
       if (typeof fields[i] == 'string') {
           fld.push(fields[i]);
           q.push('?');
       } else if (typeof fields[i] == 'object') {
           fld.push(fields[i].name);
           q.push('?');
       }
   }
 
   var qp = fld;
 
   var query = 'SELECT ' + fld.join(',') + ' FROM ' + params.table;
   if (params.sortInfo) {
       query += ' ORDER BY ' + params.sortInfo.sort + ' '
               + params.sortInfo.dir;
       qp.push(params.sortInfo.sort);
       qp.push(params.sortInfo.dir);
   }
   if (params.start && params.limit) {
       query += ' START ' + params.start + ' LIMIT ' + params.limit;
       qp.push(params.start);
       qp.push(params.limit);
   }
   return Jaxer.DB.execute(query);
}

JaxerStore.js contains a very simple Ext data store to deal with connecting to Jaxer. This utilizes the built in ‘Async’ function that Jaxer wraps around all functions contained in a ’server-proxy’ include.

Ext.data.JaxerStore = function(config) {
   var params = Ext.apply({
       fields : config.fields,
       table : config.table
   }, config.baseParams || {});
 
   Ext.data.JaxerStore.superclass.constructor.call(this, 
       Ext.applyIf(config, {
       reader : new Ext.data.JsonReader(Ext.apply({
           root : 'rows'
       }, config.readerConfig), config.fields)
   }));
   ExtJaxerProxyAsync(this.loadData.createDelegate(this), params);
};
Ext.extend(Ext.data.JaxerStore, Ext.data.Store);

Make sure both files are being included on your page, along with Ext.JaxerStore should be running in the client and JaxerStoreServer should be running as a ’server-proxy’. With the Jaxer store and server proxy in place, it’s only a matter of creating an instance of the store and hooking it up to a component that can use the data. Here we create the Jaxer store (notice that it now requires an additional table parameter), then we create a simple GridPanel and pass along our new-fangled JaxerStore.

Ext.onReady(function() {
   var store = new Ext.data.JaxerStore({
       table : 'demo',
       fields : [
           {name : 'name'},
           {name : 'phone'},
           {name : 'email'}
       ],
       readerConfig : {
           sortInfo : {
               sort : 'name',
               dir : 'asc'
           }
       }
   });
 
   // create the Grid
   var grid = new Ext.grid.GridPanel({
       store : store,
       columns : [
           {header : "Name", sortable : true, dataIndex : 'name'},
           {header : "Phone #", sortable : true, dataIndex : 'phone'},
           {header : "Email", sortable : true, dataIndex : 'email'}
       ],
       viewConfig : {
           forceFit : true
       },
       stripeRows : true,
       height : 350,
       width : 680,
       title : 'Jaxer Demo Grid',
       renderTo : Ext.getBody()
   });
});

Server-side Ext.(X)Template

This second example shows off actually running some Ext code on the server-side to take advantage of Ext’s template system. For this example I changed the JS includes for ext-base and ext-all to include a runat=”both” attribute so that the Ext library is available on the client and the server side. The html page includes a simple empty div with an id of ‘posts-main’ and a call to window.onserverload = loadPosts(). The loadPosts function simply selects some data from the ‘posts’ table in the database, then runs that data through the Ext.XTemplate. The XTemplate then loops through the rows array that Jaxer queries provide and will create the div/h2/p structure for each row. A quick formatting function lets us add a nice little ‘more’ link for those posts that are too long.

function loadPosts() {
   var vals = Jaxer.DB.execute('select id, title, body, perm from posts');
 
   var tpl = new Ext.XTemplate('<tpl for="rows">',
           '<div id="post-{id}" class="post">',
           '<h2><a href="/jxtest/post/{perm}">{title}</a></h2>',
           '<p class="post-body">{body:this.formatBody}</p>', '</div>',
           '</tpl>', {
               formatBody : function(val, all) {
                   if (val.length > 300) {
                       return Ext.util.Format.ellipsis(val, 300)
                               + '<a href="/jxtest/post/' + all.perm
                               + '">Read More &raquo;</a>';
                   } else {
                       return val;
                   }
               }
           });
 
   tpl.overwrite('posts-main', vals);
}

In Conclusion

We can see that Jaxer lets developers leverage the hard work which has already been spent building client-side libraries on the server-side. These simple examples show off some of the true potential of utilizing the Ext JS framework on the server-side.

Download the source code for the examples in this post.

If I had done the product marketing for the Wii web browser – and its probably a good thing I didn’t - I would have called it the “Wiib Browser”, however those smart guys at Nintendo came up with “The Internet Channel”. From a consumer standpoint their version is probably better, but enough about that.

The Wii’s browser is running on a custom built version of Opera 9. ExtJS supports Opera, so everything works the same as it would in a normal PC based web browser. With a complete JavaScript engine, its just as good as the full fledged Opera browser. Im not expecting any enterprise quality applications to be developed for use on the Wii, but it would be nice to use some of the ExtJS features to catch up on our blog, read the forum, or just drag windows around using the Wiimote (much more fun than it sounds).

What Do I Need to Do?

The things we have to take into account when creating an ExtJS site for the Wii are screen resolution, font sizes and input limitations. A typical Wii user is sitting further away from the screen than the PC user and to top it off the resolution is much less. The Wii in standard TV mode (480i/p) runs in one of two resolutions:

• 16:9 (800 by 472)
• 4:3 (800 by 628)

So we need to account for resolution, which is also not as straight forward as it should be. The Wii browser has a toolbar that may be shown all the time, or use an ‘autohide’ feature. The screen resolution is reported differently based on whether the toolbar is showing or not.

Another obstacle is that televisions tend to crop the edges of the screen off. The Opera Wii browser tries to compensate for this by adding space to the top and bottom of the screen. As you can imagine, an ExtJS viewport would have its edges off the sides of the screen, and the top and bottom are left with extra space.

Meet the Wii Layout

Ext.ns('Ext.ux.layout');
Ext.ux.layout.wii = Ext.extend(Ext.layout.FitLayout, {
    setItemSize : function(item, size){
        var viewSize = Ext.getBody().getViewSize();
        this.container.addClass('ux-layout-wii');
        item.addClass('ux-layout-wii-item');
        size.height = (viewSize.height-60);
        size.width = (viewSize.width-60);
        item.setSize(size);
    }
});
Ext.Container.LAYOUTS['wii'] = Ext.ux.layout.wii;<

Using a fit layout, centering it, and moving its edges inward does the trick. A bit of code to decide which layout to use based on the user agent, and were done.

    Ext.isWii = navigator.userAgent.toLowerCase().indexOf("wii") > -1;
    var layout = 'fit';
    var title = 'Normal';
    if (Ext.isWii) {
        layout = 'wii';
        title = 'Wii';
    }

Big Fonts

What would be considered a normal size font on a computer is rendered almost unreadable on a television, so we need to crank up the font size. This can be accomplished by using a “tv” targeted stylesheet.

<link rel=”stylesheet” type=”text/css” href=”wii.css” media=”tv” />

Input Limitations

There are some basic input limitations because there is no keyboard, so when designing Wii sites, we need to be sure to not require the use of combinations of keys, or special keys. For example, the functions keys are not available on the Wii, and pressing a ctrl combination would be impossible. Another thing to keep in mind is that the user cannot press enter, so things like form fields that perform an action on the enter key would be unusable.

Wii Migration

I cant imagine many of the typical ExtJS users updating their ExtJS applications to be Wii compatible, but what I do see is a way to improve the usefulness of the Wii. I could sit on my couch (remove the laptop from my lap) and use the rich ExtJS features I have grow accustom to.

See the Wii forum reader in action. If your viewing it from your computer then you will see a normal panel with grid, but from a Wii it will use the Wii layout along with larger fonts.

Ext JS is pleased to announce the Ext GWT 1.0 beta4 release. This release includes numerous enhancements and bug fixes since the beta3 release and is a recommended upgrade for those using beta 3. For first time users of Ext GWT, the new Help Center includes new articles to get you setup up and running your first Ext GWT application in GWT.

GWT RC1

GWT RC 1 was released recently. Ext GWT beta 4 is compiled and tested using RC1. Ext GWT utilizes the new Animation classes, as well as the new DOM API.

Performance

Many classes have been refactored to enhance their performance. Layouts in particular will receive a huge performance boost by upgrading. Initial rendering times are quicker and the new layout code reacts quicker to window resizing. Other performance improvements were made to TabPanel and Table.

Advanced Form Layouts

With beta 4, it is possible to create multi-column forms and to also embed child containers such as TabPanel. These layouts are supported by both AnchorLayout, and the new ColumnLayout. A new Column Form and TabPanel Form have been added to the Explorer Demo.

Mail Demo

A new mail application has been developed as an Ext GWT reference application. This app can be found in the samples directory of your download and will be updated with each release to illustrate best practices in an Ext GWT application. The code demonstrates:

• Data loading with GWT RPC
• MVC
• Custom components
• Stores and Binders

Improved Data Loading, Store, Binder, and Field API

A number of enhancements and updates were applied to the data related classes. More information on data loading can be found in the Help Center.

Documentation

A new Help Center is now available and will serve as the repository for GXT documentation. Beta 4 adds a significant amount of new documentation including a new Eclipse Help Plugin. New articles and tutorials have been added. This includes:

• Project Setup Guide
• Building from SVN Guild
• Component Reference
• Data Loading Reference
• LayoutContainer Reference
• Remote TreeTable Tutorial

In addition, a new Eclipse Help Plugin is available. All the above listed content can be integrated into the Eclipse Help Info Center. The plugin is available via the new Update Site.

The Ext GWT API is now available with integrated UML diagrams. These diagrams make it easy to visualize the package structure and details of all Ext GWT classes. The diagrams are available in the Help Center under Reference.

Download

To download the beta 4 build or view the full release notes (API changes documented), please visit the Ext GWT download page. To find out more about Ext GWT and view the latest beta 4 samples, please visit the Ext GWT overview. To see beta 4 in action, take a look at the Explorer Demo or the Mail Demo.

Last week I had the pleasure to sit down with the team at Red Sun Systems to have a demo of VersoChat, their website chat management application. This is a very interesting tool that allows visitors to request chats with site operators, and for operators to push chat requests to site visitors. The console application includes many features for monitoring site usage, managing and transferring chat sessions, etc. and the UI looks fantastic! VersoChat is an existing application, but they have recently retooled the user interface from the ground up using Ext 2.0 and are launching the new version this week.

Tell us a little bit about VersoChat and how it evolved from its original version.

VersoChat is a web-based, multi-platform live chat solution with real time analytics for businesses with websites. Originally, VersoChat used simple PHP/MySQL scripts for both the font and back ends. Each chat session had to be opened in a separate browser window, and the live monitor was missing some of the functions that now are possible thanks to Ext. With Ext everything has changed. The UI is much more intuitive and easy to learn, and we implemented a lot of new features. For example, ChatTabs (multiple chats can be now handled in one window), GeoIP, IP labeling and many more great features are now possible that make VersoChat a top notch solution for live chat! VersoChat currently is only web-based, but now with Ext enabled our possibilities are endless and we plan to create a downloadable version with Adobe AIR in the near future.

Did you evaluate other JavaScript frameworks when starting work on VersoChat? Why did you choose Ext?

Our general development experience was very good. Our live chat application was built in PHP and we wanted to have a robust, responsive and desktop-like front end for the new version of our application. We compared various JavaScript frameworks and found Ext’s features most suitable to our requirements because the widgets were extremely good-looking with professional quality. And most of the widgets we needed like panels, grids, forms etc. were available out of the box which made it a lot easier. When I came across your website and saw the BorderLayout example, I just fell in love with it and thought: “Where were you Ext when we started development on the first version of VersoChat?”

How does Ext fit into your overall application architecture?

The main work was in porting an already working application (chat support system) to Ext. So our work was really on the front end side of things along with changing the back end code output to suit our new AJAX needs. Our application still has PHP/MySQL as the back end, and Ext serves the front end. As our application was already running, there were some problems and issues in porting it to Ext, but those were gradually solved.

The VersoChat operator console is a pretty complex application. How did you manage the coding complexity?

It is true that the VersoChat operator console is a complex application, but given the power of Ext, it was not much of a problem. We mainly required grids for presenting user data and forms for getting input from the user. Ext’s Grids, Forms and Tabs made programming a lot easier. Much of the AJAX request handling, error checking and validation was easily and gracefully handled by Ext.

What features could we add to Ext to make building a rich application like VersoChat easier in the future?

Tab panels don’t support title/header which is required in certain circumstances. Size of Ext is an issue but considering the functionality it provides, you can’t really complain. And once the things load the performance is always good afterwards.

Do you have any advice for developers just starting out with Ext for the first time?

Learning Ext can be a bit intimidating in the beginning due to its steep learning curve but I guess that’s true for every framework out there. So be patient! Layout implementation is a major part of this framework and many issues can be solved just by using the right layout for parent and child elements, so try to understand the Layout structure of Ext.

Yesterday while working on our internal support system I had a desire to organize the fields on a form a little better. I didn’t want to use a FieldSet and add full wrapping or another layer of indention in my form code (it’s indented deep enough!) so I decided to give the standard Panel title config attribute a try.

The Panels on my form were using baseCls:’x-plain’ which strips all styling except for required attributes for Ext layouts to function (e.g. overflow:hidden). As expected, the Panel titles looked pretty hideous with no styling. I came up with this simple, short solution and figured I would post it since others might find it useful. Although this application is running on an Ext JS 3.0 dev version, this code will work fine with Ext JS 2.x as well.

Getting started

First, I added some config options to the Panels:

{
    xtype:'panel',
 
    // add a title
    title:'Subscription Details',
 
    // make it collapsible 
    collapsible:true,
 
    // no animation, it looks odd (IMO)        
    animCollapse: false,
 
    // Clicking the title should trigger collapse/expand
    titleCollapse:true,
 
    // No collapse tool button needed
    hideCollapseTool: true,
 
    // generate markup with a custom prefix 'form-group' instead of x-panel or x-plain    
    baseCls:'form-group',
 
    ...

Hideousness

This technically worked, but wasn’t very aesthetically pleasing:

Add in some CSS…

So I added some CSS to my application’s CSS file:

/* add some padding so it spaces nice and relative elements dn't get clipped */
.form-group {
	padding-bottom:5px;
	overflow:hidden;
}
 
/* Simple blue border */
.form-group .form-group-header {
	padding:0;
	border-bottom:1px solid #c3daf9;
}
 
/* Position the text element so it appears over the border added above */
.form-group .form-group-header-text {
	font-size:11px;
	font-family:tahoma,arial,sans-serif;
	line-height:13px;
	text-transform:uppercase;
	position:relative;
	left:5px;
	top:5px;
	padding:1px 5px 1px 20px;
	color:#4e79b2;
	background:#fff url(../images/form-collapse-icon.gif) no-repeat 2px 0;
}
 
/* Copied from x-plain (for IE + layouts to work) */
.form-group-body {
    overflow:hidden;
}
 
/* Copied from x-plain (for IE + layouts to work) */
.form-group-bwrap {
    overflow:hidden;
    zoom:1;
}
 
/* Change the toggle icon when collapsed */
.x-panel-collapsed .form-group-header-text {
	background-position: 2px -15px;
}

Extellent!

I’m not a designer, but I was pretty happy with the result:

Reusable

I personally can’t handle setting all those config options on every form group I create and I really need the code I am working with to stay clean, so I created this simple extension:

Ext.ux.FormGroup = Ext.extend(Ext.Panel, {
	collapsible:true,
	animCollapse: false,
	titleCollapse:true,
	hideCollapseTool: true,
	baseCls:'form-group'
});
Ext.reg('formgroup', Ext.ux.FormGroup);

So now when I want to add a form group, it’s as simple as using a different xtype and setting a title:

{
    xtype:'formgroup',
    title:'Subscription Details',
    ...

Resources

The CSS sprite image used for the expand/collapse icon in the CSS above is available here.

With our recent change to the GPL v3 some concerns have been brought up by the Ext Community. We are hoping to address some of those concerns via community discussion of two new FLOSS exceptions.

The first step for us is the Open Source License Exception for Extensions. It is currently in draft status and we are seeking input from the community before we have it finalized.

The intention of this exception is to allow for more liberal licensing of extensions, language packs, themes and open source developer toolkits and frameworks for Ext libraries under a variety of open source licenses. (Note: this exception is not for applications and does not grant any exception for the library itself. A FLOSS exception on the libraries for open source applications will be addressed in the exception discussed in “Next Up” below).

The discussion is here:

http://extjs.com/forum/showthread.php?t=33891

The latest draft is here:

http://extjs.com/products/ux-exception.php

Please chime in and provide input and feedback.

Next Up

After the Extension Exception is complete, the next step will be drafting a FLOSS exception similar to the one by MySQL AB for both Ext JS and Ext GWT:

http://www.mysql.com/about/legal/licensing/foss-exception.html

This exception will be for open source applications that use Ext JS. It will have a few distinct additional grants the Extension Exception doesn’t have (e.g. “bundling” will be ok) but won’t be applicable to extensions or toolkits, as that’s what the Extension Exception is for.

We would appreciate any input and feedback you can provide on it as well. We expect to move quickly and we will let the community know when there is a draft ready for review and input.

Once both those are complete, we also hope that those that participate in their review and drafting can also help us to create an FAQ explaining what they cover, how they work, etc by contributing questions that will be asked by open source developers looking to use them.

Summary

The community speaks very loudly and we have heard you. We are hoping these exceptions will not only provide for continued usage for open source users that are not able to use GPL code in their projects, but also with greater open source license flexibility than has ever been available for Ext JS.

Ext JS is pleased to announce the latest release of the Ext JS toolkit and the introduction of a new product, Ext GWT 1.0 (beta 1). The Ext JS version has been updated to 2.1 and includes new components, performance improvements, bug fixes and documentation enhancements. Ext GWT 1.0, is a Java library for building rich internet applications with the Google Web Toolkit (GWT).

Ext JS 2.1

Performance Improvements
Portions of Ext JS have been refactored to optimize performance including core functionality which will benefit the entire library. Many people will see significant performance gains when upgrading to 2.1 from 2.0.2. The typical Ext JS application will use much less memory, and many applications will see a memory usage improvement of over 300%! 2.1 is fully backwards compatible.

Slider
The slider component supports vertical and horizontal orientation, incremental snapping, tooltips, custom styling and a lot more. Check out the new slider example page.

StatusBar
The StatusBar can be rendered into any panel or window, providing a standard area for status text and icons indicating what’s happening in your application. The StatusBar supports automatic “busy” notification for indicating in-process activity, and can also be easily extended and customized as in the screenshot below. It also supports all standard Toolbar items. Try out the interactive example yourself (there’s also a great new example of customizing the StatusBar via a form validation plugin).

First-Class REST Support
Developers using a RESTful architecture will be excited to know that Ext JS now has full support for all HTTP verbs (no longer just POST and GET). We’ve also added support for passing in additional header information to ease integration with server-side platforms.

Examples and More Examples
We have added a much improved example explorer for Ext JS, in addition to a brand new one for Ext GWT, along with the site re-design. You can find several new Ext JS examples indicated by the red “New!” text appearing by the description. There are several notable new examples that you may have missed:

Grid Filtering: Filter your grid using specifically-typed filter controls that plug directly into the grid header. Special thanks goes to community member ambience for contributing his user extension so that it could be distributed directly with Ext JS.

Layout Browser: Includes examples for each standard Ext layout, several custom layouts and combination examples.

Custom Drag & Drop: Enabling drag and drop between a DataView and a grid using DragZone and DropZone extensions. Thanks goes to Nige “Animal” White for putting together this sample.

Consult the 2.1 release notes to get a complete listing of all changes.

Ext GWT 1.0

Ext GWT 1.0 is a Java library that enables developers to create web applications built in pure Java. You can leverage your existing Java skills to create full featured applications in Java using your favorite Java IDE and tools. Code, debug, refactor, and test your Ext GWT applications as you would any other Java application.

Ext GWT has a number of high performance, customizable widgets that provide a great foundation for building your applications. Let us worry about cross-browser issues, html and CSS. Ext GWT is more than just widgets. Ext GWT includes a convenient model abstraction allowing your domain object to be passed transparently between server and client side components. Building a complex application? Ext GWT includes a hierarchical MVC implementation with full history support.

Ext GWT is a native GWT solution using the latest GWT release and takes full advantage of GWT 1.5 and Java 1.5 features.

Ext GWT includes:

• High performance, customizable UI widgets
• Full theming support with standard CSS
• Well designed, consistent and fully documented source code
• Native GWT solution with no external JavaScript or 3rd party libraries
• Full remote procedure support using GWT RPC, JSON, and XML
• Support for Java 1.5 features, including generics, enums, and varargs

GPL License

Until version 2.1 Ext was released under it’s own license, the “Ext License”. That license granted usage (provided certain conditions were met ) under the LGPL license terms. The CSS and images (”Assets”) distributed with Ext before 2.1 had a license all of their own which was not open source compatible at all. We received quite a bit of negative feedback from some prominent members of the open source community about our license not being friendly for open source projects. Some even said Ext was not open source at all since these licenses did not offer the same freedoms that standard open source licenses offer. Since we have been an open source company since our inception, these comments and concerns struck home and we felt a need address the issue.

We are pleased to announce that all of Ext JS 2.1 is now available under the GPL v3. We anticipate this will allow broader usage in open source software and should make licensing questions and choices much easier. To help answer general questions people may have, we have added some useful pages to the extjs.com website: Licensing Overview and Dual Licensing Model.

Ext JS 3.0

We are also pleased to announce that an early rev of Ext 3.0 has hit the SVN trunk! This is pretty early code (release date expected towards end of ‘08) but here are some demos to give an idea of some of the things we have already added. We have big plans for Ext JS 3.0 and I think it is moving in the right direction!

ListView

A high performance tabular view based on the DataView class for when a GridView is overkill.

Button

New super-flexible button implementation.

Toolbar

New grouping in toolbars and enhanced button support.

Toolbar Overflow

Dynamic overflow of toolbars to a menu similar to expected behavior on Windows.

The team at Spket Studio continues to enhance their Eclipse-based Spket IDE announcing today the release of Spket IDE 1.6.11. Of special interest to Ext developers is the new Ext Theme Builder included in this new Spket release.

The new theme builder provides a very simple method of changing the colors for theme by using a slider to adjust to the desired color. Simply drag the slider until you’ve reached your desired color and choose the export option. The Spket theme builder handles the rest. By combining the Spket plugin with Aptana’s Studio IDE, you now have the ability to greatly enhance the development cycle by using Aptana Studio’s professional suite of editing tools with Spket’s theme builder.

More Options

The Spket Theme Builder is a great new tool for those wishing to have a unique look-and-feel for their Ext applications. Back in early March, we also posted about the various community-driven themes and how Ext developers continue to extend the Ext UI with their own personal touch. More themes have been released since then so it’s important to keep an eye on the Ext user forums for updates.

In addition, the Ext team can assist in customizing applications to suit your specific color schemes. The themes included in the standard Ext framework are excellent choices for many developers but we realize that in many cases, you’ll may want to have a customized theme that matches a specific brand, marketing campaign or corporate guideline. Through the use of our Expert Services, we can tailor the look-and-feel of your Ext application to match your individual needs. In addition, we can also assist in creating a complete user interface for your Ext application. With extensive experience in RIA design and layout development, we can create application layouts that are unique to your target audience and business requirements.

If you’d like to get more information on how the Ext UI team can assist, please contact us at services@extjs.com.

One thing we plan to do more often is focus on how Ext is being implemented by real companies doing real business. As a perfect example, we recently ran across a company called Jama Software whose flagship product, Contour, a fully web-based requirements management application, sports a complete Ext-based user interface from top to bottom. It’s easily one of the most sophisticated and visually polished Ext applications we’ve seen yet. We decided to find out more about Contour, so we interviewed 2 of the co-founders of Jama Software, Sean Tong and Derwyn Harris, who lead the Contour development team.

Tell us a little bit about Contour and your goals for the application.

Contour is designed to provide project teams a collaborative approach to requirements management. Traditionally, requirements were locked away in massive specification documents or bulky proprietary desktop apps that only a few people on a team controlled and these approaches too often resulted in frustration, errors and delays. We wanted to provide an alternative that embodies much of what Web 2.0 is all about, where the application is 100% Web-based – unlocking the requirements, use cases and other items, giving everyone instant access to the system and thus enabling teams to work faster.

From a developer’s perspective we wanted to build an application that was light-weight and flexible, which meant that the architecture had to be designed such that sections could be ripped out and changed. The UI has always been the hardest part.

You must have evaluated other popular JavaScript libraries when starting work on Contour. Why did you choose Ext?

When we started building Contour about 2 years ago we knew we wanted a rich interface and actually debated using Web Start or XUL. However we ended up using Spring, Hibernate, and JSP simply because it was what we knew best. We continued to pursue alternatives to making the UI richer and came across DWR which opened our world to Ajax. We then started evaluating different JavaScript libraries for the UI and finally settled on Dojo…Ext never even came up.

A year or so later with Dojo fully in place, Dojo announced it was developing their .9 with little or no support for .4 which we were on. Knowing there was an imminent migration it was as good a time as any to re-evaluate our choice. Around this same time a buddy of mine mentioned Jack Slocum and Ext. The documentation, UI and support were impressive so we did some evaluations and decided to switch to Ext. Our choice came down to documentation, layout, tree, and grid support.

What has been your experience so far using Ext in your project?

The documentation has been wonderful, the code is clean and the structure makes sense. It seems well thought out. The forum is very active and the Ext team is doing a wonderful job to respond to questions quickly. The community as well is quite involved in sharing best practices and tips which is always a good sign. When we have questions, we can usually find answers in either the API or the forum.

The migration of Contour from Ext 1.1 to Ext 2.0 took us more than 2 months, which is longer than what we expected. But we think the effort was worthwhile since Ext 2.0 is faster, cleaner and more consistent. We certainly hope future migrations such as 3.0 will be easier.

How does Ext fit into your overall application architecture?

Ext is 100% of our UI at this time. Basically our architecture is such that our UI is almost purely Ajax driven which provides a clean separation from UI logic and Server Logic. Our backend is developed using Spring, Spring MVC and Hibernate. The communication between client and server is through DWR. We have built 180+ custom Ext widgets for forms, dialogs, grids, trees etc. and the main application is a single HTML-less page.

We see a lot of opportunity to open our application up with Web Services and plug-ins. Ext’s architecture being configuration driven makes it possible to fit in our future plug-in framework.

What’s missing in Ext, or what do you wish it did better?

The biggest areas we’d like to see are best practices for memory management (e.g., properly destroying widgets, managing memory leaks, etc.), and continued enhancements to layouts and forms (enhanced layout flexibility when designing complex forms, integrated support for hiding/showing fields based on configuration rules, etc.).

Do you have any advice for developers just starting out with Ext for the first time?

Ext has great documentation. Pouring through all of that is essential. It’s clear and very helpful. Then check out the examples, reading the source to see how it is done. Then start creating your own, checking the API and forums for help.

ColdExt project lead Justin Carter announced today that he has enabled a new ColdExt Wiki to begin organizing the project’s documentation and tutorials:

“The ColdExt Wiki is now enabled on RIAForge and I have started out with baby steps by writing a Getting Started Tutorial which covers the absolute basic requirements of getting up and running with ColdExt.

I have a number of pages and tutorials planned for the wiki (some of which I have already made notes of on the wiki home page) and will get around to adding them as soon as I can. If anyone would like to help out with documentation (rofl!) or start a discussion about what documentation is needed the ColdExt Forums could be a good place to do it. I am open to suggestions!”

In addition, Justin recently released beta 1 of the ColdExt ColdFusion library which serves as a wrapper to make server-side use of the Ext framework easy for ColdFusion developers. Some of the newest features include:

• 7 new tags, 3 new grid demos
• 90%+ of the tags have been updated with inline documentation
• EditorGridPanel provides support for editable grids (only supports input and comboBox fields at this time, more to come very soon)
• GroupingStore and GroupingView can now be used for grouping in both GridPanel and EditorGridPanel
• GridRowNumberer can be used as a numbered column in Grids (though it doesn’t support paged grids - by design from the Ext Team)
• New <ext:html> tag for including arbitrary chunks of HTML inside panels and forms
• Tags which don’t require a closing tag will now work as a single tag without a trailing slash (partial support)
• Tags which require a closing tag will throw an error if the closing tag is missing (partial support)
• Initial implementation of attribute validation in some tags (starting with the panel tags to assist with rendering issues)
• Support for including the Ext debugging JS
• The bundled version of CFJSON has been updated to the latest v1.9
• CFEclipse tag insight (/dictionary/coldext.xml)

ColdExt Beta 1 can be downloaded from RIAForge.

Ext Core Team member Jozef Sakalos has a great reputation in the community for building exciting extensions to the Ext framework. His latest creation doesn’t disappoint and continues along his well-known path of building extensions that just make sense.

Ext.ux.FileTreePanel

Allowing users to manage files remotely is a very common use case providing tremendous flexibility for applications that need to handle various files such as images, word processing documents, or spreadsheets. Ext.ux.FileTreePanel is a widget which can be used within Ext to provide easy file management of a directory structures stored on a server. Leveraging the ubiquitous tree metaphor, the component makes it easy for users to understand how directories are structured and which files are included within a tree node.

Saki added a tremendous amount of functionality allowing:

• Files to be dragged and dropped to different folders
• Renaming of files and folders
• Deletion of files and folders
• Creation of new folders
• Uploading of multiple files
• Opening files
• Download of files

How It Was Built

Taking a very modular approach, Saki built the FileTreePanel component using 5 independent classes, each of which is usable outside of the FileTreePanel component:

Ext.ux.FileUploader:
This class is responsible for file uploads and has no UI. It has to have configured a store with some mandatory and some optional fields that contains mainly references to file input elements that hold file names to upload. It feature two modes of upload. Single upload mode takes all inputs from store, creates one form, appends inputs to it and uploads files in one single request. Multiple upload mode creates one form for one input and uploads each file in its own request.

Other features:

• extends Ext.util.Observable
• start/stop all or individual uploads
• set path to upload to
• full set of events, both for individual files and whole upload
• upload progress support (not working for more than one file with PHP uploadprogress backend)
• client/server communication specification is same as for my Ext 1.x version

Ext.ux.UploadPanel:
Provides user interface to the above uploader with a couple of buttons, DataView to display the upload queue and status of files and mainly the store used by both DataView and FileUploader. UploadPanel was designed to fit to a menu therefore it is small and narrow by design.

Other features:

• extends Ext.Panel
• add files to queue, queue display
• remove files from queue one-by-one or all at once
• UI to stop whole upload or individual files
• icons for many file types
• icons for status of files

Ext.ux.FileTreeMenu:

The (context) menu for FileTreePanel that contains UploadPanel for file uploads and other items for basic file operations such as:

• various open modes
• create folder
• rename file/folder
• delete file/folder
• upload file
• reload/expand/collapse of tree nodes

Ext.ux.FileTreePanel:
The server file tree UI that integrates everything together.

Features:

• extends Ext.tree.TreePanel
• file type icons for many file types
• inline editing of file/folder names
• drag & drop operations
• context sensitive context menu
• optional top toolbar in addition to context menu (especially good for Opera users)

Saki also used the Ext.ux.BrowseButton by loeppky because “it is good and working and because loeppky promised support and debugging if necessary”.

Suggestions for Saki and Contributing to the Code

Saki has posted about FileTreePanel on the Ext forums and this is the best place to ask him questions about his new extension and even contribute to future enhancements. The extension is currently in a beta phase but Saki has mentioned that the code is very stable and usable.

Saki is one of many contributers to the Ext Community Forums which are both helpful and excellent contributors to the community. The User Extensions and Plugins section is constantly updated with new and exciting extensions for every type of functionality imaginable.

The Ext JavaScript library is a robust framework encompassing components for many typical development needs. With support for DOM traversal/manipulation, UI controls, data binding and more, Ext provides the hooks and tools to help build engaging applications.

We’re frequently asked about online resources that can help developers become more proficient with Ext. There’s a wealth of information provided on the Ext Learning Center section of our website that can be extremely effective in helping Ext developers become more proficient in the framework.

Hosted Tutorials

The Ext Learning Center is one of the best places to get material to learn about Ext. The tutorials cater to both new and experienced Ext developers and cover a broad range of topics including application design, DOM manipulation using DomQuery, Drag and Drop and Grid implementation to name of few. If you’re new to Ext, you definitely want to start off with the Introduction to Ext 2.0 tutorial. It’s an excellent starting point which highlights the usage of some very important features and helps to build the foundation for you to work from.

Advanced developers can take advantage of other tutorials such as Extending an Ext Class or Writing Ext 2 Plugins. These tutorials, along with several others, are clearly geared towards advanced Ext developers and are designated as such.

“In the Wild” Ext Tutorials

A number of developers have created some great tutorials and examples on their personal sites. Here are just a few tutorials found via Google which cover a variety of topics and development platforms:

• ColdFusion 8 Grid Context Menus
• ColdFusion 8 Grid Context Menu Part II
• ColdFusion 8 Grid Custom Toolbars
• ColdFusion 8 Grid Filtering
• CF8 Ajax Grid: Renderers and Events
• Ask Cutter: Calling functions when paging the CF8 DataGrid
• Various Ext Samples
• Creating an Ext JS grid using the Zend Framework
• Drag and drop using Ext JS with the CakePHP Tree Behavior

Again, this is only a small subset of the numerous Ext JS postings that can be found via Google. Remember, Google is your friend.

Ext Sample Applications

One of the best ways to get familiar with Ext best practices is by reviewing code from quality applications. The Ext demo applications, conveniently found on the Ext homepage, are excellent examples of how to use a wide variety of Ext’s powerful functionality. The applications are included in the downloadable version of the Ext JS framework and are an excellent resource for improving your Ext skills.

Ext Onsite Training

If you really want to have a more personal experience, then Ext’s onsite training service is a great solution to get your team ramped up. Conducted by a Ext Core Team member, the onsite training class offers a hands-on, instructor-led environment where developers can learn from an expert. This is by far the best method of getting familiar with Ext as it’s 2 days of intensive training in the core areas of the Ext framework coupled with the ability to get immediate feedback from an instructor. If you’re interested in having an onsite training class, please visit the Ext Training page for more details about the class.

Many Options to Choose From

Providing information to help Ext developers refine their skills is extremely important to the team and hopefully, you’ll now have more resources at your disposal. We will continue to add more resources, both Ext-driven and community-submitted, to the site to help developers build top-notch applications.

A common question we get asked relates to themes and if the look-and-feel of Ext applications can be enhanced further than the stock themes included in the framework. The answer is a resounding “Yes!”. Ext themes are just CSS and images and anyone with a good understand of CSS and image editing software can be as creative as they’d like.

Community Contributions

Several Ext community members have gone through the steps to produce exceptional themes that greatly complement the Ext JS framework and allow developers to have a unique feel for their applications. Some great examples of community contributed themes include:

User madrabaz:

Black Theme [UPDATED 2008-02-15]]

Dark Gray Theme

Purple Theme

Olive Theme

User J.C.:

Slate

User DigitalSkyline:

Peppermint

Chocolate

User Condor:

Themed checkboxes and radio buttons

More Themes Available

So as you can see, Ext is quite extensible in terms of skinning and while not an exhaustive list, the screenshots above demonstrate the possibilities in terms of creating your own look-and-feel for your Ext applications. The Ext forums provide a wealth of information regarding skinning and if you’re interested in seeing more examples of cool themes, be sure to do a simple search for the keyword “theme”.

In collaboration with Adobe, one of the key additions in Ext 2.0.2 was Adobe AIR 1.0 support for running in the application sandbox. Also, the Simple Tasks AIR application sample was rewritten to take advantage of more of the native functionality in AIR and gained some cool custom Ext components that can be used outside of AIR.

AIR APIs

First, lets cover some of the AIR APIs that were used:

NativeWindow
This was one of the most useful additions to the Ext.air package. It provides an API to create windows, manage those windows, listen for events like standard Ext Observables and automatic state management for the windows.

var win = new Ext.air.NativeWindow({
    id: winId,
    file: 'task.html',
    width:500,
    height:350,
    resizable: true
});

Task NativeWindow in Simple Tasks 2

Ext.sql.*
The Ext.data.Store/Record and AIR Sqlite API got an upgrade from the asynchronous database access in the early AIR betas to the synchronous database access introduced in AIR beta 3.

Simple Tasks demonstrates the ease of integration of Ext with Sqlite, using automatic persistence Ext.data.Record instances (e.g. Tasks or Lists) in the database.

tx.data.ListStore = Ext.extend(Ext.data.Store, {
    constructor: function(){
        // superclass call
        tx.data.ListStore.superclass.constructor.call(this, {
            sortInfo:{field: 'listName', direction: "ASC"},
            reader: new Ext.data.JsonReader({
                id: 'listId',
                fields: tx.data.List
            })
        });
 
        this.conn = tx.data.conn;
        // Ext.sql.Proxy for managing Sqlite persistence
        this.proxy = new Ext.sql.Proxy(tx.data.conn, 'list', 'listId', this);
    },
    ...

Native Drag and Drop and Clipboard
Simple Tasks v2 supports dragging any text from any application into the grid to automatically create a new task. You can also paste text from the system clipboard as a new task. However, one of the coolest features is the ability to drag tasks straight from Outlook into Simple Tasks.

Dragging Outlook tasks into Simple Tasks

Minimize to System Tray
After the initial release of Simple Tasks, one of things most requested internally here as Ext JS (yes, we actually use it!) was the ability to minimize to the windows System Tray. We added support to automatically manage the System Tray functionality to the Ext.air.NativeWindow class, so now minimizing to the system tray is as simple as setting a config option.

var win = new Ext.air.NativeWindow({
    id: 'mainWindow',
    instance: window.nativeWindow,
 
    // System tray config
    minimizeToTray: true,
    trayIcon: 'ext-air/resources/icons/extlogo16.png',
    trayTip: 'Simple Tasks',
    trayMenu : [{
        text: 'Open Simple Tasks',
        handler: function(){
            win.activate();
        }
    }, '-', {
        text: 'Exit',
        handler: function(){
            air.NativeApplication.nativeApplication.exit();
        }
    }]
});

Simple Tasks in the System Tray

Sound
AIR also supports playing sounds. Ext.air.Sound makes that even easier.

Ext.air.Sound.play('beep.mp3');

The irritating beeping sound is sure to catch your attention

Ext Custom Components

As noted above, the Simple Tasks application also features some useful samples of custom components in Ext. Some of them were specifically designed to be reusable and may be included as standard Ext components or samples in a future release.

ListTree
This component is similar to a ComboBox or SelectBox except the list of the component is backed by an Ext TreePanel. It makes display and selection within a hierarchical list much more intuitive than a standard flattened list.

Another cool sample that goes along with this component is a custom selection model “ActivationModel”. As the name may suggest, it support 2 forms of selection - activation and selection. With activation, the component supports full keyboard navigation, expand/collapse with the keyboard and unlike the standard tree selection model, selection is an action on it’s own.

TreeList supports selection of data organized hierarchically

Custom Grid Columns
The easiest way to explain is with screenshots.

Pseudo button column, used to toggle complete/active

Menu column, used to set quick reminders

Switch Button
This component is like a radio button seen commonly in desktop applications. It was named “Switch” Button so it wasn’t confused with the radio buttons already found in standard HTML. It provides a collection of buttons, one of which can be “pressed” at a time.

Quick view change

Summary
From AIR specific functionality to Ext extras, there are quite a few real world samples present in the Simple Tasks v2 application. If you are using Ext, I would highly recommend taking a look at the source.

- The full source can be found in the Ext 2.0.2 distribution under air/samples/tasks.

- Adobe AIR 1.0 can be downloaded here.

- The Simple Tasks v2 AIR application can be downloaded here.

- You can read about the first version of Simple Tasks in the original blog post.

With Microsoft’s .Net development platform increasing in both popularity and features, we’re receiving more inquiries than ever as to how clients can leverage the Ext framework within .Net web applications. While Ext, being a client-side framework, has always worked with ASP.Net applications, the team at Coolite has taken Ext & .Net integration a step further.

Introducing Coolite Studio

Coolite, the same team that brought you the very cool DateJS date parsing library, have really embraced the Ext framework creating a suite of ASP.Net controls name Coolite Studio that are based on Ext and integrate with Visual Studio 2008:

“The suite of web controls were built with a focus on bringing full Visual Studio Design-Time support to the Ext JavaScript Framework. A marriage of server-side and client-side frameworks.”

Tight Integration, Extensive Features, Support

The suite of controls will include the following:

• Powerful integration of the Ext JavaScript Framework.
• Full Design-Time support in Microsoft Visual Studio 2005 & 2008 and Visual Web Developer 2005 & 2008.
• Drag-and-drop ease of use.
• Current support for Window, Panel and a many Form Controls including DatePicker, Calendar and HtmlEditor.
• New Controls being added weekly.
• Dual Licensed (LGPL 3.0 and Coolite Commercial License).
• Professional support options available shortly.

Coolite has setup a community forum to help get developers introduced to Coolite Studio and plans to expand their support options in the future.

Coolite Studio is immediately available for download and supports both .Net 2.0 and 3.5.

I regularly hit technorati, DZone and Google looking for recent Ext JS related blog posts. There’s always quite a bit going on in the blogsphere and we are going to start sharing the interesting ones we find here on the Ext JS Blog. Here are some of the ones I have read recently.

Savvy Duck Blog
I was surprised to have just found this blog. Here’s a great quote from the author that made my day:

“My javascript started with Prototype 1.4 , then Dojo 0.4, JQuery, Prototype 1.5, Dojo 0.9, Prototype 1.6 and then settled on Ext 2.0. I kept cycling around because my application needed controls that the library either didn’t provide, and I had to write my own, or the library had the control and then I had to write enormous amounts of code to get simple stuff to work. Ext became a godsend because almost everything was straightforward and I could customize it without having to go really deep into the library’s code nor write a lot of code to get it to work. It took me a matter of weeks to wrap up my first project with Ext. I used it in a second project with a far more elaborate user interface and had it pretty much done in a couple of weeks too. I am still surprised.”.

There’s nothing I like to hear about more than a developer having success with Ext. It’s even better when that developer is willing to share their experiences and insight with others. His blog has quite a few Ext posts and they are all well written. Here are a few of them:

- Mixing Ext’s Grid with JQuery’s Flot

- Introduction to the Ext Grid Object

- Ext Event Handling

- Design Patterns, MVC and Ext 2.0

Brice Mason on AOL Developer Network
Brice has 2 multi-part series of blog posts that cover developing full applications. The latest is built using Ext JS 2.0 in Adobe AIR.

- Adobe AIR Xdrive Picture Syncing: Part 1

- Adobe AIR Xdrive Picture Syncing: Part 2

- Adobe AIR Xdrive Picture Syncing: Part 3

- Adobe AIR Xdrive Picture Syncing: Part 4

- Creating an AOL OpenBlog Reader: Part 1

- Creating an AOL OpenBlog Reader: Part 2

Dan Vega’s Blog
Dan’s blog has a wealth of knowledge about using Ext 2.0 with Cold Fusion. He also posted a nice step by step tutorial about using Ext Forms that isn’t CF specific.

Getting Started with Ext Forms

More Posts

How to use the Ext JS Treeview (Ext.tree) with Ruby on Rails
The title says it all.

One Service Several Stores
Ext Stores with ASP.Net web services.

All about Ext.Button
A nice beginner oriented guide to Ext.Button.

Learn ExtJS AJAX: Defining grid properties at run time
Loading and configuring Ext grids over Ajax, instead of in the javascript source.

Are you blogging about Ext?
If you have written a blog post about Ext, please let us know by sending an email to news@extjs.com and we’ll cover it in the next Community Talk post.

The Ext 2.0 API is very extensive and remembering all of the functions, properties or configs available is virtually impossible. The API documentation is very thorough, but it would be nice if IDEs would provide code assist options in JavaScript as they do in other languages such as Java and C#. Luckily, there are some IDEs and plugins available that do just that — and also have direct support for Ext 2.0.

Aptana Studio
When it comes to IDEs for JavaScript development, Aptana is definitely hard to miss. I personally use it daily for Adobe AIR development. However, the version of Ext (1.1) bundled with Aptana for code assist is a little outdated.

Markus Schmidleitner has created an Ext 2.0 Aptana plugin that works very well. To install it:

• Download and install Aptana Studio.
• Open up your Aptana application directory (for me that is C:\Aptana) and copy the jar file into the plugins folder.
• Restart Aptana.
• Go to Window -> Preferences -> Aptana -> Editors -> JavaScript -> Code Assist and select Ext 2.0 (you may need to deselect Ext 1.1).

Aptana Studio with Ext 2.0 code assist

Spket Eclipse Plugin & IDE
The Spket IDE has by far the most superior code assist for Ext 2.0. It uses the Ext .jsb project file and embedded script doc to build code assist that includes options inherited from base classes and full documentation.

It doesn’t have much for editing other types of files though (e.g. CSS), so my preference is to install it as an Eclipse plugin in Aptana. To install the plugin in Aptana:

• Download and install Aptana Studio (includes Eclipse).
• Start Aptana and navigate the application menu to: Help → Software Updates → Find and Install… → Search for new features to install → New remote site…
• Name: “Spket”, Url: “http://www.spket.com/update/”
• Restart Aptana
• Watch this Spket IDE Tutorial to see how to easily add Ext code assist (you can point it at the latest /src/ext.jsb to keep code assist up to date with the latest Ext version). The steps are basically:
  • Window → Preferences → Spket → JavaScript Profiles → New
  • Enter “ExtJS” and click OK
  • Select “ExtJS” and click “Add Library”, then choose “ExtJS” from the dropdown
  • Select “ExtJS” and click “Add File”, then choose the “ext.jsb” file in your “./ext-2.x/source” directory
  • Set the new ExtJS profile as the default by selecting it an clicking the “Default” button on the right-hand side of the “JavaScript Profiles” dialog.
  • Restart Aptana
  • Create a new JS file and type: Ext. and you should get the Ext Code completion options.

Since you will have installed it as a plugin in Aptana, chances are Aptana will still be your default JS editor. So to try Spket, you need to right click on a file and select Open with -> Spket JavaScript Editor.

Spket in Aptana with full documentation and code assist

Komodo Edit
Komodo Edit has the strongest support for editing multiple types of files, including Perl, PHP, Python, Ruby and Tcl; plus support for browser-side code including JavaScript, CSS, HTML and XML. It’s also available on Windows, Mac OS X and Linux.

To install Komodo with Ext support:

• Download and install Komodo Edit.
• Download the API catalog.
• Go to Edit -> Preferences -> Code Intelligence and select the “Add an API catalog” button below the “API Catalog” section.
• Select the ExtJS API catalog CIX file you downloaded above.

Komodo with Ext JS code intelligence

Dreamweaver
For those using Dreamweaver, there are two plugins available SpketDW (Dreamweaver MX 2004 or higher) and SpketDWCS (Dreamweaver CS3). Both are made by the same team (Spket) as the Eclipse plugin above, so both are very accurate and thorough. One nice feature available in the Dreamweaver plugins is support for config option code assist.

Config option code assist

Members code assist

To download and install, please visit their site.

Other IDEs
There is support for other IDEs, such as IntelliJ and Visual Studio 2008 being actively worked on by the community.

Summary
When working with Ext 2.0, there are quite a few tools available to help boost your productivity. Be sure to check them out. If you know of any other tools we’ve missed, please post a comment and let us know!

There are so many framework choices available today and while many are of excellent quality, for many companies, the decision to go with a specific piece of software comes down to the quality of support and services that they are offered. Knowing that they can get help from someone in case of an issue or receive qualified training is of utmost importance since it helps in decreasing maintenance costs, minimizing developer downtime (due to learning a new framework), and supplementing their staff with expert professional services.

Introducing Ext Services

Ext has been quietly offering services for some time now, basically working towards getting certain pieces in place before formalizing the Ext Professional Services division. Many have probably seen the new link at the top of the site explaining the new services being offered by Ext and now it’s time to officially announce it.

The Ext framework provides the tools for developers to create Rich Internet Applications using standards-based technologies and at Ext JS, we want to ensure that our clients can become immediately successful. Our Professional Services team caters to this need by providing consulting and training services to assist our clients in fully leveraging the benefits of the Ext framework.

Training - Get a Head Start

Being one of the most feature-rich frameworks is definitely an advantage for Ext. The team has given thought to so many use-cases and has incorporated functionality that is commonly used by developers on a daily basis. With such an expansive feature-set and API, it definitely takes some time to get familiar with the ins-and-outs of the framework and having a little help certainly goes a long way. That’s why we introduced the Ext Training Curriculum.

Ext provided a flexible training schedule and focused on our specific areas of interest. Coupled with their top-notch instructors, we were able to become effective immediately.

~ Kevin Hoyt
Adobe

We provide a high-impact on-site course which dives straight into the meat of Ext without all of the rudimentary fluff that’s common in other courses. The courses are typically catered towards the specific needs of our clients to ensure they get the most out of the class. Cookie-cutter curriculum certainly has it’s place but we want to offer a personalized training experience and focus on the things important to our clients.

An intangible benefit is that every course is taught be an actual Ext Core Team member. That’s right. These are the same developers that manage and update the Ext framework on a daily basis. This allows us to maintain good quality control for our courses and reassures our clients that they are are being mentored by a true Ext expert.

Consulting - A helping hand

One of the areas of explosive growth for Ext has been our consulting services. Invariably, there will be times when a client will need a helping hand to get a tough project completed or supplement their staff with a mentor or team that can ensure their project is a success.

EXT-JS is a technology partner who understands our design goals and then delivers innovative technical solutions.

~ Jordan Ellington, President
TransPerfect Deal Interactive

As the developers of the Ext framework, we’re in the unique position of having the most comprehensive knowledge of the Ext framework and the capability to fully customize it to suit a client’s unique business needs. Our projects have spanned several areas including:

• Full application development
• Custom control creation
• Code reviews
• Mentoring and guidance

and in many cases are usually accompanied with training courses to better help our clients be self-sufficient. In fact, one of the newest additions to our training and consulting offerings is the Ext Jumpstart Program. This program provides for 2 days of training followed by 1 day of on-site consulting and mentoring to help our clients get up to speed quickly. On the 3rd day, a Ext Core Team member will work with the client to help build their foundation, develop layouts, understand how to tie things together and, in many cases, develop a working prototype within a couple of hours. This new program has become immensely popular.

Ext Services = Ext Growth

The introduction of our services practice is an extremely important moment for Ext JS. The ability to offer clients services past a simple license or forum support helps to distinguish Ext as a framework which can be leveraged in critical business applications. Many companies want and need to have a certain level of commitment in order to move forward with a technology and we’re providing them with the level of reassurance that we can assist them every step of the way.

To learn more about our services or if you’re interested in scheduling a training session or in need of a mentor, please contact us at services@extjs.com.

The Ext team is happy to announce the release of version 2.0.1 of Ext JS. This is a maintenance release that fixes several issues with the 2.0 release. Some notable issues that have been addressed include:

• Fixed various overflow/scroll issues related to form fields and grid
• Workaround included for the Firefox 2.0/Mac overflow:auto invisible scrollbar bug
• Fixed several issues related to destroying form elements
• Multiple GridView and GroupingView fixes
• Various other minor bug fixes and documentation updates

For complete details on what’s changed, please have a look at the 2.0.1 release notes. We encourage all Ext 2.0 users to upgrade to 2.0.1 at your earliest convenience.

An excellent barometer of a project’s growth and acceptance is the creation of community extensions that complement the project. It’s demonstrative of how users are embracing Ext and in some cases, need to go past what the core framework provides. It seems that almost on a daily basis, new extensions are contributed by volunteer Ext developers, most of which are of excellent quality and functionality.

Server-Side Initiatives

Ext is a client-side framework and is focused at providing a strong foundation for client-side developers. More and more, though, we’re seeing demand from the server-side crowd to offer some form of support from within application server technologies such as ColdFusion, .Net, and Java. Another step forward in the community involvement model is when developers begin to offer integration capabilities for a framework into their own server-side environment. This is something that has really taken off and we’ve seen a number of server-side projects spring up to tackle this demand.

ColdFusion

With Ext v1.0 built into the Adobe ColdFusion 8 application server and powering most of the Ajax-enabled controls, it was obvious that sooner or later, CF developers were going to want to see how they could extend the built-in capabilities of these controls. Being Ext-driven, many developers soon realized that it was just a matter of looking at the Ext API documentation and leveraging the full capabilities of the Ext framework. Unfortunately, ColdFusion included Ext v1.0 which is substantially less feature-rich than Ext v2.0 and with no method of upgrading ColdFusion to the newest release, some very innovative developers took matters into their own hands and created extensions that provide a path to Ext v2.0. Following are three ColdFusion frameworks that have started the work of wrapping Ext into a server-side framework usable by all ColdFusion developers:

• Ext.CFC - Created by Brian Love, this was the first notable component that tried to provide server-side integration with Ext. We posted about Brian’s work on the Ext blog in early December.
• cfExt - Dan Vega was next in line, coming up with a component class that would provide access to the Ext 2.0 windowing capabilities. Several iterations later and after a ton of community feedback, Dan released cfExt which has received a tremendous amount of positive feedback and support within the ColdFusion community.
• ColdExt - The most recent addition, ColdExt by Justin Carter, takes a different approach using a tag-based implementation to expose the Ext API to ColdFusion developers. This is actually a great way of doing things since ColdFusion’s language, CFML, is mark-up based and the use of a tag library should make it very intuitive for CF developers to use ColdExt

As of this writing, Dan and Justin have been in contact and may take steps to consolidate their efforts into one nice project.

Java

The Java language is synonymous with server-side development and a large number of Ext developers use Java daily for their projects. And as should be expected, these top-notch Java developers have taken steps to incorporate server-side support for Ext:

• MyGWT - MyGWT is an open source Java library for the Google Web Toolkit which uses Ext to make all of the UI components look amazing.
• ExtTLD - The brainchild of Jaro Benc, ExtTLD is an ExtJS code generator based on the JEE tag files that provides a XML style component definition as well as a wide IDE support(Eclipse + WTP 2.0, Netbeans, IDEA, etc.)
• GWT-Ext - Developed by Sanjiv Jivan, GWT-Ext is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree’s with Drag & Drop support, highly customizable ComboBoxes, Tab Panels, Menus & Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API

Java developers are notoriously picky about which libraries that they use so these frameworks are a testament to the capabilities of the Ext framework.

Ext Ecosystem

The growth of the Ext community continues to astound us and really helps to motivate the team to continue to enhance the framework. We’re now thinking of ways to make extending the framework easier for our community so that a whole ecosystem can be developed around Ext. Having our users be successful is EXTREMELY important to us and we will continue to look for ways of improving Ext’s functionality and flexibility.

Ajaxian.com recently conducted their third annual survey to determine the usage of Ajax/JavaScript libraries. The survey is a great indicator of the market penetration of several well-known (and some not-so-well-known) libraries and frameworks.

The exciting news is that the Ext framework, for the first time, was added to the list and in it’s first year demonstrated it’s popularity. Of the 2,619 respondents, 22.5% were using the Ext framework ranking it 3rd overall.

“Prototype and Script.aculo.us are the only toolkits to maintain a lead over the past three years. However, over all there are no clear winners or losers as even the strongest incumbents (i.e., Prototype and Script.aculo.us) are starting too loose ground. Some frameworks initially popular have faded nearly completely out of the market (i.e., xajax and Rico ) while others have have sprung out of nowhere to become leading tookits (i.e., jQuery and Ext JS).”

The team is very excited about these results and ecstatic that the Ajax community has embraced the Ext framework so heartedly. We plan on continuing to develop new features that will push Ext to the forefront of Ajax and JavaScript development.

ColdFusion developers are an inquisitive and talented bunch always looking for new ways to extend the language and make it more dynamic and fun. Web developer Brian Love is a great example of this. Brian, who loves the Ext framework, wanted to see how he could ease the usage of the framework within the ColdFusion space while still having all of the great functionality provided by the library.

“The Ext library is packed with tons of cool features, but like most CF programmers, I was initially interested in the Grid Panel. The Grid panel is implemented in ColdFusion 8 using the <cfgrid>, <cfgridcolumn>, and <cfgridrow> tags. Since I started this long before <cfgrid> was a thought, this code will obviously work in CF7.”

Brian states an important fact because ColdFusion v8, Adobe’s latest version of the application server, does in fact include the older Ext v1.0. Two main issues present themselves with this though:

1. Ext v1.0 is is quite dated and isn’t as feature-rich as Ext v1.1.1 or Ext 2.0
2. Users that have not upgraded to ColdFusion v8 are locked out of all of the fun provided by the Ext-based custom tags provided in this new version of ColdFusion

In it’s current state, Ext.CFC provides ColdFusion developers with a CF component that essentially wraps the Ext Grid control within an easy to use tag-based metaphor and exposes calls to the grid within easy to use CFC methods:


extobj = createobject(”component”,extcfc).init();
extobj.initGrid(title=”messages”,path=’http://’&cgi.server_name&cgi.script_name&’?
action=getData’,root=’messages’,id=’id’,defaultSortColumn=form.sort,defaultSortOrder=form.dir);
extobj.initGridFooter();
//extobj.setGridCol(header=’Subject’,width=200,name=’subject’,render=”String.format(’{0}‘, value)”,detailRender=”String.format(’{0}
{1}’, value, record.data['body'])”);
extobj.setGridCol(header=’Subject’,width=200,name=’subject’);
extobj.setGridCol(header=’Sender’,width=150,name=’sender’);
extobj.setGridCol(header=’Sent’,width=150,name=’datetime’);


If you’re not a ColdFusion developer, you may be thinking, “I can do all of that via JavaScript”. Very true but this is all server-side code that eases the learning curve for CF developers that are just getting involved with Ext and would like to extend it out.

Brian plans to extend Ext.CFC to encompass more functionality bringing parity with CF8’s Ajax/UI tags and allowing CF developers to take advantage of the newer version of the Ext framework. Currently, Ext.CFC supports Ext v1.1 and Brian has already committed to updating it to work with Ext v2.0, the latest release of the Ext framework.

To get more information about Ext.CFC and see more demos, be sure to visit Brian’s site where he provides plenty of documentation and samples to get you going with Ext.CFC.

The Ext team is proud to announce that the official release of Ext v2.0 is available for download. This new version of the Ext framework is the culmination of many long hours of work and dedication by the Ext Core team as well as our community of testers and supporters. Ext 2.0 is a dramatic step forward from all previous versions of Ext, providing increased performance, ease of configurations, flexibility and UI capabilities.

We’ve also made learning how to use Ext much easier with a completely revamped document center and expanded & better organized samples. All of this without a significant library size increase in this new version.

New Features

The Ext framework has always been praised for it’s attractive UI components and top-notch foundation. It was important that Ext 2.0 carry on the reputation of providing a great base to build upon while incorporating new features that are unique to the Ext 2.0 framework. These include:

Grouping & Group Summary

Ext 2.0 introduces highly configurable single-level column grouping capabilities as well as summary rollups at the group level. These two additions are critical in decision support (DSS) and report intensive applications. Important to note is that Ext’s grid sorting functionality continues to work as expected, sorting data within each group set as opposed to sorting the whole grid.

The group summaries support multiple types of calculations and are implemented as a Ext.Component plugin which allows Ext users to decorate existing UI components with their own custom functionality.

Scrolling Tabs

The new Ext 2.0 scrolling tabs are truly amazing and provide for a much more flexible UI then traditional static-based tabs. I think Jack says it best:

Call me crazy, but I can sit, click and play with these tabs all day.

The tab metaphor is synonymous, from a UX perspective, with segmenting unique sections of data with the context of a page. With increased demand for data presentation via tabs, without the reciprocal increase in screen real estate, the team took a step back and decided to rethink the way that tab controls should function. The approach was to allow as many tabs as necessary to be created and display them within a scrolling metaphor. By extending the Ext.TabPanel control with a new “autoScroll” directive, all tabs added to the panel instantly fall into the scrollable behavior of the tab panel:

var tabs = new Ext.TabPanel({
    renderTo:'tabs',
    resizeTabs:true, // turn on tab resizing
    minTabWidth: 115,
    tabWidth:135,
    enableTabScroll:true,
    width:600,
    height:250,
    defaults: {autoScroll:true},
    plugins: new Ext.ux.TabCloseMenu()
});

Anchor Layout

A common theme in desktop applications is the ability for form fields to be anchored to fit the size of their container. Unfortunately, HTML & CSS don’t easily lend themselves to this type of behavior, throwing off form element positions unless carefully crafted styles are created. Even with that, inconsistencies across browsers forces even further hacks to be developed to ensure that form elements remained positioned as expected.

The team extended the FormPanel component to allow form controls (and other components) to be anchored to a specific size within a specific container.

var form = new Ext.form.FormPanel({
    baseCls: 'x-plain',
    labelWidth: 55,
    url:'save-form.php',
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Send To',
        name: 'to',
        anchor:'100%'  // anchor width by percentage
    },{
        fieldLabel: 'Subject',
        name: 'subject',
        anchor: '100%'  // anchor width by percentage
    },{
        xtype: 'textarea',
        hideLabel: true,
        name: 'msg',
        anchor: '100% -53'  // anchor width by percentage and height by raw adjustment
    }]
});

The code for this is fairly straightforward allowing flexibility to decide how the height and width of the anchored fields should be affected by a resize of the container panel.

Column Tree

In Ext 2.0, one thing we’ve focused on is providing examples of customizing Ext UI components. The example below demonstrates how easily the Ext tree panel can be customized to add support for columns in the nodes. A prime example of an application the could benefit from this would be a project planner as demonstrated below:

New API Documentation Center

We wanted to make traversing the Ext API as simple as possible and that prompted a substantive revamp of our document center. The new version continues to make use of the intuitive treeview metaphor but great expands on this by taking advantage of the new scrolling tabs feature being introduced in Ext 2.0. By selecting a specific API topic on the tree, a new tab will appear allowing developers to maintain multiple API documents open at one time instead of being limited to only one page at a time. A new search feature has also been added which acts to filter down the treeview based on a keyword entered into the search field.

In addition, each page now contains quick links which will immediately scroll the users down to view properties, methods and events of a specific class.

Finally, a new “Direct Link” feature greatly simplifies the ability to bookmark specific pages of the API by providing a permalink for specific sections of the documentation.

The developer API documentation has been fully updated for 2.0 as well. Along with the newly-designed doc center, it’s now easier than ever to find the help you’re looking for.

New 2.0 Documentation

The Ext Team has been hard at work creating documentation for the 2.0 release. We now have several documents for new and existing Ext users that should come in very handy during the transition to 2.0.

Introduction to Ext

If you are brand new to Ext, you should start with our original tutorial, the Introduction to Ext. This tutorial was created for the original 1.0 release, but has been newly updated for 2.0. This is a great place to start if you’ve never written any code in Ext.
Ext 2.0 Overview
The Ext 2.0 Overview is primarily intended for those with some prior experience with Ext, as it dives into some advanced topics. However, it is a great place to start for anyone just getting their feet wet with 2.0. This overview provides an introduction to all of the major new areas within 2.0 including:

• The new Component Model that underlies all major components
• The new Container and Layout Models that provide the visual and structural framework for Ext
• Updates and new features for the Grid component
• The new XTemplate and DataView classes for template processing and data-bound UIs

Ext 1.x to 2.0 Migration Guide

Existing 1.x users should be happy to see the 1.x to 2.0 Migration Guide. Unfortunately, with changes of the magnitude made in 2.0, it was not possible to maintain complete backwards compatibility to 1.x. However, we have taken great pains to ensure that the upgrade path is as seamless as possible. This guide provides an extremely detailed overview of every breaking change between 1.x and 2.0, including comprehensive explanations of how and why each area changed. It also includes detailed API comparisons between classes when appropriate.

New 2.0 Samples

Prior to this release, the demos for Ext were consolidated into the API viewer making it cumbersome to differentiate what was a demo and what was part of the API document viewer. We have now detached the demos and organized them onto a standalone page. The applications are also grouped into specific subsections to allow Ext developers to drill down into applications that show specific Ext functionality.

Web Desktop Sample

When the Web Desktop sample application was released during the Ext 2.0 beta process, people were astounded by the demo and could instantly see the power to build desktop-like applications using standards-based technologies.

Notice in the screenshot that modeless windows are being used within an MDI (Multiple Document Interface) paradigm to display data to the user. In addition, the Webtop has a taskbar and start menu implementation, again similar to many operating systems, that allow ease in determining with tasks are currently open within the webtop and fast switching between the open tasks.

Portal Samples

Building dashboard-style applications similar to iGoogle or PageFlakes are all the rage so we’ve included a demo application as a foundation for building a portal application. The demo includes functionality for smooth repositioning of the portlets via drag and drop functionality and each portlet has the standard minimize and close functionality found in similar dashboard implementations. In addition, each portlet has a settings icon which is bound to a custom event handler and allows Ext developers to define behaviors that their users can apply to specific portlets.

Training and Consulting

This new release is an evolutionary step for Ext JS, bringing to market a scalable and enterprise-capable framework on which to build Rich Internet Applications. To compliment our support offerings, Ext JS is now offering training and consulting services provided directly by the Ext Core Team. Leveraging the Core Development Team of Ext JS, we can assist you during every stage of the application lifecycle — from design and development, through testing and deployment, to on-going maintenance of your web application.

Training Services

On-site training by a member of the Ext Team is a great way to ensure your project gets started in the right direction. Whether introductory or guru level, we can provide you with Ext training to match your team’s skills.

Consulting Services

Led by Jack Slocum, creator of the Ext framework and CTO of Ext JS, our core development team has been hand-picked for their technical expertise and industry experience in a variety of business sectors, ensuring the highest quality development services available.

For more information, please contact us at services@extjs.com.

Ext 2.0 Final is now Available for Download

Ext 2.0 is immediately available for download and code updates are available to SVN subscribers in the Ext SVN under branches/ext2.0.

The ability to filter Ext grids is a common use-case and also one of the most frequently discussed topics in the forums. While the Ext.data.Store class includes the capability to filter data, users invariably want to extend past the base functionality and filter data in more advanced ways. One such user is Steve Skrla (AKA: ambience). He’s created the Grid Filter plugin which has quickly become one of the most popular user extensions in the Ext community. I had a chance to interview Steve about his plugin and get a better understanding about it:

Can you give us an explanation of the plugin?

“The grid filters are a plug-in for the standard grids (and any derivation that keeps to the standard event model) that allow for a slightly more robust representation of filtering then is provided by the default store. Additionally, they provide both a programmatic and graphical interface, an event model, local store filtering, and customizable parameter serialization.

By default, the filters apply a new menu to the column menus. Through this menu users can configure, enable, and disable filters for each column. There has been some criticism by a few developers who feel that the filter configuration should be done in a single panel / window. However, the API does not preclude some one else writing a different interface entirely, but no one has taken up the call as of yet =)”

Ext already includes filtering capabilities. What prompted you to extend this?

“We (ControlPath) had a dynamic table component that I developed before Ext was around that had filtering functionality on each of the column headers. As a rule, we try to maintain the same level of functionality even across major changes in platform. While the Store architecture is great, it’s concept of filtering was more or less ‘all or nothing’ and limited to local filtering. Where as we required filters that where executed on the server and could be incrementally added and removed. Coupled with the need to provide some sort of compact UI in the “powerful, but only if you need it” spirit, I felt that the existing column header menu was a prefect candidate for extension. The original implementation of the extension was actually a custom store and view, but when Ext 2.0 came out Jack suggested that the filters could possibly be a plug-in. As usual, he was correct. As a plug-in the filters can now be coupled with custom stores and views (such as the grouping store / view in the example).”

You’ve put a lot of work into this plugin and it truly shows. What are the main features of the plugin?

Feature List:

• Creating of custom filter types and menus is as easy as extending Ext.ux.grid.filter.Filter.
• Grid configuration information can be persisted across page loads by passing a stateId parameter.
• Packaged with filters for Strings, Numeric Ranges, Date Ranges, Lists (which can be backed by a Ext.data.Store), and Boolean
• Column menu based configuration menus.
• Filtered column feedback through a configurable class applied to column headers.
• Function as a PagingToolbar plug-in to reset the current page when there is a filter change.
• Fully event driven and configurable through the config parameter (in the spirit of Ext.Component)

Any new features in the works?

“I am mainly concerned with making the current version as stable as possible and addressing smaller API issues that developers run across at the moment. But I plan on incorporating functionality to allow for that application of a class to each cell in a filtered column as well as tie into the existing Ext.grid.GridPanel state information.”

The demo you provided was a great example of the power of the Grid Filter plugin. Give us some details about the demo.

“The example URL provided in the post should be fine. It’s basically some data scraped from ThinkGeek.com which you can filter through the column menus. I believe each of the bundled filter types are represented through various columns.”

Steve also has screenshots of more filters that he’s applied that demonstrate advanced filtering capabilities They can be found at http://extjs.com/forum/showthread.php?p=71404#post71404

Along with Steve, we have to acknowledge & credit Doug Hendricks (hendricd) for his indispensable help in debugging and responding to developer questions. Both Steve and Doug are extremely active on the forums and support for the Grid Filter plugin can be found via this thread. Containing 11 pages, the thread is certainly one of the most active and demonstrates their commitment to the plugin.

Many developers are familiar with the rich UI capabilities included within the Ext framework. The core team has worked very hard to provide as much functionality as possible to help build top-notch applications that are not only visually appealing but incredibly powerful. While we’ve tried to cover many common “use cases”, invariably there’s going to be a need for new and exciting features that we haven’t tackled. This is where the Ext community comes in.

Community Contributed Extensions

The Ext community has done an amazing job at creating some fantastic plugins to the framework which in some cases dramatically enhance existing controls and in many cases, add whole new UI capabilities altogether! We’ll be reviewing several extensions which standout both in functionality and quality.

LiveGrid by MindPatterns

A typical “use-case” is one where you have a large result set that needs to be displayed in a grid control. Obviously, returning a large data set (e.g.: 50k rows) and managing that data client-side can be a challenge. Paging schemes and memory management come into play and both can have a dramatic impact on the user experience. Thorsten Suckow-Homberg developed an extension that gracefully handles this scenario. The plugin uses a buffering technique to load a specific number of records and after scrolling past the last buffered row, submits a new XHR call to return the next subset of records. This has the benefit of enhancing the user experience by not forcing the user to wait for a large result set to load and minimizing the browser memory requirements for managing a large result set.

http://extjs.com/forum/showthread.php?t=17791

Slate Theme by J.C.

While most Ext developers are more than happy to use the included themes, to many, having a unique look is increasingly important and the user community has really shined in this aspect. A great example of this is the “Slate Theme” created by Ext community member J.C.. The theme really stands out for it’s visual appeal as well as the clean work produced by J.C. He’s received tremendous kudos for his work and rightfully so.

http://extjs.com/forum/showthread.php?t=15989

Continously Growing

This is certainly not an exhaustive list of the available plugins for Ext but it does provide a flavor of what our community is doing to enhance the capability of the framework. The number of plugins continues to grow with both the Ext Extensions page and the Examples and Extras discussion group being updated almost on a daily basis. Community-contributed extensions are an integral part of the Ext project and we certainly value the hard work and professionalism demonstrated by many of these contributors. We will continue to spotlight plugins on a regular basis to ensure that our community members are recognized for their efforts.

One of the things that’s great about the Ext community is the innovative ways they make use of the framework. Many of our users are developing applications for the corporate space and that in itself requires a certain level of flexibility in order to integrate with the complex set of technologies associated with running an enterprise-level business.

Ext community member kubens (AKA Wolfgang) has done just that by creating a very cool front-end application that integrates with the AS-400. The AS-400 is a VERY powerful server system built by IBM and meant to be used in managing high-end OLTP and DSS type application needs. Suffice it to say that you won’t find these in your typical “mom and pop” shops as they’re specifically targeted at the enterprise space.

Wolfgang worked with his company’s AS-400 developer to create an interface for rendering charting data. Using JSON & Flash-based charting, they managed to produce a VERY slick interface with intuitive drill-down capability.

To find out more about Wolfgang’s application or to ask specific questions about his integration with the AS-400 platform, be sure to visit the forum and view his thread about his experience.

The Ext Team has been hard at work creating documentation for the 2.0 release. We now have several documents for new and existing Ext users that should come in very handy during the transition to 2.0.

Introduction to Ext

If you are brand new to Ext, you should start with our original tutorial, the Introduction to Ext. This tutorial was created for the original 1.0 release, but has been newly updated for 2.0. This is a great place to start if you’ve never written any code in Ext.

Ext 2.0 Overview

The Ext 2.0 Overview is primarily intended for those with some prior experience with Ext, as it dives into some advanced topics. However, it is a great place to start for anyone just getting their feet wet with 2.0. This overview provides an introduction to all of the major new areas within 2.0 including:

• The new Component Model that underlies all major components
• The new Container and Layout Models that provide the visual and structural framework for Ext
• Updates and new features for the Grid component
• The new XTemplate and DataView classes for template processing and data-bound UIs

Ext 1.x to 2.0 Migration Guide

Existing 1.x users should be happy to see the 1.x to 2.0 Migration Guide. Unfortunately, with changes of the magnitude made in 2.0, it was not possible to maintain complete backwards compatibility to 1.x. However, we have taken great pains to ensure that the upgrade path is as seamless as possible. This guide provides an extremely detailed overview of every breaking change between 1.x and 2.0, including comprehensive explanations of how and why each area changed. It also includes detailed API comparisons between classes when appropriate.

API Documentation

The developer API documentation has been fully updated for 2.0 as well. Along with the newly-designed doc center, it’s now easier than ever to find the help you’re looking for.

2.0 Final Release Coming Soon!

Ext 2.0 is available for download and code updates are available to SVN subscribers in the Ext SVN under branches/ext2.0. The final release for 2.0 is currently scheduled for November 15th.

Just a reminder: during the 2.0 pre-release period we are offering a 25% discount on all commercial license purchases. If you were considering a commercial license, now is the time!

The Ext team is proud to announce that Ext v2.0 Beta 1 is available for download. This release of the Ext framework features updated portal and desktop examples, documentation updates, and bug fixes.

New Sample Application Updates

In our last release, we introduced two new sample applications which were truly a hit with the development community. The two applications, Web Desktop and Customizing: Portals were excellent examples of the capabilities of the new Ext 2.0 framework. For the beta release, we have dramatically improved the features and functionality of both. The Web Desktop has been drastically enhanced to include a start menu as well as functional icons on the desktop. It truly looks like you’re working within an operating system like Windows.

Web Desktop

This sample includes updates to the look, code organization, desktop shortcuts and an excellent StartMenu implementation contributed by Todd Murdock of the Ext community. Thanks also go to Todd for porting the tab scrolling code into the TaskBar so it can handle additional windows without creating additional rows of task items.

Portal

This sample received it’s next major revision including new shortcut classes for columns and portlets, new layout enhancements and an overall smoother API for development.

All of the updated Ext 2.0 Beta 1 samples can be seen at the Ext 2.0 Samples page. Additional samples are available in SVN.

New API Documentation Updates

We’re continuing our efforts to provide top-notch information and documentation for Ext developers. In addition to updating our documentation with new class information, we’ve enlisted the assistance of several community members in developing tutorials specific to Ext 2.0 and migrating existing tutorials to take into account changes in Ext 2.0.

As we mentioned in our last post, our documentation center has been dramatically revamped to help finding information substantially easier.

2.0 Migration

The Ext 2.0 migration guide is near completion and we will be proofreading it shortly to ensure that it meets our high standards of documentation. As soon as it’s been verified, we will make it immediately available to help expedite the transition from Ext v1.x to Ext 2.0.

2.0 Availability

The Ext 2.0 codebase has stabilized and several clients have begun to use Ext 2.0 in production environments. Ext 2.0 is available for download and code updates are available to SVN subscribers in the Ext SVN under branches/ext2.0.

License

Ext 2.0 is being released with the same license options as 1.1. Please visit http://extjs.com/license for more details.

For many companies and products, Open Source licenses are not an option. Ext offers commercial licenses for these situations and for companies using Ext in commercial applications who want to help support the project. It is a non-copyleft license which gives companies complete freedom when integrating Ext in their products and web sites. During the 2.0 prerelease period, estimated until October 31st, we are offering a 25% discount on all commercial license purchases. If you were considering a commercial license, now is the time!

Adobe recently held a contest called the Adobe AIR Derby, an international competition open to software and web application developers to showcase their skill in using Adobe AIR Beta software. Contestants were able to submit their entries to different application categories and were judged on originality, visual design and appeal, usability, and application of Adobe AIR functionality in the following categories: best business application, best community application, and wild card.

We’re proud to announce that Ext-powered application Ora, developed by John Wu, won the Best HTML Business Application category:

“ORA Time and Expense is an application for tracking timesheet tasks and expenses. It can also generate and export reports such as timesheets, expense reports, and invoices. It uses the webcam APIs assist in the filing of expense reports by taking pictures of receipts and including them in the expense reports.

Built using the Ext JS Ajax framework, the user interface includes wizards to help with data entry. The wizards smoothly slide in from the edges of the window allowing the user to maintain context while navigating the application. A timer in the upper left discretely logs the amount of time that has been spent on a specific task making it easier to keep track of billable hours. Data is managed using the local embedded database and reports are written to the local file system in HTML format.”

Full details of John’s Ora application can be found at his site along with a video demo of the application. You can also install Ora straight from the project page.

Requirements:

• Windows XP SP2, Windows Vista Ultimate Edition, Mac OS 10.4.8 and 10.4.9 (Intel and PowerPC). Linux version coming soon
• 2 MB free hard drive space
• Adobe Flash Player 9.0 & Adobe AIR (beta1)

InfoQ.com, an independent online community focused on change and innovation in enterprise software development, recently interviewed Ext founder Jack Slocum about the latest release of Ext, version 2.0 alpha.

Jack offered great insight into Ext 2.0 and how the framework is positioned in the marketplace:

“Ext can definitely be used as a stand-alone framework. In fact, barring any other requirements, that is the preferred choice as it offers the smallest file footprint and tightest support and integration. However, we also offer the ability to integrate with jQuery, YUI or Prototype as the base library for core services like DOM and event handling, Ajax connectivity and animation. One reason one might opt for such integration is when they have a requirement to use an existing library-specific widget that Ext does not natively offer — the YUI history control is a perfect example.”

“The Ext components were designed to work with other Ext components so the process of using them together is seamless. That type of interoperability can only come when a close knit team is doing the design and development with the same goal in mind, which is something generally not found in open source projects. All of our components have been built from the ground up with presentation, performance, interoperability and extensibility in mind, and we think it shows.”

When asked what the driving force of ExtJS 2.0 is, Jack’s answer was clear and straight to the point:

“Developer productivity and a solid, consistent foundation to build on. Although the 1.x version of Ext was a great library to build on, there were certain areas identified that could be made easier and require less expertise and code by the developer. We want to tackle some of the more difficult problems when building a complex application, such as deferred rendering and component life-cycle and not require developers to handle it manually. The other major improvement for 2.0 in a more robust foundation in place for customizing components (plugins), grouping components (containers) and component initialization. The new consistency across layouts and components means that once you understand how to configure and work with one component in Ext, you will be able to work with any component in the framework in the same way. That leads to faster and easier development for the end user, while sacrificing nothing in terms of Ext’s size or performance.”

You can read the complete interview at InfoQ.com ExtJS Creator Jack Slocum Discusses Upcoming 2.0 Release.

The Ext team is proud to announce that the first public release of Ext v2.0 is available for download. This new version of the Ext framework introduces a host of new features, a new document center, expanded & better organized samples and bug fixes. Another important aspect to note is that there has not been a significant library size increase in this new version.

New Features

In our last posting, we went into detail about some of the new features in Ext 2.0. Many of these features are unique to the Ext 2.0 framework and will make developing desktop-like application substantially easier. These include:

• Scrolling Tabs
• Highly configurable single-level column grouping capabilities as well as summary rollups at the group level.
• Anchor layout in forms to ensure a consistent size and position for form fields regardless of browser size.
• Treeviews that support additional columns for each leaf node.

Along with the features list above, there are many additional features and architectural changes that make working with 2.0 more intuitive and flexible than previous releases. If you haven’t tried 2.0 yet, you should. You won’t be disappointed.

New API Documentation Center

We wanted to make traversing the Ext API as simple as possible and that prompted a substantive revamp of our document center. The new version continues to make use of the intuitive treeview metaphor but great expands on this by taking advantage of the new scrolling tabs feature being introduced in Ext 2.0. By selecting a specific API topic on the tree, a new tab will appear allowing developers to maintain multiple API documents open at one time instead of being limited to only one page at a time. A new search feature has also been added which acts to filter down the treeview based on a keyword entered into the search field.

In addition, each page now contains quick links which will immediately scroll the users down to view properties, methods and events of a specific class.

Finally, a new “Direct Link” feature greatly simplifies the ability to bookmark specific pages of the API by providing a permalink for specific sections of the documentation.

2.0 Migration

We are working on a 2.0 migration guide and several new tutorials that cover working with the new 2.0 component model, container and layout managers. We hope to have them available with the Beta 1 release.

New 2.0 Samples

Prior to this release, the demos for Ext were consolidated into the API viewer making it cumbersome to differentiate what was a demo and what was part of the API document viewer. We have now detached the demos and organized them onto a standalone page. The applications are also grouped into specific subsections to allow Ext developers to drill down into applications that show specific Ext functionality.

Portal Samples

Building dashboard-style applications similar to iGoogle or PageFlakes are all the rage so we’ve included a demo application as a foundation for building a portal application. The demo includes functionality for smooth repositioning of the portlets via drag and drop functionality and each portlet has the standard minimize and close functionality found in similar dashboard implementations. In addition, each portlet has a settings icon which is bound to a custom event handler and allows Ext developers to define behaviors that their users can apply to specific portlets.

Themes and Plugins Repository

User contributed Ext themes and extensions/plugins are an important aspect of the project allowing Ext developers to display their creativity by extending the Ext framework as well as leveraging new functionality not currently available in the library. Currently, these contributions are made via the support forum and are not posted in a way that makes finding specific functionality easy.

In an effort to organize these extensions, the Ext tea