Form Field Renderer functions

[fpw2377]

Is it possible to override a value before it is set for form fields. In the grid there is a renderer function that will let you override the value being displayed but I can not find anything like this for text, number, date fields. I am trying to use the basicForm.loadRecord method on the client side and it uses the setValue() method, i would like to intercept that method some how.

THanks,

Frank

[r_honey]

One option could be to override Field class's setValue method:

Ext.override(Ext.form.Field, {
    setValue : function () {
        // Whatever you want to to here.
    }
})

GridPanel & fields are not strictly comparable.

you might want to do this for DateField, or TextField etc. specifically as per your requirements. Remember, you would overwrite existing methods. Here is one approach I use sometimes:

Ext.form.Field.prototype.setValueOriginal = Ext.form.Field.prototype.setValue;
Ext.form.Field.prototype.setValue = function(value){
   // My custom pre-processing.

  this.setValueOriginal(value);

  // My custom post-processing.
}

[fpw2377]

That solution would work but when I looked at the extjs documentation they say to Extend instead of override because overriding effects all instances. I think I can figure out how to write the java script to create and register the new xtype to extend the textfield but is there any properties I can use to tell Coolite Server side TextFields to render the custom xtype?

[r_honey]

I think I better write a blog post on this topic. For the time being, for Coolite 0.8.x or earlier, use the InstanceOf attribute:

For Coolite 1.0, override the InstanceOf attribute in your class:

		public override string InstanceOf
		{
			get
			{
				return "ExtJs.ux.YourExtension";
			}
		}

[fpw2377]

thanks r_honey, that is what I was looking for, I spent all day but was able to create my own version of the TextField control called TextFieldFormatted. After looking at the coolite source(version 8.x) for a guide I made my TextFieldFormatted control provide a new listener called ApplyFormatting which is fired from my extended setValue function which lets me change the value before it is displayed, much like the renderer function for columns.

<cc1:TextFieldFormatted ID="TextFieldFormatted1" DataIndex="field6" FieldLabel="Field6" runat="server">
             <Listeners>
                      <ApplyFormatting Handler="value.formattedValue = Ext.util.Format.date(value.originalValue, 'm/d/Y');" />
             </Listeners>
</cc1:TextFieldFormatted>

It is for display purposes only and fits my needs well. I do have a question for anyone who might know: Where do the coolite controls get their "xtype" set from. I ended up using the xtype attribute on my control to make it work, it worked without doing that as long as my control did not live in a container, to get it to work in the form panel i had to add that attribute. The base controls like TextField do not have this attribute yet they get the correct Xtype set no matter where they live.

[r_honey]

fpw2377 (2/24/2010)
I do have a question for anyone who might know: Where do the coolite controls get their "xtype" set from. I ended up using the xtype attribute on my control to make it work, it worked without doing that as long as my control did not live in a container, to get it to work in the form panel i had to add that attribute. The base controls like TextField do not have this attribute yet they get the correct Xtype set no matter where they live.

The base controls like TextField etc. translate directly to core ExtJs controls, which have their xtype set in javascript.
When you instantize an ExtJs Observable class directly (e.g. new Ext.form.TextField), you do not need to pass the xtype in the config object for the constructor. But as items of a container, the javascript generated is normally of the form:

items: [
	{
		xtype: 'textfield',
		inputType: 'password'
	}
]

Clearly, in this case, you are simple passing config objects, and unless you have an xtype for the config object, the ExtJs framework wont know which class to create an object from. So, it becomes necessary to have a xtype for your compnent, and get it registered via .reg method of the component class.