Announcing Ext JS 3.2 beta – Multisort, Transitions and Composite Fields
March 9, 2010 by Ed Spencer
We are pleased to announce that a beta version of Ext JS 3.2 is now publicly available. 3.2 introduces a number of exciting new components and adds great new capabilities to your existing applications.
Multiple sorting and filtering on Stores
Ext 3.2 introduces multiple sorting and filtering on Ext.data.Store. Previously, it was only possible to sort or filter on a single field – now any number of filters and sorters can be added. The new multiple sorting example demonstrates this functionality in action with a grid. Click the toolbar buttons to change the sorting order, or drag the buttons to reorder them. Additional sorters can be dragged up from Column headers and dropped onto the Toolbar.
Animated DataView transitions
Ext.DataView is already a very powerful component. Backed by an Ext.data.Store, it enables you to display information to your users in a way that feels natural and intuitive. In 3.2 it just got better, with a beautiful transition animation plugin that really brings the UI to life. Items now rearrange themselves automatically, sliding around the screen and fading in and out as the store is updated.
We created two examples to demonstrate this technology – first is a DataView using the new Store multisort capability. The second example uses the updated Slider component to filter down a set of data to a user defined range.
Composite Fields
One of the layouts that has been difficult to achieve in the past is laying several fields out on the same row in a form. The new CompositeField makes this simple, and the underlying HBox layout keeps everything aligned and looking great. Check out our example and the API docs for this new component.
Using this new component couldn't be simpler:
new Ext.form.FormPanel({ items: [ { xtype: 'compositefield', fieldLabel: 'Full Name', items: [ {xtype: 'textfield', name: 'title', width: 40}, {xtype: 'textfield', name: 'firstName', flex : 1}, {xtype: 'textfield', name: 'lastName', flex : 2} ] }, //the rest of your form goes here ] });
Slider improvements
Ext has had a Slider class for some time – it’s a great way of choosing a number along a predefined range. 3.2 introduces the ability to have any number of handles on a slider, making it easy to let users choose a range of values with a single control.
Sliders can now also participate in forms via a SliderField, adding a great alternative to NumberField for accepting numerical input on forms.
Toolbar plugins
We’re releasing two Toolbar plugins that were created for some of the new examples in 3.2. The first is a ToolbarReorderer, which allows any items inside a Toolbar to be reordered easily via drag and drop. The second is a ToolbarDroppable, which turns a the Toolbar into a DropTarget, enabling items to be easily dropped onto it and turned into buttons.
New Accessibility Theme
The Accessibility Theme is designed to be compliant with Section 508 of the Disabilities Act. It features larger font-sizes and inversed text on a dark background. Organizations aiming to support visually impaired users can now use this assistive high-contrast variant.
Quality Assurance: Unit Testing
In addition to everything mentioned above, users upgrading from 3.1 will enjoy over 180 bug fixes and enhancements at all levels of the framework. We know how important it is that things should just work, which brings me to the final announcement we’re making today.
Our internal quality assurance procedures have taken a big step forward since 3.1, starting with the addition of an automated unit testing suite. Our developers have checked in almost 300 test cases since January, testing functionality at every level of the framework. Our custom-built test environment is continuously executed against every browser and OS we support, notifying us immediately if anything goes wrong. Every new line of code that can be tested in this way will be, including new functionality and bug fixes.
It is our aim to keep Ext JS as the leading web application framework in the world. Unit testing forms a part of that ambition, and over the coming months we’ll be revealing what we’re doing to ensure that the rendering and performance of Ext are also second to none.
Download the release and let us know what you think in the comments.
This entry was posted on Tuesday, March 9th, 2010 at 9:01 am and is filed under 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.
Tweet This
Share on Facebook
Stumble on Stumble Upon
Post to LinkedIn
Bookmark on Delicious
Submit to Reddit
Post to Y Combinator
Acc. Theme and Composite Field look really good. Can’t wait to play around with the new release… Keep it coming! :)
Excellent work guys.
Composite fields are really brilliant way to solve very common layout problem.
Thnx a lot!
Awesome! I look forward to trying out the new Beta!
I think the new theme looks cool too. That should get some good feedback from the community.
Impressive. Great to se the new features and your work on the QA process. Congrats on reaching this milestone.
Ed and Ext JS FTW!!! I can’t stop playing with the DataView transitions, its addictive… This is a great release!
Fantastic work, the new examples just shows how far ahead Ext really is.
Bye competition! *vrrroooomm*
Wow. This new features are really helpfull! I also hope that the performance is a bit better in Adobe Air… Will test it in a minute :) For now I only found one bad thing: When you slowly slide the slider in this example, the animations looks ugly: http://www.extjs.com/deploy/ext-3.2-beta/examples/view/animated-dataview.html
Anyway – great work!
Thanks guys, waited a long time for the Composite Field and Multisort…
Great work!
I was wondering when the functionality of the Composite Field was going to be introducted. I had posted a Feild override that did this very thing and had many ExtJS users either commenting on that post or sending me private messages on making this functionality upgraded to the latest ExtJS. With 3.2 beta it looks like I don’t have to maintain that piece of code any more. Well done ExtJS!
When we all have RTL support?! all the big systems in the world are multilanguage and only EXTJS interface not support it!
Great work!!! QA testing is such a core part of the release process, I’m glad to hear you are implementing it more and more!
Good Stuff!
Awesome work guys, I love new components and features! :)
RTL there are alot of developer in ME need this.
Awesome!
Sangar pek!!
Unit test stuff sounds interesting, can you let us know what you are using to test ExtJS in the multiple browsers? Maybe testswarm?
Good news. nice work.
so, do you have news about ext JS Designer?
Great news guys. Love Ext JS and look forward to checking out the new features. Especially like the look of the composite field and the multi-sorting.
While i enjoy the constant stream of new features i wonder why for example TreeGrid is still not included and documented properly.
I miss the robustness and reliability of the 2.x series.
I can’t wait one minute to play with it.3ks.
Wow, visually the DataView is really impressing, yeah!
Can you provide more informations on how you test or with which test suite. Is there a own ExtJS test suite now? Do you also use/have thought about using selenium additionally?
I’m right before writting tests for my own app and so it would be really interssting to me.
Looking forward for 3.2 stable :D
Roland
Great work!
Re: Multiple sorting and filtering on Stores
Has the Team considered controlling multiple sorts by holding shift and clicking the column header to apply the sort? Instead of having a toolbar? would seem more natural to use the column header to apply a sort, holding shift to combine sort just seems more natural. Then you could still allow for a single sort column or sorting by multiple columns
Incredible work! I’m really looking forward to 3.2 stable.
Bravo! EXT is BEST :-) Thanks a lot!
Very nice work. Yet more cool options to consider. I’m sure some of these will find a place in my work. Thanks!
Well done. good work.
Still it is very unfortunate to see the existing bugs are not fixed in the new version yet. Like Roweditor.
I would highly recommend not to include the user extensions unless properly tested in the main examples page. Like Roweditor has so many bugs and even not usable shoiuldn’t be there in the main page.
Great work guys, i have stated loving ExtJS a lot now :-)
The new features are great, especially the compositefield. :)
A really nice upgrade, just like many people above i really like the composite field: simple, yet powerful and widely usable. Although i would like to have seen an option ‘autoAdvance’, wich automatically gives focus to the next field in the compositefield when you are done editing a field. Of course this would only work on fields of which you can know when the user is done editing, like textfields with a max length or date fields. There is a real use for this feature, e.g. in Dutch and other international zipcodes.
Looks Great! Nice Work!
Would like to be able to click on sliders to create and delete handles! ie like booking time intervals, possible any number of intervals or a defined number.
Really great additions… I was waiting for the multisort functionality; and now it is here…
I hope they support IE8, btw Composite Fields is really important..
Very respect! Composite Fields good component – nice alternative table form layout: http://www.extjs.com/forum/showthread.php?t=39342&highlight=tableform .
Looks great – can you say more about how you do your unit testing? We’d love to build this into our product development process too. We’re about to make the decision to base all our UI development on extjs
Lookin’ really good! Any word on the Switch Button component which was mentioned in the roadmap for ExtJS 3.2 (http://www.extjs.com/products/extjs/roadmap.php)?
Its always an excitement to see new release from you guys. You makes our life easy and customer expectations high..lol
Great work!
Alors là, ExtJs devient de plus en plus un très bon framework,
i’m waiting for
The accessibility theme is suprisingly good accessible by keyboard, screenreader and firefox. What is missing, are key shortcuts to the input fields. But this should be in the responsibility of the webdeveloper who uses Ext.
Thanks guys for that great work!
I like the Composite Field most, it was really overdue. :) It will save a lot of time in building complex forms. I think, the multisorting and Toolbar plugins are very helpful, too. I’ll test them.
Dataview Animation for me is a “nice-to-have”, but it looks cool ;)
Anyway, thanks again for your awesome work!
love the composite field. Kinda surprised that ExtJS didnt support it out of the box before this release.
Nice to see the emphasize on testing.
ExtJS is so kool. awesome work.
Great work man… really good!
@Dave the Switch button will make it into 3.2 final, we just didn’t manage to get it in for the beta
Every time Ext announces a new version, I feel the same excitement as opening a Christmas gift.
Can you imagine the Web 2.0 without this fantasic Framework ?
Regarding “…and over the coming months we’ll be revealing what we’re doing to ensure that the rendering and performance of Ext are also second to none.”
I’d really like to know about their unit testing approach.
Congratulations Guys!
Nice work !
Got a little question. Will the final release of 3.2 support remote multi-sorting ?
I really need this feature so i made a little patch to handle it, but i’d prefer it to be directly built into the core.
@Ed Spencer Great — glad to hear it! Thanks much!
Great Work !! Fantastic
Great Work!! Ext Js is nice, it will be the best platform for developing web application in the future.
The composite fields is a welcome feature, but is there just one label area to the left that has to be used for all fields (using comma delineation if > 1 label as in your example) together), or can we have labels next to their corresponding fields?
And will Ext Designer work with 3.2 when it is released?
Thanks for the continued improvements.
Some corrections about memory problems (leaks, saturations, crash) that avoid that we use extjs in serious projects ?
(no edit button, sorry for this other post)
since several years, extjs is not full browser compatible with the mains (firefox, ie, safari), several modules in demos totally don’t work because of css or javascript problems. maybe before to develop new functions it will be cool for us to correct the olds ?
Hi,
I have been using ExtJS for awhile now and I must say, I love this update! But I have found a bug on the advanced dataview. To repeat:
1. Re order everything by price or megapixels
2. Select a single item in the dataview
3. Hold shift and select another item
Expected Result:
The items inbetween the first selected item and the second selected item are selected
Actual Result:
It selects the items that were inbetween the first selected item and the second selected item before reordering.
Regards David Mann,
Web Developer
@Nick CompositeField has a single label, which you can set the text of like normal. You can also add DisplayField instances inside a composite to simulate labels. I’ve updated the example in svn to demo this, and it’ll be present in 3.2 final.
@Mat we have a list of browsers that we support (see http://www.extjs.com/products/js/). If you’ve seen a bug we haven’t picked up on yet please use our bug forums :)
@David Great catch! I’ll get this fixed for the final release. Thanks.
Thanks @Ed Spencer. Are you able to tell us the answer to the other question I asked:
“Will Ext Designer work with 3.2 when it is released?”
I would think a lot of us who took the 50% off for early ordering would be interested to know this.
Thanks again,
Nick
Whoohoo!! composite fields look great! thanks guys.
can I copy the 3.2 over the 3.1 and everything in my project still works? or do I have some changes?
Cool stuff! :)
Found a couple of bugs:
1) Once multiple handles on a slider are slid to the far left (horizontal) or bottom (vertical) positions they can’t be separated again…
2) “align:stretchmax” produces the same result as “align:top” on http://www.extjs.com/deploy/ext-3.2-beta/examples/layout/hbox.html
another bug exists with Embedded Grid example where Rating radio buttons are not grouped (multiple radio buttons can be checked together)
but still fascinating
@ed
Problems don’t come from extjs but from browers themself.
IE have css error (position decay), firefox have memory leak problems with javascript, safari use it own elements.
Because these current browser problems (find in all javascript uses from all javascript providers), extjs is not full compatible with them. To have a good usem you should provide a different version for each of them. That it’s impossible today. So extjs will never been compatible with your browser found in your link.
@Nick Yes it’s totally compatible and targeted at the 3.2 release
@Steven The only API change that we’ve identified is down to the multiple sliders update. If you are using the Ext.ux.SliderTip with your sliders just be sure to copy in the new SliderTip.js file from the 3.2 zip. If you had any custom Slider plugins you may need to update them too.
@MarcusT:
1) This is fixed now in svn so will appear in the final release
2) This is the correct behavior; stretchmax will make each item as tall as the tallest – because they’re all the same height anyway it doesn’t need to do anything in this case
@Ed Spencer: What about REMOTE multi sorting ? :)
Very nice work. The examples are Great!
@I think Vincent has a interesting question. Will you be sending something like “sort_fields:[ name: , dir: }, ...]” back as a response which we can decode to construct our queries from? Or do you have some other scheme?
Great work! I’m especially excited about using the DataView. The slider improvements are also really nice.
@Vincent + Nick it’s a good question, and not something we have addressed in 3.2. I expect that different server sides will require different formatting of this, so the gathering of those params should be overridable. I think what Nick suggests would be a reasonable default though.
Any chance this release will include an AIR version of the docs?
没中文的啊？
Multiple sorting and filtering and animated DataView transitions look cool… Ext is getting better every day. Thanks for the hard work guys. Concentrate more on visual effects. ;)
Once again you guys forget all about RTL. Please support it already, it’s very important. I can’t use ExtJS without it.
How about performance improvement. So far it is very bad in 3.x when compared to 2.3 in IE 6&7.
Thanks to the dev team, it looks great!
When will the 3.2 “beta” become a “release” ?
@飒飒的星星:
有该博客汉化的版本，for 3.2正式版的
http://blog.csdn.net/zhangxin09/archive/2010/04/08/5461698.aspx
I´m playing about two hours with the DataView transitions – my favorite
Really impressive, especially the interface of that is much better and easy to understand.
especially the interface of that is much ！！！
对方答复的
貌似被遗忘 就像标记删除 后遗留的数据 等待被系统回收…. java
This is my first post on this blog and all i can say is thank you for all these useful information! If you allow, I would like to use few of your content. I write articles for article directories as my second job. I am willing to refernce your website in these articles.
Kindly get back to me via email ASAP.
T.B
Honeywell Air Filters