Archive for the ‘Community’ Category

Ext JS 3.0 – Be Outstanding

Monday, August 10th, 2009

On behalf of the Ext Team, I am pleased to announce the final release of Ext JS 3.0. This release is the culmination of tens of thousands of hours of architecture, development and community feedback. A change log and online documentation can be found on the download page. Together we’ve accomplished a level of excellence to be proud of, but we want to enable you to be even better. We want you to be Outstanding.

Excellence

My all-time favorite quote is from Aristotle: “We are what we repeatedly do. Excellence, then, is not an act, but a habit.” Sometimes, however, to reach new heights we need new habits.

As one of the world’s greatest golfers, Tiger Woods underwent an extensive swing change when he was already ranked number one in the sport. While Tiger struggled through the process, he would emerge as the greatest that ever played. Tiger would go on to a record-setting season, where he would win three consecutive majors, nine PGA Tour events, and set or tie 27 Tour records – and that was just the beginning. Tiger’s decision to modify his swing, at the top of his game, enabled him to be outstanding.

Likewise, Ext has spent the past few months modifying our “swing” so you can achieve a new level of greatness.

Assurance

For quite some time we have offered SVN access to our support subscribers. This enabled many of you to access the latest and greatest features of Ext JS for your project. At the same time, it also introduced some unforeseen bugs due to ongoing development. While this might have been exciting to some, many of us with existing projects wanted just the “fixes” without the “feature enhancements”. In order to accommodate this level of quality, we’ve had to make a significant investment in our internal processes.

Ext JS Public Commit Log

In an effort to have more transparency with our community we have created a Public Commit Log reflecting recent commits by the team. Our community can expect to have these commits in our next public release.

Our new commit template will assist us in building more interactive change logs for future releases. Component authors that extend existing Ext base components will be able to sort and locate fixes to improve their extensions stability faster using a grouping grid. In addition, the convention “ref #” and “fixes #” within the commit allow us to automate our internal QA ticket workflow.

Release Cycle

As we continue to grow our product offering, not adhering to a strict release schedule has presented issues. We want to exceed your expectations by releasing software you’ve helped support. We want to “Release Soon, Release Often.” Therefore the Ext Team will be releasing Quarterly public releases of Minor Revisions. To strengthen our support offering, we are now introducing “Monthly Patch Builds” to our support subscribers with just the “fixes”.

JS Builder 2

We have created a new build tool along with a new file format for Ext 3.0. JS Builder was a great tool for managing your Ext projects but it had a severe limitation that it could only run on Windows. We have implemented a cross-platform Java application named JS Builder 2 to replace JS Builder. In the past, you had to build multiple jsb files in order to build an entire Ext build. This process was repetitive and could become quickly time consuming if you did not write a batch script. The new jsb2 file format is able to handle multiple build targets in a single file and makes building a breeze.

Consistency

There have been some changes to the folder structure of Ext JS to be more consistent with our development going forward. Within the Ext 3.0.0 download you will now find that the “source/” directory has been renamed to “src/”. This change was made to mirror what is retrieved from the SVN repository is what you will find in a packaged download.

CSS Refactor & Improvements

Theming has now become easier than ever due to the separation of structural and visual CSS. Each component now has its own visual CSS file which describes its appearance. To create your own complete theme, simply override each rule for colors and images in the visual css directory.

Ext JS Theme

CSS Scoping

Placing standard HTML into an Ext.Panel has become easier with the new configuration preventBodyReset. When preventBodyReset is set to true your HTML will get the standard W3C suggested styling. This means that your standard HTML items will look the way you would expect them to if you loaded them up within a browser without any custom CSS.

Layout Managers

Up until now we have demonstrated only the user interface specific features which are new to Ext JS 3.0. There are also many features which aren’t UI specific. First off, both Menu and Toolbar have been updated to be proper containers with their own custom layout managers. By implementing these custom layout managers we were able to achieve the complex overflow enhancements. We have also introduced 2 new layout managers for general use named hbox and vbox. The hbox and vbox layouts enable developers to layout components horizontally and vertically based on ratios for incredibly complex interfaces.

Ext.data Improvements

The Ext.data package has been improved to incorporate Ext.data.DataWriters which can write back changes which occur client side back to the server-side. Writers are configured similarly to a DataReader and are now one of the constituent pieces of a store. The store exposes several methods like save and create which will trigger communication with the server-side based on the configuration of the writer.

