The Ext team is proud to announce that the official release of Ext v2.0 is available for download. This new version of the Ext framework is the culmination of many long hours of work and dedication by the Ext Core team as well as our community of testers and supporters. Ext 2.0 is a dramatic step forward from all previous versions of Ext, providing increased performance, ease of configurations, flexibility and UI capabilities.
We’ve also made learning how to use Ext much easier with a completely revamped document center and expanded & better organized samples. All of this without a significant library size increase in this new version.
New Features
The Ext framework has always been praised for it’s attractive UI components and top-notch foundation. It was important that Ext 2.0 carry on the reputation of providing a great base to build upon while incorporating new features that are unique to the Ext 2.0 framework. These include:
Grouping & Group Summary
Ext 2.0 introduces highly configurable single-level column grouping capabilities as well as summary rollups at the group level. These two additions are critical in decision support (DSS) and report intensive applications. Important to note is that Ext’s grid sorting functionality continues to work as expected, sorting data within each group set as opposed to sorting the whole grid.
The group summaries support multiple types of calculations and are implemented as a Ext.Component plugin which allows Ext users to decorate existing UI components with their own custom functionality.
Scrolling Tabs
The new Ext 2.0 scrolling tabs are truly amazing and provide for a much more flexible UI then traditional static-based tabs. I think Jack says it best:
Call me crazy, but I can sit, click and play with these tabs all day.
The tab metaphor is synonymous, from a UX perspective, with segmenting unique sections of data with the context of a page. With increased demand for data presentation via tabs, without the reciprocal increase in screen real estate, the team took a step back and decided to rethink the way that tab controls should function. The approach was to allow as many tabs as necessary to be created and display them within a scrolling metaphor. By extending the Ext.TabPanel control with a new “autoScroll” directive, all tabs added to the panel instantly fall into the scrollable behavior of the tab panel:
var tabs = new Ext.TabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu()
});Anchor Layout
A common theme in desktop applications is the ability for form fields to be anchored to fit the size of their container. Unfortunately, HTML & CSS don’t easily lend themselves to this type of behavior, throwing off form element positions unless carefully crafted styles are created. Even with that, inconsistencies across browsers forces even further hacks to be developed to ensure that form elements remained positioned as expected.
The team extended the FormPanel component to allow form controls (and other components) to be anchored to a specific size within a specific container.
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 55,
url:'save-form.php',
defaultType: 'textfield',
items: [{
fieldLabel: 'Send To',
name: 'to',
anchor:'100%' // anchor width by percentage
},{
fieldLabel: 'Subject',
name: 'subject',
anchor: '100%' // anchor width by percentage
},{
xtype: 'textarea',
hideLabel: true,
name: 'msg',
anchor: '100% -53' // anchor width by percentage and height by raw adjustment
}]
});The code for this is fairly straightforward allowing flexibility to decide how the height and width of the anchored fields should be affected by a resize of the container panel.
Column Tree
In Ext 2.0, one thing we’ve focused on is providing examples of customizing Ext UI components. The example below demonstrates how easily the Ext tree panel can be customized to add support for columns in the nodes. A prime example of an application the could benefit from this would be a project planner as demonstrated below:
New API Documentation Center
We wanted to make traversing the Ext API as simple as possible and that prompted a substantive revamp of our document center. The new version continues to make use of the intuitive treeview metaphor but great expands on this by taking advantage of the new scrolling tabs feature being introduced in Ext 2.0. By selecting a specific API topic on the tree, a new tab will appear allowing developers to maintain multiple API documents open at one time instead of being limited to only one page at a time. A new search feature has also been added which acts to filter down the treeview based on a keyword entered into the search field.
In addition, each page now contains quick links which will immediately scroll the users down to view properties, methods and events of a specific class.
Finally, a new “Direct Link” feature greatly simplifies the ability to bookmark specific pages of the API by providing a permalink for specific sections of the documentation.
The developer API documentation has been fully updated for 2.0 as well. Along with the newly-designed doc center, it’s now easier than ever to find the help you’re looking for.
New 2.0 Documentation
The Ext Team has been hard at work creating documentation for the 2.0 release. We now have several documents for new and existing Ext users that should come in very handy during the transition to 2.0.
Introduction to Ext
If you are brand new to Ext, you should start with our original tutorial, the Introduction to Ext. This tutorial was created for the original 1.0 release, but has been newly updated for 2.0. This is a great place to start if you’ve never written any code in Ext.
Ext 2.0 Overview
The Ext 2.0 Overview is primarily intended for those with some prior experience with Ext, as it dives into some advanced topics. However, it is a great place to start for anyone just getting their feet wet with 2.0. This overview provides an introduction to all of the major new areas within 2.0 including:
Ext 1.x to 2.0 Migration Guide
Existing 1.x users should be happy to see the 1.x to 2.0 Migration Guide. Unfortunately, with changes of the magnitude made in 2.0, it was not possible to maintain complete backwards compatibility to 1.x. However, we have taken great pains to ensure that the upgrade path is as seamless as possible. This guide provides an extremely detailed overview of every breaking change between 1.x and 2.0, including comprehensive explanations of how and why each area changed. It also includes detailed API comparisons between classes when appropriate.
New 2.0 Samples
Prior to this release, the demos for Ext were consolidated into the API viewer making it cumbersome to differentiate what was a demo and what was part of the API document viewer. We have now detached the demos and organized them onto a standalone page. The applications are also grouped into specific subsections to allow Ext developers to drill down into applications that show specific Ext functionality.
Web Desktop Sample
When the Web Desktop sample application was released during the Ext 2.0 beta process, people were astounded by the demo and could instantly see the power to build desktop-like applications using standards-based technologies.
Notice in the screenshot that modeless windows are being used within an MDI (Multiple Document Interface) paradigm to display data to the user. In addition, the Webtop has a taskbar and start menu implementation, again similar to many operating systems, that allow ease in determining with tasks are currently open within the webtop and fast switching between the open tasks.
Portal Samples
Building dashboard-style applications similar to iGoogle or PageFlakes are all the rage so we’ve included a demo application as a foundation for building a portal application. The demo includes functionality for smooth repositioning of the portlets via drag and drop functionality and each portlet has the standard minimize and close functionality found in similar dashboard implementations. In addition, each portlet has a settings icon which is bound to a custom event handler and allows Ext developers to define behaviors that their users can apply to specific portlets.
Training and Consulting
This new release is an evolutionary step for Ext JS, bringing to market a scalable and enterprise-capable framework on which to build Rich Internet Applications. To compliment our support offerings, Ext JS is now offering training and consulting services provided directly by the Ext Core Team. Leveraging the Core Development Team of Ext JS, we can assist you during every stage of the application lifecycle — from design and development, through testing and deployment, to on-going maintenance of your web application.
Training Services
On-site training by a member of the Ext Team is a great way to ensure your project gets started in the right direction. Whether introductory or guru level, we can provide you with Ext training to match your team’s skills.
Consulting Services
Led by Jack Slocum, creator of the Ext framework and CTO of Ext JS, our core development team has been hand-picked for their technical expertise and industry experience in a variety of business sectors, ensuring the highest quality development services available.
For more information, please contact us at services@extjs.com.
Ext 2.0 Final is now Available for Download
Ext 2.0 is immediately available for download and code updates are available to SVN subscribers in the Ext SVN under branches/ext2.0.
