PDA

View Full Version : Ext.ux.FormWindow



KirkOlson
6 Jun 2008, 3:12 AM
Hello all,
I wanted the buttons on a Window to behave in the same way buttons on a form do when the form's monitorValid property is set. That is: the submitbutton should be disabled when a formpanel on the window contains invalid fields. I searched the forums for this and found that only one person (http://extjs.com/forum/showthread.php?t=16905) needed this too. TyranDLS made some suggestions on how to handle this and I thought I'd do just that. Hey at least I made one person happy today, not including myself ;)

With the Ext.ux.FormWindow you can set the monitorValid and monitorPoll properties for a window just as you would do for a FormPanel. If a button on this window has the propery formBind set to true the button will be disabled as long as there are invalid fields on any formpanel on the window.

It's my very first Ext extension, I hope you like it.


/**
* Ext.ux.Wizard Extension Class
*
* @author Kirk Olson
* @version 1.0
* @scoutkirkolson@hotmail.com
*
* @class Ext.ux.FormWindow
* @extends Ext.Window
*/
Ext.namespace('Ext.ux');

//constructor
Ext.ux.FormWindow = function(config) {
Ext.apply(this, config);
Ext.ux.FormWindow.superclass.constructor.call(this);
};

// extend
Ext.extend(Ext.ux.FormWindow, Ext.Window, {
monitorValid:false,
monitorPoll:200,

// private
initComponent :function(){
Ext.ux.FormWindow.superclass.initComponent.call(this);

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'
);
},

// private
initEvents : function(){
Ext.ux.FormWindow.superclass.initEvents.call(this);

if(this.monitorValid){ // initialize after render
this.startMonitoring();
}
},

/**
* Starts monitoring of the valid state of this form. Usually this is done by passing the config
* option "monitorValid"
*/
startMonitoring : function(){
if(!this.bound){
this.bound = true;
Ext.TaskMgr.start({
run : this.bindHandler,
interval : this.monitorPoll || 200,
scope: this
});
}
},

/**
* Stops monitoring of the valid state of this form
*/
stopMonitoring : function(){
this.bound = false;
},

// private
bindHandler : function(){
if(!this.bound){
return false; // stops binding
}

var valid = true;
this.cascade(function(comp) {
if (comp.form) {
if (!comp.form.isValid()) {
valid=false;
return false;
}
}
});

if(this.buttons){
for(var i = 0, len = this.buttons.length; i < len; i++){
var btn = this.buttons[i];
if(btn.formBind === true && btn.disabled === valid){
btn.setDisabled(!valid);
}
}
}

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

chalu
6 Jun 2008, 4:23 AM
I have run into the need to do something exactly like this, thanks you've got it figured out. On a second thought, I think it will be more elegant if this is implemented as a plugin so that any window can use it, even any panel :-/:-/
It gets attached as a plugin to a container component, monitors valid state for its container's form(s) and disables / enables the button (even in tbar or bbar) bound to it.

How about that :-/:-/:-/