// The new DataWriter component.  Elegance in simplicity.
var writer = new Ext.data.JsonWriter({
    encode: true,
    writeAllFields: false
});

Memory Management Improvements

Ext 3.0 has a new memory management model for Ext Components. This new approach eliminates many of memory consumptions issues encountered in long running Ext 1.x and 2.x applications. This new model exposes a function, mon(), which you can use to bind listeners to external objects which will be automatically cleaned up at the end of the component’s lifecycle. This new method to Ext.Component called mon(), which you can use to bind events to external objects, either DOM elements or Ext classes. mon() adds the listener to an internal collection which is destroyed when the object is destroyed, assisting you in memory management. All Ext Components have been changed to use this method where appropriate.

//Old Style
this.el.on('click', this.onClick, this);
 
//New Style
this.mon(this.el, 'click', this.onClick, this);

Innovation

In order to stay at the top of our game, we will to continue innovate. We will continue to provide elegant solutions to existing problems and lead where others have faltered. This is our promise to you and to ourselves.

Accessibility

We are 100% committed to supporting and incorporating improvements to help you build accessible applications by offering keyboard navigation, screen reader support, and a new high contrast theme for your entire application.

While Ext has always had native support for key binding for our most popular components, traversing your application using a keyboard was left up you to develop. With the new Focus Manager component, coupled with the new class inspection, you won’t need to write a line of code.

ARIA support is an evolving standard. Ext is working on adding ARIA support to the major components like Panel, Tree, Menu, Window, Grid. Using a screen reader like NVDA, with this tree example, will show how elegant accessibility can be for everyone.

Designer Preview

Constructing your interfaces in code will be a thing of the past. We are releasing a Designer Preview that will allow you to experiment with the designer interface and to explore how configs affect your layout. Soon, you will be able to build your application components using base Ext components and Certified User Extensions.

Code generation is currently not available. Our intentions are to charge a fee for this service and to enable our community to create and sell their creations on our marketplace. Our goals are lofty. We want to be the iTunes of Web App Development.


Summary

While many of the features of Ext JS 3.0 have been covered in previous posts, we’ve really just touched the surface of the power of Ext JS 3. Its been an amazing journey thus far, and we have a clear view of where we are going. We aim to provide you the tools to be Outstanding.

Posted in Community, Ext JS | 88 Comments »

Building a Rating Widget with Ext Core 3.0 Final and Google CDN

Wednesday, June 10th, 2009

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

Including Ext Core on your site is easier than ever. We are honored to share with the community that Ext Core is now available via the Google AJAX Library API. Many thanks to Ben Lisbakken at Google for working with us to make this a reality. 
//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
Alternatively, you can use Google AJAX API Loader's google.load() method: 
google.load('ext-core', '3');
google.load('ext-core', '3', {uncompressed : true});

Getting Started

Ext Core is a perfect fit for adding behavior to existing HTML. When designing a widget, having a markup structure that provides graceful degradation is an added plus. For this example, we will be using radio buttons. We can "group" the elements to specify which radio buttons are part of the control. It could look something like the following: 
<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>
This markup allows user to have the ability to rate an item even without the fancy stars and additional functionality that we have in mind. Take notice that this simple markup contains powerful information like the name, value and title for each item which we can reuse with our rating widget.

The API

One of the most important aspects of building reusable code is providing your developers a powerful API. Our aim here is to allow developers to progressively enhance and convert the markup into a star rating with a simple API. In this case we will need the element that wraps around the radio controls, and some optional configuration to customize the behavior of the widget. Following the Ext tradition we will provide these configuration options in the form of an object literal. A possible API for our widget could look like this: 
//Keep it simple
new Ext.ux.Rating('rating1', {
    showTitles: true
});

Ext.util.Observable

So now that we know how we want to use our component, lets go ahead and actually look at some details on how to write it! In our previous post we mentioned that Ext Core allows you to write neatly structured object-oriented code. Whenever you want to create a piece of functionality, you should try to bundle it into a separate class. In most cases you will need to be able to listen for events on instances of your class. Ext provides a power class, the Ext.util.Observable class, to springboard your development. This is the same class that almost all classes in Ext JS extend from! Our basic shell for our rating plugin could look something like this: 
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()
    }
});
For those of you familiar with Ext JS will recognize this pattern. In this piece of code we have created a namespace to put our class into using the Ext.ns() function. Then we create our class using the Ext.extend method with Ext.util.Observable as the base class. We define some configuration options with default values and then set up our constructor method which will be called when we create a new instance of our class. We also define some custom events and wrap the element passed to the constructor with an Ext.Element instance. We use the Ext.get() flexible nature to have support of passing an id string, DOM Element or Ext.Element to our constructor.

