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);