Release Notes for Ext JS 4.1.1

Release Date: July 4, 2012
Version Number: 4.1.1

Bugs Fixed

Known Issues

Release Notes for Ext JS 4.1.1 RC 2

Release Date: June 13, 2012
Version Number: 4.1.1 RC 2

Bugs Fixed

Release Notes for Ext JS 4.1.1 RC 1

Release Date: May 15, 2012
Version Number: 4.1.1 RC 1

Bugs Fixed

Release Notes for Ext JS 4.1.0

Release Date: April 20, 2012
Version Number: 4.1.0

Bugs Fixed

Release Notes for Ext JS 4.1.0 RC 3

Release Date: April 10, 2012
Version Number: 4.1.0 RC 3

Bugs Fixed

Release Notes for Ext JS 4.1.0 RC 2

Release Date: March 30, 2012
Version Number: 4.1.0 RC 2

Bugs Fixed

Release Notes for Ext JS 4.1.0 RC 1

Release Date: March 13, 2012
Version Number: 4.1.0 RC 1

Bugs Fixed

Release Notes for Ext JS 4.1.0 Beta 3

Release Date: Feb 17, 2012
Version Number: 4.1.0 Beta 3

Bugs Fixed

Release Notes for Ext JS 4.1.0 Beta 2a

Release Date: Feb 2, 2012
Version Number: 4.1.0 Beta 2a

Bugs Fixed


This beta 2 refresh introduces the Ext JS Page Analyzer which just didn't quite make it in Beta 2. The Page Analyzer helps you understand the performance characteristics of your application as it relates to Ext JS.

More information will follow regarding how to use the Page Analyzer, but to get started today, you'll need to copy the "/examples/page-analyzer" folder to the same server that you want to test (ensuring relative paths to ext-all.js and the resources/css folder).

Open the page-analyzer.html file from that folder and then enter the URL to the page you want to test and hit Load. Once the page loads, there is a breakdown of the layouts executed as well as a simple performance chart.

Look for more details to follow.

Release Notes for Ext JS 4.1.0 Beta 2

Release Date: January 26, 2012
Version Number: 4.1.0 Beta 2

Bugs Fixed

Release Notes for Ext JS 4.1.0 Beta 1

Release Date: December 22, 2011
Version Number: 4.1.0 Beta 1


We are very excited to get Ext JS 4.1.0 Beta 1 out to the community! Contained in this release are literally hundreds of bug fixes. As a first beta, there are several issues that we wanted to fix but decided that they were not critical enough to hold up the release any longer. These are documented in the known issues section of the ReadMe file in the distribution.

I wanted to take a moment to cover some of the internals that have changed. Some of these are new since 4.1 PR1, while other changes were introduced in 4.1 PR1 but have not been previously covered.



As result of the design for the layout engine in 4.1, it is possible for improper configuration (or a bug) to cause a layout run to fail to complete all of its calculations. When this occurs, the layout simply stops and the partial results that have been flushed to the DOM are all that is visible. In some cases, the layout may be 99% complete and the failure may go undetected or appear as a minor visual anomaly. In other cases, the layout may fail early and leave the UI in a clearly broken state (much like a JS error during layout would do in previous versions).


The first step if you suspect you are seeing a layout failure is to enable the layout diagnostics. This is done by replacing the normal "ext-all.js" file with "ext-all-dev.js" and adding a couple additional scripts. Like so:

                    <script type="text/javascript" src="/extjs41/ext-all-dev.js"></script>
                    <script type="text/javascript" src="/extjs41/src/diag/layout/Context.js"></script>
                    <script type="text/javascript" src="/extjs41/src/diag/layout/ContextItem.js"></script>

Obviously, the path to Ext JS 4.1 will vary for your environment. With the above modifications, the diagnostic log can be viewed in Firebug's or Web Inspector's console. For IE, the logs are stored in memory and can be displayed by typing the following in the address bar once the page has loaded:


This can be bookmarked to create a "bookmarklet". The log is limited to 750 lines which can be changed like so:

                    <script type="text/javascript" src="/extjs41/ext-all-dev.js"></script>
                    <script type="text/javascript">
                        Ext.log.max = 1500;

Model and idProperty

A common mis-configuration of Model is to not specify a proper "idProperty". This config property identifies the primary key of the model. This is easy to forget because "idProperty" defaults to "id". In 4.0, if there was no actual field in the Model by this name, you could encounter JS errors under some circumstances. In 4.1, this has been fixed by automatically defining the field by this name as a "string" property if there is no definition given.

This fix can, however, have unexpected side-effects. If you notice that your models have gained an "id" property this is most likely why. The solution is to configure your models with the correct "idProperty" value.

Fields and Their Layouts

