21 March 2011

Ext JS: relayEvents

I have found that the relayEvents method in Ext JS (2.x) is one of the most useful and code-saving techniques one can use.  The purpose of the method is to allow one object to listen to the custom events of another object.

I have found that the documentation is not that good, which can make somewhat RelayEvents hard to use.  Here is my shorthand to make is easy:


listener.relayEvents(broadcaster, ['custom event a', 'custom event b']);

Where:

  • listener: The object listening for events.  Register the array events in the listeners collection of the object
  • broadcaster: The object firing the events.  To fire the event use the fireEvent('custom event a') method within the broadcaster to fire the event

10 March 2011

Override setValue in Ext JS

I am working with Ext JS 2.x and have the need to format numeric values, such as percentages and comma delimited values.

The best way I know to format the numbers is to override the setValue function of the field. My original plan was to put the formatting in the 'change' event, but calling the setValue in the code does not call this event.

The way to override setValue method is easy, but not obvious. The directions are as follows:


[Namespace].form.[FieldName] = Ext.extend(Ext.form.Field {

    constructor: function (config) {

        /// constructor logic here
        [Namespace].form.[FieldName].superclass.constructor.apply(this, arguments);

    },

    setValue: function (val) {

        /// format logic here for val argument
        return [Namespace].form.[FieldName].superclass.SetValue.call(this, val);

    }

});