inputEx - Group Usage

Basic Group creation

Use the following code to create a basic inputEx group.

var contactFormFields = [ {type: 'select', inputParams: {label: 'Title', name: 'title', selectValues: ['Mr','Mrs','Mme'] } }, {inputParams: {label: 'Firstname', name: 'firstname', required: true } }, {inputParams: {label: 'Lastname', name: 'lastname', value:'Dupont' } }, {type:'email', inputParams: {label: 'Email', name: 'email', required: true, showMsg: true}}, {type:'boolean', inputParams: {label: 'Happy to be there ?', name: 'happy'}}, {type:'url', inputParams: {label: 'Website', name:'website'}} ]; new YAHOO.inputEx.Group({parentEl: 'container1', fields: contactFormFields, legend: 'Tell us about yourself...'});

Composition

The YAHOO.inputEx.Group class inherits from inputEx.Field

new YAHOO.inputEx.ListField({ elementType: { type: 'group', inputParams: { fields: contactFormFields } } , parentEl: 'container2' });

Updated event

How to listen to the updated event :

var el = YAHOO.util.Dom.get('container3'); var group = new YAHOO.inputEx.Group({parentEl: el, fields: contactFormFields }); var logDiv = inputEx.cn('div', null, null, "Log :<br />"); el.appendChild(logDiv); group.updatedEvt.subscribe(function() { logDiv.innerHTML += "Updated at "+(new Date())+"<br />"; });

Collapsible

Collapsible

new YAHOO.inputEx.Group({parentEl: 'container4', fields: contactFormFields, legend: 'User Informations', collapsible: true});

Composition

Composition

contactFormFields.push({ type: 'group', inputParams: { name: 'phone', collapsible: true, legend: 'Phone number', fields: [ {label: 'Home', inputParams: {name: 'home' } }, {label: 'Business', inputParams: {name: 'business' } }, {label: 'Mobile', inputParams: {name: 'mobile' } }, {label: 'Fax', inputParams: {name: 'fax' } } ] } }) var field5 = new YAHOO.inputEx.Group({parentEl: 'container5', fields: contactFormFields}); var button5 = YAHOO.inputEx.cn('button', null, null, 'Get value'); YAHOO.util.Dom.get('container5').appendChild(button5); YAHOO.util.Event.addListener(button5, "click", function() { alert( YAHOO.lang.JSON.stringify(field5.getValue()) ); });

Field descriptions

Specify field descriptions

var descriptedFields = [ {type: 'select', inputParams: {label: 'Title', name: 'title', description: 'Select your gender', selectValues: ['Mr','Mrs','Mme'] } }, { inputParams: {label: 'Firstname', description: 'Your firstname', name: 'firstname', required: true, value:'Jacques' } }, { inputParams: {label: 'Lastname', description: 'Your lastname', name: 'lastname', value:'Dupont' } }, { type:'email', inputParams: {description: 'Your email. We wont send you any commercial information', label: 'Email', name: 'email'}}, {type:'boolean', inputParams: {description: 'Check this box if you are happy to be there', label: 'Happy to be there ?', name: 'email'}}, { type:'url', inputParams: {description: 'Your blog url', label: 'Website', name:'website'}} ]; new YAHOO.inputEx.Group({parentEl: 'container6', fields: descriptedFields, legend: 'User Informations'});

Flatten output value for a sub-group

The parent group will then flatten the sub-group value within its value.

In this example, we return {firstname: ..., lastname: ..., title:... } instead of { MySubForm: {firstname: ..., lastname: ...}, title:... }.

var flattenGroup = new YAHOO.inputEx.Group({ parentEl: 'container7', legend: 'Flatten demo', inputParams: {name: "MyForm"}, fields: [ { type: 'group', flatten: true, inputParams: { name: "MySubForm", fields: [ {inputParams: {label: 'Firstname', name: 'firstname' }}, {inputParams: {label: 'Lastname', name: 'lastname',description: "Firstname and Lastname are within the same sub-group" }} ] }, }, { inputParams: {label: 'Title', name: 'title' } } ] }); flattenGroup.updatedEvt.subscribe(function(e,params) { var value = params[0]; YAHOO.util.Dom.get('container7').appendChild( inputEx.cn('div',null,null, YAHOO.lang.JSON.stringify(value)) ); });