PDA

View Full Version : New Feature: formBind any item in a FormPanel



Scott Murawski
3 Dec 2009, 12:01 PM
I want a FormPanel but with the Save button inside the main panel area and not in the button footer. Instead of writing my own custom clientvalidation just for that special case, I made an override that handles a formBind anywhere in the "items" part of the FormPanel.

The reason why you may want this is if you have a single row FormPanel using a column layout, for example your layout could be like so:



Field Label1: Field Label2: Field Label3: Save
TextField TextField TextField Button
This is Ext 3.0.0 code


Ext.override(Ext.FormPanel, {
initComponent : function(){
this.form = this.createForm();
Ext.FormPanel.superclass.initComponent.call(this);

this.bodyCfg = {
tag: 'form',
cls: this.baseCls + '-body',
method : this.method || 'POST',
id : this.formId || Ext.id()
};
if(this.fileUpload) {
this.bodyCfg.enctype = 'multipart/form-data';
}
this.initItems();

this.addEvents(
/**
* @event clientvalidation
* If the monitorValid config option is true, this event fires repetitively to notify of valid state
* @param {Ext.form.FormPanel} this
* @param {Boolean} valid true if the form has passed client-side validation
*/
'clientvalidation'
);

this.additionalFormBinds = this.find("formBind", true);

this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
},

bindHandler : function(){
var valid = true;
this.form.items.each(function(f){
if(!f.isValid(true)){
valid = false;
return false;
}
});

if ( this.fbar || this.additionalFormBinds.length ) {
var form_binds = [];

this.fbar && form_binds.push(this.fbar.items.items);
this.additionalFormBinds.length && form_binds.push(this.additionalFormBinds);

for ( var i = 0, len1 = form_binds.length; i < len1; i++ ) {
var fitems = form_binds[i];

for ( var j = 0, len2 = fitems.length; j < len2; j++ ) {
var btn = fitems[j];
if( btn.formBind === true && btn.disabled === valid ) {
btn.setDisabled(! valid);
}
}
}
}

this.fireEvent('clientvalidation', this, valid);
}
});