PDA

View Full Version : form plugin



albeva
4 May 2010, 5:25 AM
here is a simple plugin that will change any panel into a form. The usefulness of this is to avoid unnecessary level of nesting. Pseudo code on how you can use this:
var p = new Ext.TabPanel({
plugins : 'form',
items : [{
... // form 1
}, {
... // form 2
}]
});
...
var form = p.getForm();The plugin itself:
Ext.ns('Ext.ux');
/**
* Simple plugin that will turn any plugin into a form
* this helps to avoid unneeded level of nesting
*
* @author Albert Varaksin
* @version 1.0
* @extends Object
*/
Ext.ux.FormPlugin = Ext.extend(Object, {

/**
* Initalize the plgugin
*
* @param {Ext.Panel} p
*/
init : function(p) {
// basic form
var f = this._form = new Ext.form.BasicForm(null, {});
// init the <form> element
if (!p.rendered) {
p.on('render', function() {f.initEl(p.body)});
} else {
f.initEl(p.body);
}
// apply the fields
var isField = Ext.form.FormPanel.prototype.isField;
var fn = function(c) {
if(isField(c)){
f.add(c);
}else if(c.findBy && c != p){
//each check required for check/radio groups.
if(c.items && c.items.each){
c.items.each(fn, this);
}
}
};
p.items.each(fn, this);
// apply data to the panel
Ext.apply(p, {
bodyCfg : {
tag : 'form'
},
_form : f,
getForm : function() { return this._form; }
});
// destroy
p.on('destroy', this.onDestroy, this);
},

/**
* Called apon destruction
*/
onDestroy : function() {
this._form.destroy();
delete this._form;
}
});
Ext.preg('form', Ext.ux.FormPlugin);