1. #1
    Sencha User brittongr's Avatar
    Join Date
    Jun 2007
    Location
    Panama
    Posts
    109
    Vote Rating
    3
    brittongr is on a distinguished road

      0  

    Arrow Simple Field Access plugin Lock/Unlock to restrict or allow input data

    Simple Field Access plugin Lock/Unlock to restrict or allow input data


    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.

    Code:
    /**
     * 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;
                }
            }
        };
    })();




    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:

    Code:
      {
                    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',
                }
    Last edited by brittongr; 6 Mar 2011 at 3:44 PM. Reason: aligned image
    Greivin Britton

    My Extensions:
    Ext.ux.NumericField: Number field with support for currencySymbol, thousand separator, international...
    Ext.ux.PagerSizeSelector: A plugin that allows the change page size with just one click.
    Ext.ux.FieldAccess: A plugin to let the user know which fields are editable.

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    Looks great! Congratz and thanks for sharing!

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    27
    Vote Rating
    0
    Diavololt is on a distinguished road

      0  

    Default Ext4

    Ext4


    Ext4? I tried to migrate to ext4, it's not working.

Similar Threads

  1. Can't save data if there is a : ' (quote) in the input field
    By lpastor in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 19 Aug 2009, 12:41 PM
  2. [SOLVED]Data Record only allows access to one field
    By jp2008 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 30 Apr 2009, 7:46 AM
  3. validation layout with simple input field
    By wiulma in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 3 Oct 2008, 1:43 AM
  4. column lock plugin with Dynamic column model plugin
    By stephen.lordson in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 18 Jun 2008, 8:42 AM

Thread Participants: 2

Tags for this Thread