Sencha Inc. | HTML5 Apps

Blog

Announcing Ext JS 3.2 beta - Multisort, Transitions and Composite Fields

March 09, 2010 | 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.

Download Ext JS 3.2 beta

Ext JS 3.2 beta features Multiple sorting and filtering on Stores

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.

Ext JS 3.2 beta features Animated DataView transitions

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.

Ext JS 3.2 beta features Composite Fields

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
    ]
});
 
Ext JS 3.2 beta features Slider improvements

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.

Ext JS 3.2 beta features Toolbar plugins

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.

Ext JS 3.2 beta features an Accessibility Theme

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 for Ext JS 3.2 beta

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.

Download Ext JS 3.2 beta

There are 79 responses. Add yours.

Thorsten Suckow-Homberg

5 years ago

Acc. Theme and Composite Field look really good. Can’t wait to play around with the new release… Keep it coming! smile

Jay Garcia

5 years ago

Excellent work guys.

Andrei

5 years ago

Composite fields are really brilliant way to solve very common layout problem.
Thnx a lot!

Arthur Kay

5 years ago

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.

Jorge

5 years ago

Impressive.  Great to se the new features and your work on the QA process.  Congrats on reaching this milestone.

George K

5 years ago

Ed and Ext JS FTW!!!  I can’t stop playing with the DataView transitions, its addictive… This is a great release!

Mats

5 years ago

Fantastic work, the new examples just shows how far ahead Ext really is.

Bye competition! *vrrroooomm*

PranKe01

5 years ago

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 smile 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!

PHPScriptor

5 years ago

Thanks guys, waited a long time for the Composite Field and Multisort…

Great work!

Anthony

5 years ago

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!

Noam

5 years ago

When we all have RTL support?! all the big systems in the world are multilanguage and only EXTJS interface not support it!

josh803316

5 years ago

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!

BC

5 years ago

Good Stuff!

Martz

5 years ago

Awesome work guys, I love new components and features! smile

Saber

5 years ago

RTL there are alot of developer in ME need this.

Rachmat Kukuh R.

5 years ago

Awesome!
Sangar pek!!

Alex

5 years ago

Unit test stuff sounds interesting, can you let us know what you are using to test ExtJS in the multiple browsers?  Maybe testswarm?

Muhammad

5 years ago

Good news. nice work.
so, do you have news about ext JS Designer?

Steve Jones

5 years ago

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.

Andi

5 years ago

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.

boolean

5 years ago

I can’t wait one minute to play with it.3ks.

Dumas

5 years ago

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

dorgan

5 years ago

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

Brad Baumann

5 years ago

Incredible work! I’m really looking forward to 3.2 stable.

Boban

5 years ago

Bravo! EXT is BEST grin Thanks a lot!

Buzz Loftus

5 years ago

Very nice work.  Yet more cool options to consider.  I’m sure some of these will find a place in my work.  Thanks!

shrek

5 years ago

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.

sanjaybh

5 years ago

Great work guys, i have stated loving ExtJS a lot now grin

gevik

5 years ago

The new features are great, especially the compositefield. smile

Daan

5 years ago

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.

Laust

5 years ago

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.

Ahsan

5 years ago

Really great additions… I was waiting for the multisort functionality; and now it is here…

SocialGuy

5 years ago

I hope they support IE8, btw Composite Fields is really important..

dima86

5 years ago

Very respect! Composite Fields good component - nice alternative table form layout: http://www.extjs.com/forum/showthread.php?t=39342&highlight=tableform .

Gulliver

5 years ago

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

Dave

5 years ago

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)?

Sushil

5 years ago

Its always an excitement to see new release from you guys. You makes our life easy and customer expectations high..lol

Great work!

D. RAMSAY

5 years ago

Alors là, ExtJs devient de plus en plus un très bon framework,
i’m waiting for

gabel

5 years ago

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.

makana

5 years ago

Thanks guys for that great work!
I like the Composite Field most, it was really overdue. smile 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 wink
Anyway, thanks again for your awesome work!

ashok madhavan

5 years ago

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.

Franklin Javier

5 years ago

Great work man… really good!

Ed Spencer

5 years ago

@Dave the Switch button will make it into 3.2 final, we just didn’t manage to get it in for the beta

mysticav

5 years ago

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!

Vincent

5 years ago

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.

Dave

5 years ago

@Ed Spencer Great—glad to hear it!  Thanks much!

Alessandro

5 years ago

Great Work !! Fantastic

Christian

5 years ago

Great Work!! Ext Js is nice, it will be the best platform for developing web application in the future.

Nick

5 years ago

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.

Mat

5 years ago

Some corrections about memory problems (leaks, saturations, crash) that avoid that we use extjs in serious projects ?

Mat

5 years ago

(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 ?

David Mann

5 years ago

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

Ed Spencer

5 years ago

@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 smile

@David Great catch! I’ll get this fixed for the final release. Thanks.

Nick

5 years ago

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

Steven

5 years ago

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?

MarcusT

5 years ago

Cool stuff! smile

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

m rahman

5 years ago

another bug exists with Embedded Grid example where Rating radio buttons are not grouped (multiple radio buttons can be checked together)

m rahman

5 years ago

but still fascinating

Mat

5 years ago

@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.

Ed Spencer

5 years ago

@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

Vincent

5 years ago

@Ed Spencer: What about REMOTE multi sorting ? smile

Riester

5 years ago

Very nice work. The examples are Great!

Nick

5 years ago

@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?

Tyson Cadenhead

5 years ago

Great work!  I’m especially excited about using the DataView.  The slider improvements are also really nice.

Ed Spencer

5 years ago

@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.

Jeff Howden

5 years ago

Any chance this release will include an AIR version of the docs?

?????

5 years ago

??????

Sefa Kele?

5 years ago

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. wink

Caleb

5 years ago

Once again you guys forget all about RTL. Please support it already, it’s very important. I can’t use ExtJS without it.

govind

5 years ago

How about performance improvement. So far it is very bad in 3.x when compared to 2.3 in IE 6&7.

Thomas

5 years ago

Thanks to the dev team, it looks great!

When will the 3.2 “beta” become a “release” ?

Berater

5 years ago

I´m playing about two hours with the DataView transitions - my favorite

BODHost

5 years ago

Really impressive, especially the interface of that is much better and easy to understand.

bi9foot178

4 years ago

especially the interface of that is much ???

30366040

4 years ago

?????

???

4 years ago

????? ??????    ??????  ???????.... java

Mann

4 years ago

nothing to be found guys…

Not Found

The requested URL /deploy/ext-3.2-beta/examples/grid/multiple-sorting.html was not found on this server.

Honorarberatung

4 years ago

Very nice work.

My question - what about the release of the 3.2 beta?

Thanks!

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.