In an earlier post I showed you how to use binary operators to store multiple privileges/settings in a single integer field. Now I will present to you a simple control for visualizing and modifying such a value.

Ext.namespace("Ext.ux");
Ext.ux.Privileges = function(config){
    var _formPanel = this;
    var items = [];

    for (var key in config.privileges) {
        if (config.privileges.hasOwnProperty(key)) {
            items.push({
                name: "privilege_" + config.privileges[key],
                fieldLabel: key
            });
        }
    }

    Ext.apply(config, {
        defaultType: "checkbox",
        items: items,
		/**
		 * Updates the form according to the current privileges
		 * @param {Integer} p The integer containing all set privileges
		 */
        setValue: function(p){
            var field, values = {}, privilege;
			for (var key in config.privileges) {
				// Loop over all the privileges, set the value to true if set
                if (config.privileges.hasOwnProperty(key)) {
                    privilege = config.privileges[key];
                    values["privilege_" + privilege] = (p == (p | privilege));
                }
            }
			// Update the form
            _formPanel.form.setValues(values);
        },
		/**
		 * Returns an integer representing all set privileges
		 * @return Integer
		 */
        getValue: function(){
            var p = 0, field, privilege;
			for (var key in config.privileges) {
				// Loop over all the privileges and see if it is set
                if (config.privileges.hasOwnProperty(key)) {
                    privilege = config.privileges[key];
                    field = _formPanel.form.findField("privilege_" + privilege);
                    if (field.getValue()) {
						// The privilege is set, lets add it to p
                        p = p | privilege;
                    }
                }
            }
            return p;
        },
		/**
		 * Resets the form
		 */
        clear: function(){
            _formPanel.form.reset();
        }
    });
    Ext.ux.Privileges.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.Privileges, Ext.form.FormPanel);

Using the following code

var _pnlPrivileges= new Ext.ux.Privileges({
	height: 180,
	privileges: {
	    Read: 1,
	    Write: 2,
	    Create: 4,
	    Delete: 8,
	    List: 16,
	    SetPrivileges: 32,
	    Publish: 64
	}
});

you end up with something like this

The controll exposes its functionality in two methods, setValue and getValue – both of these should be easy to understand