Ext JS 3.0 – Be Outstanding
August 10, 2009 by Abraham Elias
On behalf of the Ext Team, I am pleased to announce the final release of Ext JS 3.0. This release is the culmination of tens of thousands of hours of architecture, development and community feedback. A change log and online documentation can be found on the download page. Together we’ve accomplished a level of excellence to be proud of, but we want to enable you to be even better. We want you to be Outstanding.
Excellence
My all-time favorite quote is from Aristotle: “We are what we repeatedly do. Excellence, then, is not an act, but a habit.” Sometimes, however, to reach new heights we need new habits.
As one of the world’s greatest golfers, Tiger Woods underwent an extensive swing change when he was already ranked number one in the sport. While Tiger struggled through the process, he would emerge as the greatest that ever played. Tiger would go on to a record-setting season, where he would win three consecutive majors, nine PGA Tour events, and set or tie 27 Tour records – and that was just the beginning. Tiger’s decision to modify his swing, at the top of his game, enabled him to be outstanding.
Likewise, Ext has spent the past few months modifying our “swing” so you can achieve a new level of greatness.
Assurance
For quite some time we have offered SVN access to our support subscribers. This enabled many of you to access the latest and greatest features of Ext JS for your project. At the same time, it also introduced some unforeseen bugs due to ongoing development. While this might have been exciting to some, many of us with existing projects wanted just the “fixes” without the “feature enhancements”. In order to accommodate this level of quality, we’ve had to make a significant investment in our internal processes.
Ext JS Public Commit Log
In an effort to have more transparency with our community we have created a Public Commit Log reflecting recent commits by the team. Our community can expect to have these commits in our next public release.
Our new commit template will assist us in building more interactive change logs for future releases. Component authors that extend existing Ext base components will be able to sort and locate fixes to improve their extensions stability faster using a grouping grid. In addition, the convention “ref #” and “fixes #” within the commit allow us to automate our internal QA ticket workflow.
Release Cycle
As we continue to grow our product offering, not adhering to a strict release schedule has presented issues. We want to exceed your expectations by releasing software you’ve helped support. We want to “Release Soon, Release Often.” Therefore the Ext Team will be releasing Quarterly public releases of Minor Revisions. To strengthen our support offering, we are now introducing “Monthly Patch Builds” to our support subscribers with just the “fixes”.
JS Builder 2
We have created a new build tool along with a new file format for Ext 3.0. JS Builder was a great tool for managing your Ext projects but it had a severe limitation that it could only run on Windows. We have implemented a cross-platform Java application named JS Builder 2 to replace JS Builder. In the past, you had to build multiple jsb files in order to build an entire Ext build. This process was repetitive and could become quickly time consuming if you did not write a batch script. The new jsb2 file format is able to handle multiple build targets in a single file and makes building a breeze.
Consistency
There have been some changes to the folder structure of Ext JS to be more consistent with our development going forward. Within the Ext 3.0.0 download you will now find that the “source/” directory has been renamed to “src/”. This change was made to mirror what is retrieved from the SVN repository is what you will find in a packaged download.
CSS Refactor & Improvements
Theming has now become easier than ever due to the separation of structural and visual CSS. Each component now has its own visual CSS file which describes its appearance. To create your own complete theme, simply override each rule for colors and images in the visual css directory.
CSS Scoping
Placing standard HTML into an Ext.Panel has become easier with the new configuration preventBodyReset. When preventBodyReset is set to true your HTML will get the standard W3C suggested styling. This means that your standard HTML items will look the way you would expect them to if you loaded them up within a browser without any custom CSS.
Layout Managers
Up until now we have demonstrated only the user interface specific features which are new to Ext JS 3.0. There are also many features which aren’t UI specific. First off, both Menu and Toolbar have been updated to be proper containers with their own custom layout managers. By implementing these custom layout managers we were able to achieve the complex overflow enhancements. We have also introduced 2 new layout managers for general use named hbox and vbox. The hbox and vbox layouts enable developers to layout components horizontally and vertically based on ratios for incredibly complex interfaces.
Ext.data Improvements
The Ext.data package has been improved to incorporate Ext.data.DataWriters which can write back changes which occur client side back to the server-side. Writers are configured similarly to a DataReader and are now one of the constituent pieces of a store. The store exposes several methods like save and create which will trigger communication with the server-side based on the configuration of the writer.
// The new DataWriter component. Elegance in simplicity. var writer = new Ext.data.JsonWriter({ encode: true, writeAllFields: false });
Memory Management Improvements
Ext 3.0 has a new memory management model for Ext Components. This new approach eliminates many of memory consumptions issues encountered in long running Ext 1.x and 2.x applications. This new model exposes a function, mon(), which you can use to bind listeners to external objects which will be automatically cleaned up at the end of the component’s lifecycle. This new method to Ext.Component called mon(), which you can use to bind events to external objects, either DOM elements or Ext classes. mon() adds the listener to an internal collection which is destroyed when the object is destroyed, assisting you in memory management. All Ext Components have been changed to use this method where appropriate.
//Old Style this.el.on('click', this.onClick, this); //New Style this.mon(this.el, 'click', this.onClick, this);
Innovation
In order to stay at the top of our game, we will to continue innovate. We will continue to provide elegant solutions to existing problems and lead where others have faltered. This is our promise to you and to ourselves.
Accessibility
We are 100% committed to supporting and incorporating improvements to help you build accessible applications by offering keyboard navigation, screen reader support, and a new high contrast theme for your entire application.
While Ext has always had native support for key binding for our most popular components, traversing your application using a keyboard was left up you to develop. With the new Focus Manager component, coupled with the new class inspection, you won’t need to write a line of code.
ARIA support is an evolving standard. Ext is working on adding ARIA support to the major components like Panel, Tree, Menu, Window, Grid. Using a screen reader like NVDA, with this tree example, will show how elegant accessibility can be for everyone.
Designer Preview
Constructing your interfaces in code will be a thing of the past. We are releasing a Designer Preview that will allow you to experiment with the designer interface and to explore how configs affect your layout. Soon, you will be able to build your application components using base Ext components and Certified User Extensions.
Code generation is currently not available. Our intentions are to charge a fee for this service and to enable our community to create and sell their creations on our marketplace. Our goals are lofty. We want to be the iTunes of Web App Development.
Summary
While many of the features of Ext JS 3.0 have been covered in previous posts, we’ve really just touched the surface of the power of Ext JS 3. Its been an amazing journey thus far, and we have a clear view of where we are going. We aim to provide you the tools to be Outstanding.
Posted on August 10th, 2009 at 3:01 pm
Nice work on the release. I’ve been following Ext JS for a while now and it has definitely come a long way. Its saved us countless hours of development time using it here at Best Buy. The Designer looks pretty promising as well. Will have to try it out.
Posted on August 10th, 2009 at 3:03 pm
Compliments to ExtJS Team, every release it’s a beatiful surprise.
Posted on August 10th, 2009 at 3:04 pm
This is some great stuff. I have to admit that I have not found a use case for the new Ext.Direct stuff in my current apps, but other than that the framework just improved in the best ways and migrating from 2.0 to 3.0 was as easy as can be.
Posted on August 10th, 2009 at 4:21 pm
[...] really excited that the final release of Ext JS 3/ is here, along with a preview of the Ext JS Designer application. This is built on top of Adobe AIR [...]
Posted on August 10th, 2009 at 4:27 pm
Hey Great Work, it’s seams very powerefull!
I can see like a Visual Studio Development, keep working on this project.
Congrats!
Great job ExtJS Team!!!
Posted on August 10th, 2009 at 4:29 pm
Congrats to the whole team!
Posted on August 10th, 2009 at 5:29 pm
Well done ExtJS Team!…Excellent stuff!
Posted on August 10th, 2009 at 5:29 pm
Are there any plans to integrate with GWT?
Posted on August 10th, 2009 at 5:58 pm
omg, exelent job, guys keep making exjs the state of art in js, XD gl, and happy coding! to all
Posted on August 10th, 2009 at 6:06 pm
[...] 本家のブログの方でようやくExt JS 3.0の公式なアナウンスがありました。 [...]
Posted on August 10th, 2009 at 6:21 pm
“Code generation is currently not available. Our intentions are to charge a fee for this service”
Does that mean I cannot create something in the designer and get the javascript results out? I’ve got to submit a designer file or something to Ext and pay to get the code back? Hopefully I’m reading that wrong…
Posted on August 10th, 2009 at 6:46 pm
I have been using extjs since 1.0 and I am happy that 3.0 has had that much of an improvement.
Designer looks nice. Have to try it out.
Posted on August 10th, 2009 at 8:44 pm
Many thanks to the ext team and the community members (animal, condor, etc) for your time and persistence. This is the best version of extjs to date. I look forward to 3.1.
Posted on August 10th, 2009 at 10:40 pm
I am new to Ext and had a hard time understanding some of the concepts presented. Fortunately, I spent the past hour or so playing around with the Designer. It’s helped me tremendously. You guys deserve all your success! Thank you.
Posted on August 11th, 2009 at 12:53 am
支持，希望能早日获得设计器，在我看来，设计器和store是两个相对独立的功能不应放到一起去，尽管的都是很伟大的想法。
Posted on August 11th, 2009 at 1:15 am
how much
Posted on August 11th, 2009 at 2:22 am
it will be good to have a try on the Designer :>
Posted on August 11th, 2009 at 2:31 am
The Designer rocks! Great work guys.
Posted on August 11th, 2009 at 3:46 am
Great news. Good plans for different types of release.
What about releases of the API doc page?
The API comments in the code are continually updated in response to questions and misunderstandings that arise during development. Is each release going to have its own http://extjs.com/deploy/ext-n.n.n/docs/ page?
Posted on August 11th, 2009 at 4:23 am
[...] geliştiricileri güzel haberler vermeye devam [...]
Posted on August 11th, 2009 at 4:26 am
The Desiger was a neccesary.Looking forward to working with it
Posted on August 11th, 2009 at 4:38 am
Great work guys. Looking forward to saving some time by using this tool.
Not sure if this is the place to post bugs but here are a couple I found:
1. Selecting a component does not accurately show properties eg: a panel has a border, however the properties inspector show border property unchecked. Checking then unchecking turns border off.
2. Float values not allowed in fields that it should eg. in column layout columnWidth only allows int values.
Cheers,
Eli
Posted on August 11th, 2009 at 4:59 am
Great to see that quality is still a major key for the team.
This first version of the long-waited designer is impressive.
Very good job !!
Posted on August 11th, 2009 at 5:17 am
@qooleot I guess you properly got their point. I’ve tested the designer and it does not allow you to retrieve the code. I wonder when this payable version will be out, any info about it?
Posted on August 11th, 2009 at 5:41 am
Looking forward to seeing the designer in action, especially when you have the code generation working
Great work!
Posted on August 11th, 2009 at 6:10 am
Are you going to update/release an extensive set of tutorials?
Posted on August 11th, 2009 at 6:24 am
wow that looks really good i like the style!
Posted on August 11th, 2009 at 7:38 am
[...] Ext folks released Ext version 3 a few weeks back, but we were holding back for their blog post on the matter. There is a lot of [...]
Posted on August 11th, 2009 at 8:04 am
[...] Ext JS 3.0 – Be Outstanding (tags: extjs javascript) [...]
Posted on August 11th, 2009 at 9:21 am
@Heimo Seriously!? The image is a LINK!
Posted on August 11th, 2009 at 9:51 am
I’ve been with Ext since 1.0. It just keeps getting better. The entire component architecture is exemplary. For best mileage, one should spend time understanding Ext’s big picture architecture and model their application similarly. It takes time but is totally worth it.
Posted on August 11th, 2009 at 9:54 am
I’m glad to see 3.0 finally hit release. I’m not sure I understand the purpose of charging for the code that we generate in the designer other than finding another route to monetize your efforts. I like free a lot but I don’t mind paying for a product. I would be much more inclined to purchase the designer outright for unlimited use.
Posted on August 11th, 2009 at 12:47 pm
Is it right? You guys will release the designer but there will be a fee for getting the code generated on it???
“…Code generation is currently not available. Our intentions are to charge a fee for this service…”
OMG… if its real i’ll continue using GuiDesigner.
Posted on August 11th, 2009 at 12:54 pm
Awesome work!! i love the Ext JS framework!! i really like the way it is, thanks for this one
Posted on August 11th, 2009 at 12:58 pm
To clarify “charging a fee for this service” is nothing more than “We plan to charge for the Designer when it comes out with this feature.”
Posted on August 11th, 2009 at 2:01 pm
hi all peoples. it`s wonderfulproject, the best told for designer web. I’m begining cince extjs1.0 reight now i’m migrate to extjs3.0.
congratolation to people builders
Posted on August 11th, 2009 at 2:44 pm
Will ExtJS 3 commercial license buyers have to pay for the designer as well?
Posted on August 11th, 2009 at 3:02 pm
@Joeri
As with every release, we will take care of our community and customers that has supported us, but there will be a fee for commercial license holders (expect a heavy discount).
Posted on August 11th, 2009 at 3:12 pm
how… much….?
Posted on August 11th, 2009 at 3:18 pm
@Marcelo and others with questions about why we want to charge for the advanced functionality in the Designer.
It’s very common for software to have a paid “Pro” version and a free “Lite” version available. For users that just want to prototype an interface and play around with different components/layouts/configuration/extentions options available for the library, the “Lite” version is a very handy tool. Imagine discussing several ways of implementing an interface with your team, and having the ability to quickly try them out without having to touch any code. Another use case might be for new Ext developers to quickly see the differences between layouts, and see what effect different configuration options have on layouts and components.
If you want to use the Designer with the more powerful options (like generation to Ext JS, Ext GWT etc), you will have to buy the “Pro” license for it. We invest a great deal of time building and refining this Designer, and in our opinion its nothing less then fair to charge a small fee for the more advanced features of it.
@Raffael
We are still in discussion internally if and how the pricing would be affected for commercial license holders of Ext. Once we are in a further stage, we will publicly discuss our thoughts on this, and we will be open to all feedback.
@Everyone with questions about what will be generated
First I would like to explain how a project is saved. This will be done in the form of a json configuration/project file. This gives us the ability to quickly open any project saved this way in the designer. This will probably also have the very nice side affect of being able to mail/share an interface/project with a colleague or other community members.
About the generation. There will be two files generated. This first will be a js file that will contain an Ext JS base class representation of what you created in the designer. The second will be a js file in which you would place your event handlers, etc.
Posted on August 11th, 2009 at 7:13 pm
[...] Ext folks released Ext version 3 a few weeks back, but we were holding back for their blog post on the matter. There is a lot of [...]
Posted on August 11th, 2009 at 10:59 pm
直接上中文， 啥 时候能出来啊 ，能生成代码 ，extjs 的代码 十分不规范。希望早点能用到洁面设计工具 ，提高工作效率。
Posted on August 11th, 2009 at 11:57 pm
Look forward to using the GUI, don’t mind paying for it, as long as its not to much. Also the market place sounds like a very nice IDEA! getting apps cetified and being able to sell right here on ExtJS!
Posted on August 12th, 2009 at 1:28 am
哈哈,能用中文留言 ?
Posted on August 12th, 2009 at 5:35 am
热烈期待我们的新项目可以用上该设计器！手工代码设计界面十分痛苦！
Posted on August 12th, 2009 at 5:39 am
Hi!, I have compiled a list of the top Ajax blogs, and yours was included! check it out at
http://thedailyreviewer.com/top/Ajax
You can claim your link badge at http://thedailyreviewer.com/pages/badges
Posted on August 12th, 2009 at 5:42 am
Great job ExtJS Team!!!
Posted on August 12th, 2009 at 6:00 am
Good job, Man！
Posted on August 12th, 2009 at 7:24 am
[...] Release announcement (bit shortened) (source) [...]
Posted on August 12th, 2009 at 8:03 am
[...] Ext JS 3.0 – Be Outstanding 3.0 released (tagged: Ext javascript work blog ) [...]
Posted on August 12th, 2009 at 8:32 am
[...] Ext folks released Ext version 3 a few weeks back, but we were holding back for their blog post on the matter. There is a lot of [...]
Posted on August 12th, 2009 at 3:07 pm
Omg, this is soo goooddd!!
extjs costa rica
Posted on August 12th, 2009 at 11:30 pm
[...] Link: extjs 3.0 be outstanding [...]
Posted on August 13th, 2009 at 4:50 am
good!i hope that it is Open source！
Posted on August 13th, 2009 at 11:01 am
[...] Ext JS 3.0 – Be Outstanding – On behalf of the Ext Team, I am pleased to announce the final release of Ext JS 3.0. This release is the culmination of tens of thousands of hours of architecture, development and community feedback. [...]
Posted on August 14th, 2009 at 12:45 am
Outstanding, indeed! Congratulations to the Ext JS Team, and my thanks to all those who contribute to the Forums. From yui-ext beta to Ext JS 3.0, every year, every month, every day, it just continues to get better! I’m also thoroughly pleased to see the changes regarding release cycle!
Posted on August 14th, 2009 at 3:38 am
Great Job done here, looking out for the release….
Posted on August 14th, 2009 at 1:00 pm
My experiences as a newbie to EXTJS and JavaScript after about 4 weeks with EXT 3 and while building an interface code generator in our pure o-o environment at the same time:
1) Product is excellent (although I cannot compare to others)
2) The EXT architect(s) knew o-o design very well (I can judge after >20 yrs in Obj-J and Smalltalk)
3) Documentation is lausy, sparse, partially wrong (misleading wording), missing important facts, no full inheritance tree. Doc is totally inacceptable for a non-JS expert. MUST BE IMPROVED (unless this is part of your business model?). Doc was written by programmers. Never good!
4) Forum’s support is good though some members don’t want to hear the truth (3).
Wish list:
a) ***Very much better documentation!***
b) More complete documentation with even more examples!
c) More precise documentation!
d) Easily changeable colors (at least)
e) Complete encapsulation of *all* DOM stuff to avoid all low-level DOM handling.
The lausy doc has cost >50% of my time!
Posted on August 14th, 2009 at 1:01 pm
Typo: Obj-C, of course
Posted on August 17th, 2009 at 8:21 pm
You should definitely turn this designer into a product. How about a Javascript editor with autocomplete and some validation? That would be a killer value-add for ExtJS.
Posted on August 18th, 2009 at 5:09 am
Ext JS and the magic designer or …. not…
I was just reading this on ExtJS blog and I particulary disliked the part about the designer ….
Constructing your interfaces in code will be a thing of the past. We are releasing a Designer Previ……
Posted on August 19th, 2009 at 1:19 pm
Wow! You guys have come along way! Congratulations to the whole team. I will defenitely be trying this out. Thank you all for your hard work. =)
Posted on August 20th, 2009 at 2:24 pm
First off – you guys rock! Hands down the best JS platform out there. I am a bit confused and it seems that I am not the only one on the thread with the same question… what is the difference between PRO and Lite on the designer?
Does the lite version provide you with a designer, but the pro allows you to gen the code? Please explain and put us at rest, as this understanding is causing issues. The company I work for would not be interested in this model… I would have to think this would go for many.
ExtJS – We need some guidance on this – please.
Posted on August 20th, 2009 at 2:51 pm
I’m fired up to use the designer! Hopefully it will have code generation too.
Posted on August 20th, 2009 at 10:31 pm
原来生活可以更美的!
Posted on August 21st, 2009 at 1:48 am
It’s so great!!!
Posted on August 21st, 2009 at 9:17 am
This is so cool, ExtJS is already a new standard…. great job!!!
Posted on August 21st, 2009 at 10:16 am
Charging to export the code will suck! Ohh and someone might just find their way around that.
Posted on August 21st, 2009 at 10:31 am
With any code generation the code previewer is really a waste of disk space.
Posted on August 21st, 2009 at 3:24 pm
saveAs: function(options, cb, scope){
options = options || {};
cb = cb || options.callback;
scope = scope || options.scope;
var file = new air.File(
options.fullPath ? options.fullPath :
((options.path || air.File.documentsDirectory.nativePath) +
(options.name ? air.File.separator + options.name : ”))
);
file.addEventListener(’select’, function(e){
var target = e.target;
var stream = new air.FileStream();
stream.open(target, air.FileMode.WRITE);
stream.writeUTFBytes(options.contents);
stream.close();
Ext.callback(cb, scope, [target]);
});
file.browseForSave(options.text || ‘Save As’);
},
Posted on August 21st, 2009 at 6:19 pm
I am also a newbie but do have a bit of javascript experience and have spent a considerable amount of time with EXT. I would say I have to agree with many of the posts about documentation, samples, etc. I’ve been searching the net for the last 3+ weeks to find the right (AJAX) combination for a new project I am undertaking and have basically come up dry. Many others have builders like you are proposing (tibco GI [FREE], morfik, etc.) but ALL of them make what should be easy, difficult. Yes, they all do a great job on WYSIWYG layout of components, but none of them make it easy to connect to data. As an example: I want the grid columns to be built dynamically from the result set. If I have to do an update, like add a field, why do I need to change it in 10 places. Just change the table and that update should just show up. Any applications we would build would have 30 plus screens. Most all samples are one screen apps. Can we get a multi-screen demo (load/unload screens) with a simple login function please? The bottom line is that most all of these AJAX libraries do a great job on building components, they need to focus more on how the end user works with their code and how to make it easier for them to implement. Until that happens, no one is a winner. I would be more than happy to spend $$ on a builder if it worked that way. BTW, the Designer must be using an old version of Air. Won’t run here…
Posted on August 26th, 2009 at 8:16 am
All infos I need are all here. I’m a newbie and I have more to learn. Thank you so much for all the information.
Posted on August 26th, 2009 at 3:45 pm
Thanks guys for the amazing job. We looked around for frameworks bases on Javascript but was worried as no developer on our team had Javascript experience. This seems to fit perfectly with what are looking for.
Posted on August 28th, 2009 at 2:04 am
There is no mention of a Designer ETA. Can someone from the ExtJS team provide some guidance here. I am new to ExtJS and want to determine how that ETA would impact my first proof-of-concept project using ExtJS. Thanks.
Posted on August 28th, 2009 at 12:00 pm
We’ve been experimenting with various Javascript frameworks, this seems to be the exact tool we need. We’ll have to explore it further.
Will let you know how it goes.
Posted on August 30th, 2009 at 2:03 am
写Extjs代码真的太痛苦了！
Posted on August 30th, 2009 at 9:19 pm
to 楼上的兄弟：
你是初学者吧！？
加油！其实Ext比你想象的容易！
Posted on August 31st, 2009 at 11:12 pm
Thanks for ExtJS team
BTW I can using this tool but ican’t get json code or source
what can I do
Posted on September 3rd, 2009 at 6:58 am
[...] πολύ εντυπωσιακό Javascript Toolkit Ext-JS παρουσιάζει την έκδοση [...]
Posted on September 5th, 2009 at 9:24 pm
[...] ontem oficialmente o lançamento do Ext JS 3.0 no blog do framework. A equipe ressaltou a qualidade do trabalho e parabenizou a todos pelo [...]
Posted on September 8th, 2009 at 10:39 am
我觉得EXT本来就是很简单的东西，没必要把一个原本适合程序员的活，让美工人员也要会，从精髓出发才是最主要的！不看好设计器的诞生！
Posted on September 8th, 2009 at 3:15 pm
Well done yet again! I’m still a Java noob so this tool will help
Posted on September 11th, 2009 at 8:04 am
[...] Ext JS 3.0 Blogs [...]
Posted on September 12th, 2009 at 2:31 am
[...] Blogs [...]
Posted on September 14th, 2009 at 6:49 am
Great job! Hope to learn more from you.
Thanks..
Posted on September 21st, 2009 at 8:22 am
[...] teljes bejelentés: http://www.extjs.com/blog/2009/08/10/ext-js-30-be-outstanding/ Oszd meg [...]
Posted on October 7th, 2009 at 1:37 am
官版出的东西，一定好用！
Posted on October 13th, 2009 at 3:08 pm
I heard EXT-JS haqs significant performance issues compared to previous releases (particularly in IE); is that true? IF So, What is being done to address those issues
Posted on November 10th, 2009 at 4:04 am
Wow, it’s amazing what people can do with Javascript. I didn’t think things like these would be possible with Javascript.
Thanks guys we shall get one of our developers to give it a go.
Posted on November 16th, 2009 at 6:55 am
Where can i download designer for EXT JS. i am new to ext js.
Posted on November 19th, 2009 at 8:37 am
很好很强大，不过找了半天没有找到treepanel，没有吗
Posted on November 21st, 2009 at 7:25 pm
Awesome work.