AjaxLine

New version of ExtJS was released. ExtJS is one of the most powerfull libraries fo building website UI.

New features of ExtJS 2.0

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:

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.

JavaScript:

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.

JavaScript:

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.

Also there is a new documentation and tutorials available.

Source:  ExtJS Blog