In Ext JS 4.1 PR1 and then again in Beta 1, fields and field layouts have undergone several internal changes. Before I dive into them, however, I wanted to cover several new configuration properties related to field rendering. We have talked to several customers who needed to replace the rendering logic of fields (things like the "renderTpl", "fieldSubTpl" or "labelableRenderTpl") to accomplish some basic tweaks for their applications. While this works, the properties being overridden are internal and have changed several times since 4.0. Rather than continue this cycle, we wanted to provide a more stable way to augment fields.

In Beta 1, we have added several "micro" render templates to decorate fields. Typically these will be just strings of simple markup, but they can be full XTemplates. These decorators are as follows:

The use of "afterLabelTextTpl" is demonstrated in two of the examples: /examples/form/dynamic.html and /examples/form/contact-form.html to render a simple "required field" indicator. Their role in rendering is probably obvious from their name. For further details, refer to the docs or the source for the various fieldSubTpl's or labelableRenderTpl. If there are other decorators that might be helpful, just let us know.

In 4.0 and 4.1 PR1 field layouts were a rather complex balance of positioning, floating and measurement with subtle timing dependencies. In Beta 1, field layouts have been modified extensively to allow the browser to do much more of this work. To support IE6 this required the use of tables. There are still some calculations required, typically around height, but this approach eliminated lots of calculation and measurement that we previously had to perform on each field, the cost of which added up quickly.

Panel collapse

In 4.1 PR1, panel collapse was consolidated entirely into Panel. In 4.0, panel collapse was handled by Panel in many cases, but when contained in an Accordion or Border layout, these layouts would get very involved in the collapse/expand process. This change is unlikely to have impact on most applications, but could be important if the animation or other properties of collapsing have been customized.


Masking is now only shared for modal windows. Non-floating and non-modal components will now create their own masks. While support for using Ext.LoadMask on elements has been deprecated in favor of the Ext.dom.Element mask() and unmask() methods, the ability to mask elements is still supported.

Mask management has been improved to handle re-sizing and hiding of the owning component.


In 4.1 Beta 1, the DragDropManager now consults the z-index to identify the top-most target of a drop. While this will fix many use cases of overlapping drop targets, it could also impact customized drag/drop processing.

Store refresh event

In 4.1 Beta 1, stores now fire a 'refresh' event if their content is changed in a significant way. This event has the semantics of the 'datachange' event from Ext JS 3.x and was added because 'datachange' in 4.0 fires for any change to the store (including adding one item).

Bugs Fixed

Release Notes for Ext JS 4.0.7

Release Date: October 19, 2011
Version Number: 4.0.7

Bugs Fixed

Release Notes for Ext JS 4.0.6

Release Date: August 30, 2011
Version Number: 4.0.6

Bugs Fixed

Release Notes for Ext JS 4.0.5

Release Date: July 24, 2011
Version Number: 4.0.5

Bugs Fixed


Release Notes for Ext JS 4.0.4

Release Date: June 29, 2011
Version Number: 4.0.4

Bugs Fixed

Release Notes for Ext JS 4.0.2

Release Date: June 9, 2011
Version Number: 4.0.2

Bugs Fixed

New Features

General Improvements

Documentation Updates

Release Notes for Ext JS 4.0.1

Release Date: May 17, 2011
Version Number: 4.0.1

Bugs Fixed

Documentation Improvements

General Improvements

Release Notes for Ext JS 4.0 Final

Release Date: April 26, 2011
Version Number: 4.0.0

New In This Release

Release Notes for Ext JS 4 Beta 3

Release Date: April 14, 2011
Version Number: 4.0.0beta3

New In This Release

Release Notes for Ext JS 4 Beta 2

Release Date: April 6, 2011
Version Number: 4.0.0beta2

New In This Release

Release Notes for Ext JS 4 Beta 1

Release Date: March 30, 2011
Version Number: 4.0.0beta1

New In This Release

Release Notes for Ext JS 4 PR5

Release Date: March 18, 2011
Version Number: 4.0.0pr5

New In This Release

Release Notes for Ext JS 4 Preview Release 4

Release Date: March 15, 2011
Version Number: 4.0.0pr4

New In This Release

Release Notes for Ext JS 4 PR3

Release Date: March 3, 2011
Version Number: 4.0.0pr3

New In This Release

Release Notes for Ext JS 4 PR2

Release Date: February 23, 2011
Version Number: 4.0.0pr2

New In This Release

API Changes

Known Issues

Release Notes for Ext JS 4 PR1

Release Date: February 16, 2011
Version Number: 4.0.0pr1

New In This Release

This is the first public release of Ext JS 4 (preview). We've prepared a full release overview guide to explore all of the changes made so far.