December 4, 2007 by ReyBango 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 longhours of work and dedication by the Ext Core team as well as ourcommunity of testers and supporters.
Ext 2.0is a dramatic step forward from all previous versions of Ext, providingincreased performance, ease of configurations, flexibility and UIcapabilities.
We’ve also made learning how to use Ext much easier with acompletely revamped document center and expanded & better organizedsamples. All of this without a significant library size increase inthis new version.
New FeaturesThe Ext framework has always been praised for it’s attractive UIcomponents and top-notch foundation. It was important that Ext 2.0carry on the reputation of providing a great base to build upon whileincorporating 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 groupingcapabilities as well as summary rollups at the group level. These twoadditions are critical in decision support (DSS) and report intensiveapplications. Important to note is that Ext’s grid sortingfunctionality continues to work as expected, sorting data within eachgroup set as opposed to sorting the whole grid.
The group summaries support multiple types of calculations and areimplemented as a Ext.Component plugin which allows Ext users todecorate existing UI components with their own custom functionality.
Scrolling Tabs
The new Ext 2.0 scrolling tabs are truly amazing and provide for amuch more flexible UI then traditional static-based tabs. I think Jacksays 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, withsegmenting unique sections of data with the context of a page. Withincreased demand for data presentation via tabs, without the reciprocalincrease in screen real estate, the team took a step back and decidedto rethink the way that tab controls should function. The approach wasto allow as many tabs as necessary to be created and display themwithin a scrolling metaphor. By extending the Ext.TabPanel control witha new “autoScroll” directive, all tabs added to the panel instantlyfall 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 formfields to be anchored to fit the size of their container.Unfortunately, HTML & CSS don’t easily lend themselves to this typeof behavior, throwing off form element positions unless carefullycrafted styles are created. Even with that, inconsistencies acrossbrowsers forces even further hacks to be developed to ensure that formelements 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 aspecific 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 todecide how the height and width of the anchored fields should beaffected by a resize of the container panel.
Column Tree
In Ext 2.0, one thing we’ve focused on is providing examples ofcustomizing Ext UI components. The example below demonstrates howeasily the Ext tree panel can be customized to add support for columnsin the nodes. A prime example of an application the could benefit fromthis would be a project planner as demonstrated below:
New API Documentation CenterWe wanted to make traversing the Ext API as simple as possible andthat prompted a substantive revamp of our document center. The newversion continues to make use of the intuitive treeview metaphor butgreat expands on this by taking advantage of the new scrolling tabsfeature being introduced in Ext 2.0. By selecting a specific API topicon the tree, a new tab will appear allowing developers to maintainmultiple API documents open at one time instead of being limited toonly one page at a time. A new search feature has also been added whichacts to filter down the treeview based on a keyword entered into thesearch field.
In addition, each page now contains quick links which willimmediately scroll the users down to view properties, methods andevents of a specific class.
Finally, a new “Direct Link” feature greatly simplifies the abilityto bookmark specific pages of the API by providing a permalink forspecific sections of the documentation.
The developer
API documentationhas been fully updated for 2.0 as well. Along with the newly-designeddoc center, it’s now easier than ever to find the help you’re lookingfor.
New 2.0 DocumentationThe Ext Team has been hard at work creating documentation for the2.0 release. We now have several documents for new and existing Extusers 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 beennewly updated for 2.0. This is a great place to start if you’ve neverwritten any code in Ext.
Ext 2.0 Overview
The
Ext 2.0 Overviewis primarily intended for those with some prior experience with Ext, asit dives into some advanced topics. However, it is a great place tostart for anyone just getting their feet wet with 2.0. This overviewprovides an introduction to all of the major new areas within 2.0including:
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 notpossible to maintain complete backwards compatibility to 1.x. However,we have taken great pains to ensure that the upgrade path is asseamless as possible. This guide provides an extremely detailedoverview of every breaking change between 1.x and 2.0, includingcomprehensive explanations of how and why each area changed. It alsoincludes detailed API comparisons between classes when appropriate.
New 2.0 SamplesPrior to this release, the demos for Ext were consolidated into theAPI viewer making it cumbersome to differentiate what was a demo andwhat was part of the API document viewer. We have now detached thedemos and organized them onto a standalone page. The applications arealso grouped into specific subsections to allow Ext developers to drilldown into applications that show specific Ext functionality.
Web Desktop Sample
When the Web Desktop sample application wasreleased during the Ext 2.0 beta process, people were astounded by thedemo and could instantly see the power to build desktop-likeapplications using standards-based technologies.
Notice in the screenshot that modeless windows are being used withinan MDI (Multiple Document Interface) paradigm to display data to theuser. In addition, the Webtop has a taskbar and start menuimplementation, again similar to many operating systems, that allowease in determining with tasks are currently open within the webtop andfast switching between the open tasks.
Portal Samples
Building dashboard-style applications similar to iGoogle orPageFlakes are all the rage so we’ve included a demo application as afoundation for building a portal application. The demo includesfunctionality for smooth repositioning of the portlets via drag anddrop functionality and each portlet has the standard minimize and closefunctionality found in similar dashboard implementations. In addition,each portlet has a settings icon which is bound to a custom eventhandler and allows Ext developers to define behaviors that their userscan apply to specific portlets.
Training and ConsultingThis new release is an evolutionary step for Ext JS, bringing tomarket a scalable and enterprise-capable framework on which to buildRich Internet Applications. To compliment our support offerings, Ext JSis now offering training and consulting services provided directly bythe Ext Core Team. Leveraging the Core Development Team of Ext JS, wecan assist you during every stage of the application lifecycle — fromdesign and development, through testing and deployment, to on-goingmaintenance of your web application.
Training Services
On-site training by a member of the Ext Team is agreat way to ensure your project gets started in the right direction.Whether introductory or guru level, we can provide you with Exttraining to match your team’s skills.
Consulting Services
Led by Jack Slocum, creator of the Ext frameworkand CTO of Ext JS, our core development team has been hand-picked fortheir technical expertise and industry experience in a variety ofbusiness sectors, ensuring the highest quality development servicesavailable.
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.
This entry was posted on Tuesday, December 4th, 2007 at 12:28 am and is filed under
Blogroll,
Ext JS. You can follow any responses to this entry through the
RSS 2.0 feed. You can
leave a response, or
trackback from your own site.
