[v1.1] new Ext.form field type - MiscField

[v1.1] new Ext.form field type - MiscField

I wanted a way to display just simple text, with or without a label, in my form layout. Second, I wanted a way to display a label, but with no associated form field. This extension solved all of my needs, and more.

In addition to being able to accomplish the above, you can now also easily add images, buttons, etc, to your form layout.

... this produces what you see in the attached image (along with a couple TextFields for comparison).

Any methods/functions/events/etc that are related to a form input field have been stripped out (i.e. validation, focus/blur, etc) as they are no longer necessary. Some things may work a little differently. For example, you can use HTML tags in the 'value' option. Calling 'miscfield.getRawValue()' will return the MiscField value, exactly as it is, HTML and all. However, calling 'miscfield.getValue()' returns the text only and strips out all HTML tags. Same deal for 'setValue()' and 'setRawValue()'.

This should be obvious, but I'll mention it anyway just in case; using a MiscField is only for visual purposes - as in adding more functionality to the form layout. MiscFields do not post any data when submitting a form.

UPDATE 1: Added new 'disableReset' option as proposed by devnull. When true, this field is untouched when the reset() method is called (i.e. from a form reset). Also, if 'disableReset' is true, but you would like to force a reset manually, you can do so by passing 'true' to the reset method (i.e. miscfield.reset(true);)

UPDATE 2 (9/21/07): Refactored code to be more compatible with Ext 1.1.x (was previously based off of Ext 1.0).

Great extension - addition

Great extension - addition

Hey, this worked great, thanks for posting it. I added a few modifications for my application and to make it easier to change existing TextFields to MiscFields:

In the Extend function:

Code:

/**
* Returns the name attribute of the field if available
* @return {String} name The field name
*/
getName: function(){
return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
},