# inputEx - ListField Usage

## Basic ListField creation

Use the following code to create a basic inputEx ListField.

var field = new inputEx.ListField({ name: 'websiteUrl', listLabel: 'Websites', elementType: {type: 'url'}, value: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com'], parentEl: 'container1' }); var button = inputEx.cn('button', null, null, 'getValue()'); YAHOO.util.Dom.get('container1').appendChild(button); YAHOO.util.Event.addListener(button, 'click', function() { alert( YAHOO.lang.JSON.stringify(field.getValue())); }); var button2 = inputEx.cn('button', null, null, 'setValue()'); YAHOO.util.Dom.get('container1').appendChild(button2); YAHOO.util.Event.addListener(button2, 'click', function() { field.setValue(['http://www.sncf.com', 'http://www.clicrdv.com', 'http://www.neyric.com', 'http://javascript.neyric.com/wireit']); }); var button3 = inputEx.cn('button', null, null, 'Clear'); YAHOO.util.Dom.get('container1').appendChild(button3); YAHOO.util.Event.addListener(button3, 'click', function() { field.setValue([]); });

## Sortable list

Example for the sortable ListField

var field2 = new inputEx.ListField({ listLabel: 'Reorder example', elementType: {type: 'string'}, value: ['one', 'two', 'three', 'four'], parentEl: 'container2', sortable: true }); var buttonGetValue = inputEx.cn('button', null, null, 'getValue()'); YAHOO.util.Dom.get('container2').appendChild(buttonGetValue); YAHOO.util.Event.addListener(buttonGetValue, 'click', function() { alert( YAHOO.lang.JSON.stringify(field2.getValue())); });

## Updated event

How to listen to the updated event :

var field3 = new inputEx.ListField({parentEl: 'container3', value: ["one", "two", "three", "four"], sortable: true }); var logDiv = inputEx.cn('div', null, null, "Log :"); YAHOO.util.Dom.get('container3').appendChild(logDiv); field3.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value "+YAHOO.lang.JSON.stringify(value); });

## Use buttons instead of links

Use buttons :

new inputEx.ListField({ listLabel: 'Websites', elementType: { type: 'select', choices: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com', 'http://javascript.neyric.com/blog', 'http://javascript.neyric.com/wireit', 'http://neyric.github.com/inputex'] }, value: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com'], parentEl: 'container4', useButtons: true // set to true to display buttons instead of links });

## Set maximum/minimum number of items

Use the maxItems and minItems options :

new inputEx.ListField({ listLabel: 'Websites', maxItems: 4, minItems: 1, elementType: { type: 'select', choices: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com', 'http://javascript.neyric.com/blog', 'http://javascript.neyric.com/wireit', 'http://neyric.github.com/inputex'] }, value: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com'], parentEl: 'container5', useButtons: true });

## Field names

The names are automatically set on sub-fields, so that standard forms can work. Click the button and check the URL

new inputEx.Form( { fields: [ { name: 'firstVar', label: "First variable", value: "my-custom-value" }, { type: 'list', label: "My Array", maxItems: 4, minItems: 1, elementType: {type: 'string'}, value: ['this', 'is', 'a', 'test'], name: 'myarray', useButtons: true , sortable: true }], buttons: [{type: 'submit', value: 'Test to send the GET request'}], method: 'GET', parentEl: 'container6' });