Reaching the stars

It is time to think about the things we need to get our widget working. First we want to replace the radio buttons with our stars, we will need to store the values and titles for each star, we want to create a hidden input to put the current value in and finally we need to set up event listeners to listen for mouse hovers and clicks. 
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

In this example we used the following cross-browser compatible functionality available in Ext core:
  • 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 hope that this library will find its way into many of your dynamic web pages and make your lives as web developers easier and more enjoyable. We are looking forward to seeing the great things you will create using it. We are always looking for ways to make this library better and we think the best way to do that is by listening to your suggestions. So, don't be shy and tell us what you think.

Posted in Community, Ext Core, Ext GWT, Ext JS, Ext Tips, Google, News, Open Source, Tutorials | 41 Comments »

Ext JS 3.0 RC2 Release – Stable, Robust, and Enhanced

Wednesday, June 3rd, 2009

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.

Writer Sample
Writer Sample

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.

Posted in Community, Ext JS, News | 86 Comments »

Implementation Spotlight: Zipwhip and Ext JS

Wednesday, May 27th, 2009

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.

Posted in Applications, Community, Ext JS | 42 Comments »

Ext JS Books: Resources to Master the Framework

Monday, March 16th, 2009

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.)

Ext Forum Top-posts

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.

Posted in Community, Ext JS, Ext Tips, Tutorials | 37 Comments »

Ext CDN – Custom Builds, Compression, and Fast Performance

Tuesday, November 18th, 2008

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.

Posted in Adobe AIR, Applications, Community, Ext JS, Extensions, Google, Services | 44 Comments »

Implementation Spotlight: Marketo

Monday, August 18th, 2008

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.

Marketo Screenshot

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.

Marketo Grid

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.

Posted in Applications, Community, Ext JS | 9 Comments »

Implementation Spotlight: SingleHop Leap

Wednesday, July 30th, 2008

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.

Leap Screenshot

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.

Posted in Applications, Community, Ext JS | 26 Comments »

Implementation Spotlight: VersoChat

Monday, June 2nd, 2008

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.

VersoChat Console Screenshot

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.

Posted in Applications, Community, Ext JS | 14 Comments »

Open Source FLOSS Exceptions

Sunday, April 27th, 2008

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.

Posted in Community, Ext JS, Extensions, Open Source | 27 Comments »

Implementation Spotlight: Jama Contour

Monday, March 31st, 2008

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.

Jama Contour Screenshot

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.

Posted in Applications, Community, Ext JS | 13 Comments »

ColdExt Project Updated With New Beta Release, Wiki and Tutorials

Thursday, March 27th, 2008

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.

Posted in Community, Ext JS, Extensions | No Comments »

Ext.ux.FileTreePanel for Ext 2.0

Monday, March 17th, 2008

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.

Posted in Community, Ext JS, Extensions | 14 Comments »

Themes for Ext 2.0

Monday, March 3rd, 2008

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”.

Posted in Community, Ext JS | 14 Comments »

Coolite Studio: Ext Web Controls for ASP.Net

Monday, February 18th, 2008

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.

Posted in Community, Ext JS, News | 14 Comments »

Community Talk – February 2008

Thursday, February 14th, 2008

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.

Posted in Community, Ext JS | 7 Comments »

Ext Growth and Server-Side Community Projects

Tuesday, January 22nd, 2008

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.

Posted in Community, Ext JS | 15 Comments »

Ext.CFC – Easing Integration with Ext and Adobe ColdFusion

Monday, December 10th, 2007

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.

Posted in Community, Ext JS | 7 Comments »

Extended Filtering Using the Grid Filter Plugin

Monday, November 26th, 2007

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.

Posted in Community, Ext JS | 17 Comments »

Ext Community: User Extensions and Themes for Ext 2.0

Monday, November 19th, 2007

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.

Posted in Community, Ext JS | 8 Comments »

Ext Community: Ext Application Using the AS400 Web Server

Friday, November 2nd, 2007

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.

Posted in Community, Ext JS | 11 Comments »