inputEx Documentation Back to homepage

### inputEx Documentation > Overview 0.2.2

## Overview

inputEx is built around the Field class. It is an abstract class (we never instantiate it).
All the other field classes inherits directly or indirectly from this base class. (see diagram below)

Warning: this diagram is not complete. See treeview for the full class diagram

## Instantiating a Field / the "type" property :

There are 3 ways to instantiate a Field :

- Calling the class constructor (classic) :
  var field = new inputEx.StringField({name: 'test'});
- Using the inputEx function with the "type" construction:
  var field = inputEx({ type: 'string', inputParams: {name: 'test'} });
- Through a meta-field (see below)

The default "type" associations : (Warning: this table is not complete, but each class follow the same naming conventions.)

type string | class | loader module
--- | --- | ---
boolean | inputEx.CheckBox | inputex-checkbox
color | inputEx.ColorField | inputex-colorfield
date | inputEx.DateField | inputex-datefield
email | inputEx.EmailField | inputex-emailfield
form | inputEx.Form | inputex-form
group | inputEx.Group | inputex-group
hidden | inputEx.HiddenField | inputex-hiddenfield
html | inputEx.RTEField | inputex-rtefield
inplaceedit | inputEx.InPlaceEdit | inputex-inplaceedit
IPv4 | inputEx.IPv4Field | inputex-ipv4field
list | inputEx.ListField | inputex-listfield
password | inputEx.PasswordField | inputex-passwordfield
select | inputEx.SelectField | inputex-selectfield
string | inputEx.StringField | inputex-stringfield
text | inputEx.Textarea | inputex-textarea
type | inputEx.TypeField | inputex-typefield
uneditable | inputEx.UneditableField | inputex-uneditablefield
url | inputEx.UrlField | inputex-urlfield

To link a class with a "type", we use :

inputEx.registerType(inputEx.StringField, 'string');

## Meta-Fields :

Some special fields called meta-fields take one or multiple "type" construction objects as configuration.

- Group: A group of fields. It is itself a Field so it can be combined with any other field.
- Form: A group that provide ajax form capabilities.
- List: list of any subfield.
- InPlaceEdit: Make any subfield inplace-editable.
- Typefield: A special field that returns a config object to create an instance through the inputEx.buildField function. We create a form for each Field class to define the parameters for the specified field.

## Insert a Field into the DOM :

var field = inputEx.FieldClass({...options...}); parentEl.appendChild( field.getEl() ); // or var field = inputEx.FieldClass({...options..., parentEl: parentEl}); // or var field = inputEx.FieldClass({...options..., parentEl: 'parentElId'});

## The "updated" event :

All the fields fire the same event when they are "updated".

To subscribe this event for a field, use : (see YUI Custom Events for more informations)

myField.updatedEvt.subscribe(function(e,value) { // value = new value returned by getValue ...code here... }, scope, true);

This event is fired when you use a setValue on the field. If you want to disable this behaviour, pass "false" as second argument to the setValue and the event won't be fired.

// This setValue won't fire the updatedEvt myField.setValue("My Value", false);

Copyright (c) 2007-2009 Eric Abouaf. All rights reserved.
Generated by JsDoc Toolkit 2.0.0 on Wed, 04 Mar 2009 15:41:32 GMT using neyricjslibs-template.