Ext JS 3.1: Massive memory improvements, TreeGrid, and more
On behalf of the Ext Team, I am extremely excited to announce the final release of Ext JS 3.1. With this release we rededicate ourselves to making Ext JS the best it can be, in both features and performance. A full change log and online documentation can be found on the download page.
Internet Explorer Memory Improvements
As single-page, complex, web apps are becoming more are more prevalent, memory management across all browsers has become a critical issue. With Ext JS 3.1, we have implemented a wide array of workarounds for memory leaks—most notably in IE 6+.
DOM Leaks
DOM reference leaks are one of the biggest performance hits in an app. Ext JS 3.1 has undergone extensive refactoring to ensure all components are properly removing DOM references, in both Ext JS and Ext Core. The result has been the removal of nearly all orphan nodes when removing elements in IE (Sorry IE6/7 FORM tags!).
JScript Engine Leaks
Most surprising was that even simple Javascipt Objects leaked, even through and including IE8. All current versions of IE suffer from a poor implementation of the Javascript Object which, on long lived and often used objects such as caches, cause large memory leaks. IE 9 may correct this issue but in the meantime, 3.1 captures the benefits of a unified Element Cache workaround that is flushed during garbageCollection in IE. In certain tests, we gained a 50x memory reduction for long-running single-page apps.
Optimized Layouts
In 3.0 many components were changed to become containers to allow for complex dynamic interfaces. In version 3.1, we have gone back to optimize this process, removing redundant calls to expensive layout calculations wherever possible. We also now suspend resizing of child containers until the layout process is complete which prevents a “Layout Storm” which could occur previously. In 3.1, destroying a component also removes the component from it’s container, greatly improving performance and optimizing other functions that were being executed.
EventManager Refactor
The EventManager and underlying core adapter have undergone a full refactor to remove code duplication and inefficiency. The previous event caching mechanism was overhauled to provide a faster and more consistent experience. For complex containers, this can result in an order of magnitude improved response time. Buffered and deferred events are now being removed during element and component destruction stopping extraneous events from being executed.
Improved Flexibility
When Ext Core was moved to its own repository in 3.0, there were many private methods which made Core difficult to extend. The Ext community asked for greater flexibility and we have delivered in 3.1, with most methods becoming open prototypes. Ext.each was also unrolled from much of the internal codebase, resulting in better performance on many common tasks.
New Components
While the performance improvements in 3.1 are drastic, we love releasing our latest visual creations. Here are some of our most requested components and enhancements which are being included by default with 3.1:
New TreeGrid Extension
Our new TreeGrid component creates the perfect hybrid for lists—combining the power of a Grid (sorting, showing additional information) with the flexibility and UI of a Tree. (MS Project). TreeGrid is currently based off of TreePanel, for code optimization and performance. We are also currently working on creating a TreeStore which will support hierarchical data structures, which will appear in 3.2. This has been one of our biggest component requests which we’re now happy to deliver:
Locking Grid Columns
Locking grids columns return with the new LockingGidView/LockingColumnModel UX, allowing users to view specific columns while scrolling horizontally.
Grid Column Grouping Plugin
With the new ColumnHeaderGroup Plugin, grid columns can now be grouped together easily. Columns can also be reordered within a group, for maximum flexibility.
Summary
With 3.1 we took a deep look into optimizing many algorithms to improve IE support, overall performance, and introducing new functionality. We think these enhancements will greatly improve your user’s productivity while supporting faster, more robust applications. We are also still hard at work on the Ext Designer, which we hope to debut in the next few months. Make sure to update your version today and check out the new features for yourself.
At last!
Congratulations, and kudo’s to the whole dev team!
Awesome work! I’ve been waiting for a TreeGrid component!
Thank’s for this great update!
Anyway there was no any word about AIR support which was promised for this release…
Stju — Air support was actually added, sorry we left it out of the blog post.
Congrats!
Any news about the release date for Ext Designer?
Good job!
ExtJS is the future!
@Lucian
The designer will be released after the new year.
Congrats I hope that http://lipsiadmin.com add so fast this relase!
Thanks!
The blog mentions about Ext Designer:
which we hope to debut in the next few months
@Abraham,
Do you mean that Ext Designer will be released sometime in January 2010?
Are those captions on the memory graphs correct? 50,567 DOM elements tested in Ext 3.0 but only 587 DOM elements tested in Ext 3.1?
@Alex
Graph means that after 500 iteration Ext3.1 got a small artifacts or wasted dom created. IMHO.. ;)
@khebs
If that’s the case then it would be helpful to add a description in there so we know exactly what that pretty graph is telling us.
@Alex
I think its obvious since the subject is memory leaks… The graph is clearly showing that after 500 iterations of a script (to be assumed that the script is adding, and then removing dom elements), under 3.0 there were over 50K orphaned elements, while under 3.1 there were only 587 orphaned elements.
Quite an improvement! Thanks for the awesome release guys!
The docs tool was also updated with this release. It’s easier now to navigate through the API. The added toolbar is very useful.
Out of curiosity, what tool did you use to diagnose memory leaks?
Piece works, my lover!
Treegrid is the most stuff I would like to add. Dream comes true :)
Is there any plan to to add export features to the grid, something like the following one?
http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html
Where can I donwload the 3.0.0 older version?
@Cesar P
You can download 3.0 here: http://extjs.com/deploy/ext-3.0.0.zip
Keep in mind that we feel 3.1 is a much improved release.
Ext is more mature,,,
I did a translation of this blog post:
http://blog.csdn.net/zhangxin09/archive/2009/12/18/5031465.aspx
I’m sorry that I didn’t mention the translation was into Chinese
Most excellent…..
Maybe it’s just me, but I’m actually experiencing a decrease in performance from 3.0.3 to 3.1.0, both in FF35 and IE8.
Great!, How long these feature to be add in to ExtGwt?
Congratulations!
Congrats!! but, why no Adobe AIR support included?
The upgrade from 3.0 was very smooth, congrats!
Wow.. I’m seeing a significant improvement in the speed and responsiveness of my Big App.. Many thanks to the ExtJS team on a great release! :)
The best frontend ever seen. Congratulation!
Congrats for all your work
link to API documentation still in 3.0.0
Grid locking is very very nice. Thanks for that
Hi I don’t know but the same the @Jeroen, I’m actually experiencing a decrease in performance from 3.0.3 to 3.1.0, using IE 7.0.5730.13, Only I remove the 3.0.3 and copy 3.1, refresh cache and the app now is more slow.
regards
Frank
I still the leak too. Here is my test result.
I created very simple Ext.Window with “Hello World” text. Attached it to a button. The memory leak is still on both Firefox 3.5 and IE6 tested.
Firefox 3.5:
Initial: 55MB
after 30 clicks:62.5MB
5 minutes after closing all 30 windows: 60.8MB
IE6:
Initial: 29.7MB
after 30 clicks:43.3MB
5 minutes after closing all 30 windows: 39.1MB
Still seeing huge leaks in 3.1 and find it slower than 2.2. Why don’t you actually post the test that those pretty graphs were created from so that there is credibility to whats being advertised instead of it being a marketting gimmick.
great work !!!
Hi,
Hope memory improvements are as impressive as declared !
Working 2 weeks on memory leaks on 3.0 version, i’ll be happy if we have no more memory leak problem.
When u know how IE memory works, after a great EXT project, u’ll have to do a code review to detect/fix bad usual coding.
Great job guys !
Looking forward to integrating the new version into Final Login: http://www.browsernotincluded.com/products?p=final_login
Thanks guys!
Grid Column Header Grouping Example – turning on/off columns …
Turned-off columns are shown as active next time you open the coumns menu (checkboxes are all on). You have to uncheck an already turned-off column a second time and then enable it again to get it back on …
… is that on purpose ?
(FF 3.5.6)
Is this release on cachefly?
What about accessibility?
我顶
The release is up on cachefly I just checked. Nice work guys. The IE improvements are very noticeable.
Great work guys! Can’t wait to use the new components in a project and see the performance improvements.
Brilliant! Looking forward to making use of this in Ext GWT – How long until these changes make it into Ext GWT?
中国WEB开发人员顶(The Chinese developer)
Support from the city of Xi’an China programmer Adam Song.
补充一下，没看到中文字眼的朋友，可点击点击这里
http://blog.csdn.net/zhangxin09/archive/2009/12/18/5031465.aspx
我的博客上的翻译。
You guys never cease to impress me. Excellent work!!! You are worth every penny and more.
Do these memory improvements still apply if I am using the jQuery adapter?
Note that the link to docs at the top of the blog is the wrong version. The links on the download page are correct.
@Patrick
I was wondering the same thing. It looks like the change was made to Ext Core. I’m guessing that using the jQuery adapter you might not see the same results. I’ve moved to Core for now. It’s just easier for me to keep up with. Let me know if you run any tests.
Wow! You guys are fantastic… Well done and thank you for an awsome framework and stunning support. It’s nice that we can concentrate on the work at hand while you guys provide us with peace of mind of issues such as memory leaks and performance!
One request – and am not sure if it has been done (not found it yet on the system): Could you guys implement a system built-in (not a third party extension) browser-like feature???
The one that I am using needs constant updating with each version you guys implement and if it were built-in then it would take care by itself when you tweak and improve the system.
Thank you!!!
Mihai
Hi I am sorry – I meant something like this as found at the following link: http://extjs.funkar.nu/ext-2.2/examples/explorerview/
Thank you guys!
Selamat (Congratulation in Indonesian). Kerja Bagus (Well done).
Is there any migration guide from Ext 3.0 to 3.1?
Hi there,
I make my own desktop component of the extjs maintance desktop component, but i have got one problem, when the extjs developers are upgrading the version, my own interface never work correctly. I wrote my default interface in extjs2.0 and i must rewrote it extjs3.0 .
My problem is , here is the fully robust extjs 3.1 version, and my component doesnt work it with this version :D …
You can see the component at http://www.infovip.hu , works only 1024×768 resolution and firefox,opera ,google chrome web browser.
The component is the Start menu that is on the bottom of page like as yours “Desktop Example” .
It would be my request for you ( developers ) , when you are upgrading your extjs component, please check it the older versions, because i dont want to rewrite my component again, but i want to upgrade to newest version.
Thank you very much.
ext-debug.js in R 3.1 now without any comments!
Why is this?
In R 3.0 there were at least a few sparse comments in the code. Now that has all been removed. This substantially degrades Ext JS, especially since the documentation as such has not really been improved either.
There cannot be any sense in removing the comments from the debug version, except to make your user’s life even harder.
Please provide a full and commented version of ext-debug.js!
Great news, and great work. I have heard quite a few complains from developers about the dom leaks, glad to see that you have spent the time to fix it and by the looks of things you have done a hell of a job!
I’m happy to see massive rendering performance increase. Can’t wait to see all the bugs fixed though :D What’s the roadmap now ? (except for Designer)
I was happy to read this good news.
I tried to apply 3.1 version to my solution using GWT-EXT.
Unfortunately, it was unable to load module entry point class.
Compare to old version, that is, extjs-2.0.2, there are some differences between 3.1 and 2.0.2.
- Directory structure is different.
- File names are quite different.
In my opinion there might be some mismatches between target native methods and GWT-EXT calls.
Why don’t you make many users convenient?
As ipk mentioned before, is there any guide document for migration?
Error message is here :
[ERROR] Unable to load module entry point class com.infowise.client.LotteMdm (see associated exception for details)
java.lang.RuntimeException: Could not find a native method with the signature ‘@com.gwtext.client.util.JavaScriptObjectHelper::createObject()’
at com.google.gwt.dev.shell.ie.ModuleSpaceIE6.doInvokeOnWindow(ModuleSpaceIE6.java:57)
at com.google.gwt.dev.shell.ie.ModuleSpaceIE6.doInvoke(ModuleSpaceIE6.java:152)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:447)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:228)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
at com.gwtext.client.util.JavaScriptObjectHelper.createObject(JavaScriptObjectHelper.java)
at com.gwtext.client.data.Store.(Store.java:75)
at com.gwtext.client.data.SimpleStore.(SimpleStore.java:75)
at com.gwtext.client.data.SimpleStore.(SimpleStore.java:65)
at com.infowise.client.LotteMdm.onModuleLoad(LotteMdm.java:37)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
at java.lang.reflect.Method.invoke(Unknown Source)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:320)
at com.google.gwt.dev.shell.BrowserWidget.attachModuleSpace(BrowserWidget.java:329)
at com.google.gwt.dev.shell.ie.BrowserWidgetIE6.access$300(BrowserWidgetIE6.java:37)
at com.google.gwt.dev.shell.ie.BrowserWidgetIE6$External.gwtOnLoad(BrowserWidgetIE6.java:76)
at com.google.gwt.dev.shell.ie.BrowserWidgetIE6$External.invoke(BrowserWidgetIE6.java:139)
at com.google.gwt.dev.shell.ie.IDispatchImpl.Invoke(IDispatchImpl.java:294)
at com.google.gwt.dev.shell.ie.IDispatchImpl.method6(IDispatchImpl.java:194)
at org.eclipse.swt.internal.ole.win32.COMObject.callback6(COMObject.java:117)
at org.eclipse.swt.internal.win32.OS.DispatchMessageW(Native Method)
at org.eclipse.swt.internal.win32.OS.DispatchMessage(OS.java:1925)
at org.eclipse.swt.widgets.Display.readAndDispatch(Display.java:2966)
at com.google.gwt.dev.GWTShell.pumpEventLoop(GWTShell.java:720)
at com.google.gwt.dev.GWTShell.run(GWTShell.java:593)
at com.google.gwt.dev.GWTShell.main(GWTShell.java:357)
Nice. Now if you would only update your documentation tutorials as they are totally out of date (version 2.x!). You provide nice demos to see what Ext can do, but those samples are hardly commented so one has to guess how they work and spend hours to use those in an own project. Take a look at the YUI examples at http://developer.yahoo.com/yui/3/examples/ – now this is great documentation! Any component is implemented in an example and they describe step by step how to use that.
The greatest features are worthless if it takes a lifetime to understand how to use them and how they intereact…
I wrote a ExtJS 3.1 Preformance review on http://liukeye.blogspot.com/2010/01/extjs-31-preformance-review.html
So, I’m a little confused. I upgraded to 3.1 and found the rendering performance to be dramatically slower, especially on Safari where it can take 12-14 seconds to render a large form. Safari has always been slow to render, taking 3-6 seconds with 2.x, but twice as slow? I don’t understand.
Main memory problems are with Firefox not IE.
IE had several graphic problems (see the demos) more importants and not solved since several monts/years.
Could you focus on the most important things for the next patches ?
Sorry guys, but this 3.1 release has produced a lot of rendering bugs in my app:
1. activeItem in tab panel not rendering; workaround: use forceLayout
2. button bar in nested grids not rendering; workaround; use card layoutConfig to set forceLayout
3. Split bar not expanding until the bar is manually dragged open.
4. Split button added to the title bar of panel, when panel does not have a title. It forced creation of the title bar. No workaround.
5. A long text field simply failed to renderd.
This blog says that TreeGrid is now included with 3.1 base, but I downloaded it, and it is not in the source. If you go to the example that is linked above, the treegrid is still an extension, and so the extension has to be placed in your workspace to use the tree grid. Did you mean to say the Treegrid would be included in 3.2?
thank you very helpfull
I also have same question, Is TreeGrid part of the ExtJS 3.1 core library ?
This is one of the most useful Internet resources that I have seen. Thanks! ;)
TreeGrid is awesome. Thank you!
Great news, and great work. I have heard quite a few complains from developers about the dom leaks, glad to see that you have spent the time to fix it and by the looks of things you have done a hell of a job!
I timed extjs on my app, how long it takes to load my application. I experience a decrease in performance since 3.0.
I tested on my biggest app.
Extjs 3.0.0 : chrome 4.7 seconds, IE 12 s
Extjs 3.0.3 : chrome 5 s, IE 17 s
Extjs 3.1 : chrome 7.25 s, IE 21 s
Without compression the javascript is +- 360 kb in size. Its the biggest app we have build in Extjs. But there is performance loss with each new release in the extjs 3 series. Especialy IE 8.0 is performing badly.
But luckiliy setting the deferred render back on tabpanels, increased the performance to 9 seconds in IE. Nevertheless.. I think since 3.0 there is performanceloss.
thank you very helpfull
i wouldn’t have said this had been useful several years ago and yet it is amusing the way age adjusts the manner you experience many creative concepts, thanks with regard to the blog post it is actually nice to read something intelligent occasionally in lieu of the popular crap mascarading as blogs on the net, cheers
Congrats….TreeGrid is great
thanks with regard to the blog post it is actually nice to read something
helhello,i’m china boy!
good job me too
Best file searcher and downloader of year File search. use it for your pleasure
Fantastic! You guys are fantastic… Well done and thank you for an awesome framework and stunning support. It’s nice that we can concentrate on the work at hand while you guys provide us with peace of mind of issues such as memory leaks and performance!