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

Updated event

How to listen to the updated event :

Use buttons instead of links

Use buttons :

Set maximum/minimum number of items

Use the maxItems and minItems options :

Field names

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