Ext JS Tips

Client side caching of data via stores is one of the most useful features of Ext JS.
However in a multi user environment, you may wish to give users the ability to refresh their stores, perhaps to reflect a change made by another user. This is easy to do with grids as you can add a refresh tool to the panel title. But how do you go about providing a nice refresh button for a combo box? 
By overriding the default initlist function of the combo box you can render a nice refresh tool in the combo view's title.

Some useful additional store functions 

• getEncodedData
• setAll
• getBetween
• min
• max

Install as follows

When you use a combo box as an editor for a column in an Ext Editor Grid Panel, you want to display the combo's display field, not the combo's value field. Ie you may have a combo with values 1,2,3 but these have descriptions (display fields) of red, green and blue.

To do so the renderer function  of the column model editor needs to access the grid (so it can get the cellEditor and hence the combo).

Ext does a great job of providing visual cues when form fields are invalid, eg

But what happens if your form field is on an inactive tab panel? The visual cue can't be seen yet the form won't submit.

This is where the Ext.Fx come in handy.

By overriding the default markInvalid field functio, we can do a search through it's parents to find if it is on a tab panel.

Ext.ux.RemoteMenu is a menu that add some new config options to menu items namely

• store
• staticItems
• labelField
• loadingText
• itemIcon/iconField and
• clickHandler

The menu initially renders with the default loading animated gif and the passed loadingText.

When the menu is shown the store loads and the items are added from the store.

By default you cannot have tooltips on form fields using Ext Js.
This is because by default tooltips are used to display validation messages.
Tooltip validation
To override this and use tooltips to display user help you first need to turn off this default behaviour as follows: