PDA

View Full Version : Simple Field Access plugin Lock/Unlock to restrict or allow input data



brittongr
6 Mar 2011, 3:41 PM
I created this plugin to let the user know which fields are editable and which not.

There two concepts 'lock' and 'restricted' and by default 'allowed'.
Lock means that the field is locked or in readonly mode due to validations according to the values of other fields or something else, but this field can be locked and unlocked.
Restricted means that this field will never be modified manually by the user. So there is no posibility to change a restricted field to allowed.

To unlock a field that is currently locked you must call the function field.setAccess('allowed');
Notice that check boxes are disable when there are in readonly or restricted mode.



/**
* Copyright(c) 2011
*
* Licensed under the terms of the Open Source LGPL 3.0
* http://www.gnu.org/licenses/lgpl.html
* @author Greivin Britton, brittongr@gmail.com
*/
Ext.ns("Ext.ux");

/**
* @class Ext.ux.FieldAccess
* <p>A plugin for Field Components with an access type and readOnly control
* <p>Usage:</p>
* <pre><code>
{
xtype: 'combo',
plugins: [ Ext.ux.FieldAccess ],
fieldAccess:'restricted',//or readOnly or locked
triggerAction: 'all',
fieldLabel: 'Select type',
store: typeStore
}
* </code></pre>
*/
Ext.ux.FieldAccess = (function () {
return {
// Add behaviour at important points in the Field's lifecycle.
init: function (f) {

f.onRender = f.onRender.createSequence(this.onRender);

f.setAccess = this.setAccess;
},
onRender: function () {
this.isCheckBox = this.getXTypes().indexOf('checkbox') != -1;

//para mayor seguridad se verifica si es restricted o readOnly y se configura desde aqui
if (!this.isCheckBox) {
this.setReadOnly(this.fieldAccess == 'restricted' || this.fieldAccess == 'readOnly' || this.fieldAccess == 'locked');

if (this.rendered) {
var container = this.el.up('.x-form-element', 3);
if (container != null) {
if (this.fieldAccess == 'restricted') {
container.addClass('x-form-item-restricted');
this.addClass('x-form-input-restricted');
}
else
if (this.fieldAccess == 'readOnly')
container.addClass('x-form-item-readonly');
else
if (this.fieldAccess == 'locked')
container.addClass('x-form-item-locked');
}
}
}
else
this.disable();
//set asigna la funcion del plugin para que pueda ser llamada desde afuera como una funcion mas del field.
},
/**
* El tipo de acceso solo puede ser cambiado cuando el valor inicial sea diferente de restricted y readOnly
* @param {String} fieldAccess
*/
setAccess: function (fieldAccess) {
if (this.rendered && this.isVisible()) {
//Solo si es diferente de esos dos tipos de accesos de lo contrario no se le puede hacer ninguna modificacion al field.
if (this.fieldAccess != 'restricted' && this.fieldAccess != 'readOnly') {
if (!this.isCheckBox) {
this.setReadOnly(fieldAccess == 'locked');

var container = this.el.up('.x-form-element', 3);

if (fieldAccess == 'locked')
container.addClass('x-form-item-locked');
else
container.removeClass('x-form-item-locked');
}
else
this.setDisabled(fieldAccess == 'locked');
}
}
else {
this.fieldAccess = fieldAccess;
}
}
};
})();
25004

25005

If the icons are not displayed correctly in your form you can enable the lines in the css file or reduce the anchor of the field.

Example of usage:


{
fieldLabel: 'Home',
name: 'home',
anchor:'95%',
value: '(888) 555-1212',
plugins: Ext.ux.FieldAccess,
fieldAccess: 'locked',
},
{
fieldLabel: 'Business',
name: 'business',
anchor:'95%',
plugins: Ext.ux.FieldAccess,
fieldAccess: 'restricted',
}

Grolubao
7 Mar 2011, 6:27 AM
Looks great! Congratz and thanks for sharing!

Diavololt
14 Nov 2011, 1:04 PM
Ext4? I tried to migrate to ext4, it's not working.