View Full Version : MakeField Plugin

11 Mar 2010, 10:01 AM
Here is a plugin that has helped me for a while. It turns anything into a field. It is kinda quick and dirty, and has one big caveat: it is not meant for form submission since it does not create a hidden form field. If anyone wants to add that, I'll update this post with the changes. My forms don't work that way (more on this later). Again, I wrote this a while back, so I may be missing some things from newer versions of Ext that I should add in to BasicField. Please point those out!

* @author Steven Roussey
* @version 1.0
* @date 11 March 2009
* @license Ext.ux.form.BasicField and Ext.ux.MakeFieldPlugin are licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
* License details: http://www.gnu.org/licenses/lgpl.html
Ext.ux.form.BasicField = Ext.copyTo(
isFormField : true,
preventMark: true,
validateOnBlur: false,
originalValue: '',
return this.name || this.getItemId();
initValue : function(){
if(this.value !== undefined){
this.originalValue = this.getValue();
beforeBlur : Ext.emptyFn,
isValid: function(){return true;},
getRawValue:function(){return this.value;},
getValue:function(){return this.value;},

Ext.ux.MakeFieldPlugin = function(){};
init: function (comp){
var o = Ext.ux.form.BasicField;

So using this, I can have my own SliderField written like this:

* @class Ext.ux.form.SliderField
* @extends Ext.Slider
* Slider form field.
* @constructor
* Creates a new SliderField
* @param {Object} config Configuration options
Ext.ux.form.SliderField = Ext.extend(Ext.Slider, {
* Creates a new SliderField
* @param {Object} config Configuration options
constructor: function(config)
config = config || {};
Ext.apply(config, {
plugins : ['makefield'].concat(config.plugins || [])
Ext.ux.form.SliderField.superclass.constructor.call(this, config);

Ext.reg('sliderfield', Ext.ux.form.SliderField);

Update: I added a license (which I copied!) at the top, but don't really care, so ping me if you want some other one.