Ext

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

New Features

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

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

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

New API Documentation Center

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

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

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

2.0 Migration

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

New 2.0 Samples

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

Portal Samples

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

Themes and Plugins Repository

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

In an effort to organize these extensions, the Ext team is in the process of building a themes and plugins repository that will allow developers to submit the extensions and categorize them accordingly. Submitters will be able to give a good description of the extension as well as upload screenshots, all in an effort to make it easier for the community to find specific functionality.

More 2.0 Samples

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

2.0 Availability

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

License

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

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

The development of Ext 2.0 continues to move forward with some exceptional new features being rolled into the framework. The team has really focused on enhancing the desktop-like experience that Ext already provides by introducing new functionality, improving performance and keeping the overall file size down. Below are a few examples from the 2.0 samples page.

Grouping & Group Summary

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

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

Scrolling Tabs

One of the things I like best abut Ext 2.0 are the new scrolling tabs. I think Jack says it best:

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

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

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

We’ve received very positive feedback from earlier testers and feel that this approach provides a great blend of flexibility, aesthetics and functionality.

Anchor Layout

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

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

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

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

Column Tree

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

Web Desktop

A common theme for the Ext framework is building rich web applications that can barely be distinguished from true desktop applications. Everything from the look and feel of a control to smooth transitions in DnD are considered when building out the controls. The Web desktop sample is a culmination of this effort and demonstrates how Ext can be leveraged to build a desktop like experience within the context of a browser.

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

More 2.0 Samples

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

2.0 Availability

The 2.0 codebase has stabilized over the past couple weeks and we hope to have an official release in the near future. Ext 2.0 is available to early access subscribers in the Ext SVN under branches/ext2.0.