PDA

View Full Version : MakeField Plugin



stever
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: '',
getName:function(){
return this.name || this.getItemId();
},
initValue : function(){
if(this.value !== undefined){
this.setValue(this.value);
}
this.originalValue = this.getValue();
},
beforeBlur : Ext.emptyFn,
isValid: function(){return true;},
getRawValue:function(){return this.value;},
getValue:function(){return this.value;},
setRawValue:function(v){this.value=v;},
setValue:function(v){this.value=v;}
},
Ext.form.Field.prototype,
[
'reset',
'clearInvalid',
'isDirty',
'validate',
'processValue',
'validateValue',
'markInvalid',
'clearInvalid',
'getMessageHandler',
'getErrorCt',
'alignErrorIcon',
'showField',
'hideField',
'setFieldVisible',
'append'
]
);

Ext.ux.MakeFieldPlugin = function(){};
Ext.ux.MakeFieldPlugin.prototype={
init: function (comp){
var o = Ext.ux.form.BasicField;
Ext.applyIf(comp.superclass,o);
Ext.applyIf(comp,o);
comp.initValue();
}
};
Ext.preg('makefield',Ext.ux.MakeFieldPlugin);



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

Ext.namespace('Ext.ux.form');
/**
* @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.