Tips & Tricks for Ext JS 3.x

Colin Ramsay

November 2010


Learning Ext JS 3.2

Learning Ext JS 3.2

Build dynamic, desktop-style user interfaces for your data-driven web applications using Ext JS

  • Learn to build consistent, attractive web interfaces with the framework components
  • Integrate your existing data and web services with Ext JS data support
  • Enhance your JavaScript skills by using Ext's DOM and AJAX helpers
  • Extend Ext JS through custom components
  • An interactive tutorial packed with loads of example code and illustrative screenshots


        Read more about this book      

(For more resources on Ext JS, see here.)

Objective: Button focus and tab orders are built in.

Tip: Button focus and tab orders are built into Ext JS Components. For the MessageBox Component, the OK or Yes button will be the default action, so pressing Enter on our keyboard when a MessageBox appears will trigger that button, and pressing Tab will move us through the buttons and other items in the MessageBox. Windows have the ESC key mapped to the Close tool. When using button bars in other Componenets, tabbing through the buttons is enabled by default and in Toolbars like the PagingToolbar tabbing is also built in.

Objective: Duplicate Component ID's must be avoided.

Tip: Having duplicate IDs in our document can lead to strange behavior, such as a widgets always showing up in the upper-left corner of the browser, and must therefore be avoided.

Objective: Other uses of Button config on a MessageBox.

Tip: The buttons config for a MessageBox can also specify the text to display on the button. Instead of passing a Boolean value, just pass it the desired text to display, for example, {yes: 'Maybe'}.

Objective: Ext does not require any pre-existing markup.

Tip: Ext does not require any pre-existing markup for it to function, this is because it generates everything it needs on its own. This let's us start with a very simple HTML document containing an empty body.

Objective: Avoid using the built in JavaScript alert messages.

Tip: Standard JavaScript alert messages pause code execution, which can cause unexpected results. You should not be using the built in JavaScript alert messages, and instead use Ext's MessageBox widget or console messages (when available), which does not pause that code execution.

Objective: Creating form Field validation types (vType).

Tip: A search of the Ext JS forum is likely to come back with a vType that someone else has created with exactly what you need, or close enough to use as a starting point for your own requirements, so search the Ext JS Forums before trying to write your own.

Objective: Simple and quick static options for a ComboBox.

Tip:; A quick way to specify a few static options for a ComboBox is to pass an array to the store config, which will auto-create the store for you. So if we wanted a ComboBox that had 'Yes' and 'No' as options, we would provide ['Yes','No'] as the store config value.

        Read more about this book      

(For more resources on Ext JS, see here.)

Objective:  What events exist for each Component.

Tip:  A list of valid events to listen for can be found at the bottom of the API documentation page for each Component, along with the arguments the listeners are passed when they get fired, which are unique to each event.

Objective:  The xtype config element is not always mandatory.

Tip:  There is a default xtype for each Components children, for example a Toolbars children default to a button. We can leave out the xtype config element if the default is the type we want, but I like to include it in most cases just for clarity.

Objective:  Avoid the autoLoad option for complex work.

Tip:  Loading HTML using the autoLoad option is meant for loading HTML fragments, not full HTML documents, so Scripts and stylesheets will not be evaluated. The autoLoad option should not be used as a substitute for adding child components if Components are really whats required.

Objective:  Layout configuration options.

Tip:  Many layout configuration options are defined on the container component, not on each of the children. For instance, the labelWidth config in a Form layout is defined on the container instead of on each form field contained within. The Ext JS documentation is a great place to figure out what configuration options go where.

Objective:  Shorthand version of Component names.

Tip:  Some Components have shorthand names, such as the Ext.MessageBox, which has a shorthand version—Ext.Msg. These shorthand versions can make your code a little more concise, and it's up to you which one you use, as they're both functionally equivalent.

Objective:  Only one Ext.MessageBox at a time

Tip:  You can only use a single Ext.MessageBox at a time. If you try to pop up two boxes at the same time, the first will be replaced by the second. In some cases, you might want to check for the presence of an existing MessageBox as to not inadvertently overwrite the existing message it is presenting. Ext.Msg.isVisible() can be used for that.

Objective:  Chart URL might need to be set in certain applications.

Tip:  If charts are being used on an Intranet application that does not have external Internet access, then the Chart URL must be set, otherwise charts will appear blank.

        Read more about this book      

(For more resources on Ext JS, see here.)

Objective: Tooltips can be styled in Ext JS Charts.

Tip: The Tooltips used in Charts can be styled just like the other elements of a chart using the options available in the extraStyles config object. Check the API documentation for the options to set.

Objective: The function Ext.Fx.scale has restrictions in Scaling.

Tip: Ext.Fx.scale works only with elements that have their display style set to block, which allows the width and height changes to take effect. Using it on inline elements won't trigger an error, but you will not see any change in the dimensions of the element, either.

Objective:The easing effects supported by Ext JS can vary.

Tip:The easing effects supported by Ext JS vary depending on which adapter you're using. If you're using the Ext JS Base adapter, then you'll get the full works.

Objective:Ext.Element compared with Ext.Fx in animations.

Tip: Ext.Element animations can be used at the same time as the ones from Ext.Fx, but they are not guaranteed to support the queuing features that are always available with the Ext.Fx methods.

Objective:Components have minimal Drag & Drop features by default.

Tip:There are so many variations of drag-and-drop that it's impossible for Ext to understand what you're trying to do in a particular Component. Instead, it makes it trivial to add your own actions to drag-and-drop operations by using the DD Classes.

Objective: Delaying the render event from firing.

Tip: When rendering complex components, the render event can sometimes fire before rendering has been completed by the browser. Adding a delay config of 100 milliseconds to your listener can in most cases prevent problems with elements not being ready. Were simply giving the browser time to catch up.


In this article we had a look at various tips & tricks to make working with Ext JS 3.2 a little easier.

Further resources on this subject:

You've been reading an excerpt of:

Learning Ext JS 3.2

Explore Title