inputEx Documentation
Back to homepage
inputEx Documentation
> Group.js
0.2.2
This is the source view for Group.js
(function() { var inputEx = YAHOO.inputEx, lang = YAHOO.lang, Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; /** * @class Handle a group of fields * @extends inputEx.Field * @constructor * @param {Object} options The following options are added for Groups and subclasses: *
*
fields: Array of input fields declared like { label: 'Enter the value:' , type: 'text' or fieldClass: inputEx.Field, optional: true/false, inputParams: {inputparams object} }
*
legend: The legend for the fieldset (default is an empty string)
*
collapsible: Boolean to make the group collapsible (default is false)
*
collapsed: If collapsible only, will be collapsed at creation (default is false)
*
flatten:
*
*/ inputEx.Group = function(options) { inputEx.Group.superclass.constructor.call(this,options); if(this.hasInteractions) { for(var i = 0 ; i < this.inputs.length ; i++) { this.runInteractions(this.inputs[i],this.inputs[i].getValue()); } } }; lang.extend(inputEx.Group, inputEx.Field, /** * @scope inputEx.Group.prototype */ { /** * Adds some options: legend, collapsible, fields... * @param {Object} options Options object (inputEx inputParams) as passed to the constructor */ setOptions: function(options) { this.options = {}; this.options.className = options.className || 'inputEx-Group'; this.options.fields = options.fields; this.options.id = options.id; this.options.name = options.name; this.options.value = options.value; this.options.flatten = options.flatten; this.options.legend = options.legend || ''; // leave this for compatibility reasons this.inputConfigs = options.fields; this.options.collapsible = lang.isUndefined(options.collapsible) ? false : options.collapsible; this.options.collapsed = lang.isUndefined(options.collapsed) ? false : options.collapsed; this.options.disabled = lang.isUndefined(options.disabled) ? false : options.disabled; // Array containing the list of the field instances this.inputs = []; // Associative array containing the field instances by names this.inputsNames = {}; }, /** * Render the group */ render: function() { // Create the div wrapper for this group this.divEl = inputEx.cn('div', {className: this.options.className}); if(this.options.id) { this.divEl.id = this.options.id; } this.renderFields(this.divEl); if(this.options.disabled) { this.disable(); } }, /** * Render all the fields. * We use the parentEl so that inputEx.Form can append them to the FORM tag */ renderFields: function(parentEl) { this.fieldset = inputEx.cn('fieldset'); this.legend = inputEx.cn('legend', {className: 'inputEx-Group-legend'}); // Option Collapsible //TODO:
should it be renamed to 'collapsed'? if(this.options.collapsible) { var collapseImg = inputEx.cn('div', {className: 'inputEx-Group-collapseImg'}, null, ' '); this.legend.appendChild(collapseImg); inputEx.sn(this.fieldset,{className:'inputEx-Expanded'}); } if(!lang.isUndefined(this.options.legend) && this.options.legend !== ''){ this.legend.appendChild( document.createTextNode(" "+this.options.legend) ); } if( this.options.collapsible || (!lang.isUndefined(this.options.legend) && this.options.legend !== '') ) { this.fieldset.appendChild(this.legend); } // Iterate this.createInput on input fields for (var i = 0 ; i < this.options.fields.length ; i++) { var input = this.options.fields[i]; // Render the field var field = this.renderField(input); this.fieldset.appendChild(field.getEl() ); } // Collapsed at creation ? if(this.options.collapsed) { this.toggleCollapse(); } // Append the fieldset parentEl.appendChild(this.fieldset); }, /** * Instanciate one field given its parameters, type or fieldClass * @param {Object} fieldOptions The field properties as required bu inputEx.buildField */ renderField: function(fieldOptions) { // Instanciate the field var fieldInstance = inputEx.buildField(fieldOptions); this.inputs.push(fieldInstance); // Create an index to access fields by their name if(fieldInstance.options.name) { this.inputsNames[fieldInstance.options.name] = fieldInstance; } // Create the this.hasInteractions to run interactions at startup if(!this.hasInteractions && fieldOptions.interactions) { this.hasInteractions = true; } // Subscribe to the field "updated" event to send the group "updated" event fieldInstance.updatedEvt.subscribe(this.onChange, this, true); return fieldInstance; }, /** * Add a listener for the 'collapsible' option */ initEvents: function() { if(this.options.collapsible) { Event.addListener(this.legend, "click", this.toggleCollapse, this, true); } }, /** * Toggle the collapse state */ toggleCollapse: function() { if(Dom.hasClass(this.fieldset, 'inputEx-Expanded')) { Dom.replaceClass(this.fieldset, 'inputEx-Expanded', 'inputEx-Collapsed'); } else { Dom.replaceClass(this.fieldset, 'inputEx-Collapsed','inputEx-Expanded'); } }, /** * Validate each field * @returns {Boolean} true if all fields validate and required fields are not empty */ validate: function() { var response = true; // Validate all the sub fields for (var i = 0 ; i < this.inputs.length ; i++) { var input = this.inputs[i]; input.setClassFromState(); // update field classes (mark invalid fields...) var state = input.getState(); if( state == inputEx.stateRequired || state == inputEx.stateInvalid ) { response = false; // but keep looping on fields to set classes } } return response; }, /** * Enable all fields in the group */ enable: function() { for (var i = 0 ; i < this.inputs.length ; i++) { this.inputs[i].enable(); } }, /** * Disable all fields in the group */ disable: function() { for (var i = 0 ; i < this.inputs.length ; i++) { this.inputs[i].disable(); } }, /** * Set the values of each field from a key/value hash object * @param {Any} value The group value * @param {boolean} [sendUpdatedEvt] (optional) Wether this setValue should fire the updatedEvt or not (default is true, pass false to NOT send the event) */ setValue: function(oValues, sendUpdatedEvt) { if(!oValues) { return; } for (var i = 0 ; i < this.inputs.length ; i++) { var field = this.inputs[i]; var name = field.options.name; if(name && !lang.isUndefined(oValues[name]) ) { field.setValue(oValues[name], false); // don't fire the updated event ! } else { field.clear(false); } } if(sendUpdatedEvt !== false) { // fire update event this.fireUpdatedEvt(); } }, /** * Return an object with all the values of the fields */ getValue: function() { var o = {}; for (var i = 0 ; i < this.inputs.length ; i++) { var v = this.inputs[i].getValue(); if(this.inputs[i].options.name) { if(this.inputs[i].options.flatten && lang.isObject(v) ) { lang.augmentObject( o, v); } else { o[this.inputs[i].options.name] = v; } } } return o; }, /** * Close the group (recursively calls "close" on each field, does NOT hide the group ) * Call this function before hidding the group to close any field popup */ close: function() { for (var i = 0 ; i < this.inputs.length ; i++) { this.inputs[i].close(); } }, /** * Set the focus to the first input in the group */ focus: function() { if( this.inputs.length > 0 ) { this.inputs[0].focus(); } }, /** * Return the sub-field instance by its name property * @param {String} fieldName The name property */ getFieldByName: function(fieldName) { if( !this.inputsNames.hasOwnProperty(fieldName) ) { return null; } return this.inputsNames[fieldName]; }, /** * Called when one of the group subfields is updated. * @param {String} eventName Event name * @param {Array} args Array of [fieldValue, fieldInstance] */ onChange: function(eventName, args) { // Run interactions var fieldValue = args[0]; var fieldInstance = args[1]; this.runInteractions(fieldInstance,fieldValue); //this.setClassFromState(); this.fireUpdatedEvt(); }, /** * Run an action (for interactions) * @param {Object} action inputEx action object * @param {Any} triggerValue The value that triggered the interaction */ runAction: function(action, triggerValue) { var field = this.getFieldByName(action.name); if( YAHOO.lang.isFunction(field[action.action]) ) { field[action.action].call(field); } else if( YAHOO.lang.isFunction(action.action) ) { action.action.call(field, triggerValue); } else { throw new Error("action "+action.action+" is not a valid action for field "+action.name); } }, /** * Run the interactions for the given field instance * @param {inputEx.Field} fieldInstance Field that just changed * @param {Any} fieldValue Field value */ runInteractions: function(fieldInstance,fieldValue) { var index = inputEx.indexOf(fieldInstance, this.inputs); var fieldConfig = this.options.fields[index]; if( YAHOO.lang.isUndefined(fieldConfig.interactions) ) return; // Let's run the interactions ! var interactions = fieldConfig.interactions; for(var i = 0 ; i < interactions.length ; i++) { var interaction = interactions[i]; if(interaction.valueTrigger === fieldValue) { for(var j = 0 ; j < interaction.actions.length ; j++) { this.runAction(interaction.actions[j], fieldValue); } } } }, /** * Clear all subfields * @param {boolean} [sendUpdatedEvt] (optional) Wether this clear should fire the updatedEvt or not (default is true, pass false to NOT send the event) */ clear: function(sendUpdatedEvt) { for(var i = 0 ; i < this.inputs.length ; i++) { this.inputs[i].clear(false); } if(sendUpdatedEvt !== false) { // fire update event this.fireUpdatedEvt(); } } }); /** * Register this class as "group" type */ inputEx.registerType("group", inputEx.Group); })();
Pages
Index
Getting Started
Overview
Markup structure
Migrate from 0.1.0
Field development
DOM functions
Internationalization
Visualization
Examples
Classes
(treeview)
inputEx
inputEx.AutoComplete
inputEx.BirthdateField
inputEx.CheckBox
inputEx.ColorField
inputEx.ColorField2
inputEx.CombineField
inputEx.DateField
inputEx.DatePickerField
inputEx.DateSplitField
inputEx.DateTimeField
inputEx.DSSelectField
inputEx.EmailField
inputEx.Field
inputEx.FileField
inputEx.Form
inputEx.formForMethod
inputEx.FrenchDate
inputEx.FrenchPhone
inputEx.generateServiceForm
inputEx.Group
inputEx.HiddenField
inputEx.ImagemapField
inputEx.InPlaceEdit
inputEx.IntegerField
inputEx.IPv4Field
inputEx.JsonSchema
inputEx.JsonSchema.Builder
inputEx.ListField
inputEx.MapField
inputEx.MenuField
inputEx.MultiAutoComplete
inputEx.MultiSelectField
inputEx.NumberField
inputEx.PairField
inputEx.PasswordField
inputEx.RadioButton
inputEx.RadioField
inputEx.RTEField
inputEx.SelectField
inputEx.SliderField
inputEx.StringField
inputEx.Textarea
inputEx.TimeField
inputEx.TreeField
inputEx.TypeField
inputEx.UneditableField
inputEx.UpperCaseField
inputEx.UrlField
inputEx.VectorField
inputEx.widget
inputEx.widget.DataTable
inputEx.widget.DDList
inputEx.widget.DDListItem
inputEx.widget.Dialog
inputEx.widget.InputExCellEditor
inputEx.widget.JsonTreeInspector
Files
AutoComplete.js
BirthdateField.js
CheckBox.js
ColorField.js
ColorField2.js
CombineField.js
DataTable-beta.js
DateField.js
DatePickerField.js
DateSplitField.js
DateTimeField.js
ddlist.js
Dialog-beta.js
DSSelectField.js
EmailField.js
Field.js
FileField-beta.js
Form.js
fr.js
FrenchDate.js
FrenchPhone.js
Group.js
HiddenField.js
ImagemapField.js
InPlaceEdit.js
inputex-loader.js
inputex-rpc.js
inputex.js
IntegerField.js
IPv4Field.js
it.js
json-schema.js
json-tree-inspector.js
ListField.js
MapField.js
MenuField.js
MultiAutoComplete.js
MultiSelectField.js
NumberField.js
PairField.js
PasswordField.js
RadioButton.js
RadioField.js
RTEField.js
SelectField.js
SliderField.js
StringField.js
Textarea.js
TimeField.js
TreeField.js
TypeField.js
UneditableField.js
UpperCaseField.js
UrlField.js
VectorField.js
Visus.js
Copyright (c) 2007-2009
Eric Abouaf
. All rights reserved.
Generated by
JsDoc Toolkit
2.0.0 on Wed, 04 Mar 2009 15:41:29 GMT using
neyricjslibs-template
.