inputEx - ListField Usage

Basic ListField creation

Use the following code to create a basic inputEx ListField.

var exampleDiv = YAHOO.util.Dom.get('container1'); var field = new YAHOO.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: exampleDiv }); var button = YAHOO.inputEx.cn('button', null, null, 'getValue()'); exampleDiv.appendChild(button); YAHOO.util.Event.addListener(button, 'click', function() { alert( YAHOO.lang.JSON.stringify(field.getValue())); }); var button2 = YAHOO.inputEx.cn('button', null, null, 'setValue()'); exampleDiv.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 = YAHOO.inputEx.cn('button', null, null, 'Clear'); exampleDiv.appendChild(button3); YAHOO.util.Event.addListener(button3, 'click', function() { field.setValue([]); });

Sortable list

Example for the sortable ListField

var field2 = new YAHOO.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 el = YAHOO.util.Dom.get('container3'); var field = new YAHOO.inputEx.ListField({parentEl: el, value: ["one", "two", "three", "four"], sortable: true }); var logDiv = YAHOO.inputEx.cn('div', null, null, "Log :<br />"); el.appendChild(logDiv); field.updatedEvt.subscribe(function() { logDiv.innerHTML += "Updated at "+(new Date())+"<br />"; });

Use buttons instead of links

Use buttons :

new YAHOO.inputEx.ListField({ listLabel: 'Websites', elementType: {type: 'select', inputParams:{ selectValues: ['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://javascript.neyric.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 });