PDA

View Full Version : Ext.ux.plugins.FormBind - Bind any component to a form



plalx
15 Mar 2011, 10:27 AM
A simple plugin for Ext.Component that will sync the disabled state of a component contained in any container with the validity state of a form. This can be useful when having a window that contains a form while the buttons are on the window.

Example of use:


new Ext.Window({
title: 'Ext.ux.plugins.FormBind',
width: 300,
height: 150,
layout: 'fit',
items: {
xtype: 'form',
monitorValid: true,
id: 'my-form',
bodyStyle:'padding: 10px;',
border: false,
items: {
xtype: 'textfield',
allowBlank: false,
fieldLabel: 'Cannot be blank',
anchor: '95%'
}
},
buttons: [
{
text: 'Save',
plugins: {
ptype: 'Ext.ux.plugins.FormBind',
form: 'my-form'
}
}
]
}).show();
Ext.ns('Ext.ux.plugins');

/**
* @author Alexandre Potvin Latreille (plalx)
*
* @class Ext.ux.plugins.FormBind
* @extends Ext.util.Observable
*
* A simple plugin for Ext.Component that will sync the disabled state of a component
* with the validity state of a form.
* Notes:
* - The form has to be configured with {@link Ext.form.FormPanel#monitorValid monitorValid}: true;
* - Be careful when binding form fields. If a field is bound to its own form and that field can be invalid,
it might create an infinite loop, since disabling the field will invalidate it's status, causing the form
to be valid, if it was the only invalid field.
*
* @constructor
* @param {Object} config The config object
*
*/

/**
* @cfg {Ext.form.FormPanel/String} form The form or the id of the form. This will be used by the default {link #getForm}
* implementation to retrive the form.
*/
Ext.ux.plugins.FormBind = Ext.extend(Ext.util.Observable, {
/**
* @cfg {Boolean} enabled
* Defaults to true. When set to true, the plugin will initially be enabled.
* @type
*/

/**
* Indicates if the plugin is enabled or disabled. Read-only.
* @type Boolean
* @property enabled
*/
enabled: true,

constructor: function(config) {
var me = this;

Ext.apply(me, config);

me.addEvents(
/**
* @event
* Fires when the plugin gets enabled/disabled.
* @param {Ext.ux.plugins.FormBind} plugin The plugin
* @param {Boolean} enabled The state of the plugin
*/
'pluginstatechange',
/**
* @event
* Fires before the plugin gets enabled/disabled.
* @param {Ext.ux.plugins.FormBind} plugin The plugin
* @param {Boolean} enabled The state in which the plugin will be set
*/
'beforepluginstatechange',
/**
* @event
* Fires before the component gets enabled/disabled.
* @param {Ext.ux.plugins.FormBind} plugin The plugin
* @param {Ext.Component} cmp The component
* @param {Boolean} enabled The state in which the component will be set.
*/
'beforecmpstatechange'
);

Ext.ux.plugins.FormBind.superclass.constructor.call(me, config);
},
init: function(c) {
var me = this;

/**
* The component on which the plugin was applied.
* @type Ext.Component
* @property cmp
*/

if (c instanceof Ext.Component) {
me.cmp = c;

if (me.enabled) {
me.enabled = false;
me.enable(true);
}
}
},
/**
* Enables or disables the plugin.
* @param {Boolean} enabled True to unable, false to disable.
* @param {Boolean} silent True to prevent events from firing.
*/
setEnabled: function(enabled, silent) {
var me = this;
if (me.enabled !== enabled && (silent? true: me.fireEvent('beforepluginstatechange', me, enabled)) !== false) {
me.getForm()[enabled? 'on': 'un']('clientvalidation', me.onClientValidation, me);
me.enabled = enabled;
me.fireEvent('pluginstatechange', me, enabled);
}
},
/**
* Enables the plugin.
*/
enable: function() {
this.setEnabled(true);
},
/**
* Disables the plugin.
*/
disable: function() {
this.setEnabled(false);
},

/**
* @cfg {Function} getForm A method that returns the {link Ext.form.FormPanel form} to which the component should be bound to.
* Defaults to a basic implementation that will resolve the reference using the {link #form} configuration option.
*/
getForm: function() {
var me = this;
if (!Ext.isObject(me.form)) {
me.form = Ext.getCmp(me.form);
}
return me.form;
},

//@private
onClientValidation: function(form, valid) {
var me = this;
if (me.fireEvent('beforecmpstatechange', me, me.cmp, valid) !== false) {
me.cmp.setDisabled(!valid);
}
}
});

Ext.preg('Ext.ux.plugins.FormBind', Ext.ux.plugins.FormBind);