Tips & Tricks for Ext JS 3.x

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