inputEx - ListField Usage

Basic ListField creation

Use the following code to create a basic inputEx ListField.


1	var field = new inputEx.ListField({
2	name: 'websiteUrl',
3	listLabel: 'Websites',
4	elementType: {type: 'url'},
5	value: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com'],
6	parentEl: 'container1'
7	});
8	var button = inputEx.cn('button', null, null, 'getValue()');
9	YAHOO.util.Dom.get('container1').appendChild(button);
10	YAHOO.util.Event.addListener(button, 'click', function() { alert( YAHOO.lang.JSON.stringify(field.getValue())); });
11	var button2 = inputEx.cn('button', null, null, 'setValue()');
12	YAHOO.util.Dom.get('container1').appendChild(button2);
13	YAHOO.util.Event.addListener(button2, 'click', function() {
14	field.setValue(['http://www.sncf.com',
15	'http://www.clicrdv.com',
16	'http://www.neyric.com',
17	'http://javascript.neyric.com/wireit']);
18	});
19	var button3 = inputEx.cn('button', null, null, 'Clear');
20	YAHOO.util.Dom.get('container1').appendChild(button3);
21	YAHOO.util.Event.addListener(button3, 'click', function() {
22	field.setValue([]);
23	});
	view plain \| print \| ?

Example for the sortable ListField


1	var field2 = new inputEx.ListField({
2	listLabel: 'Reorder example',
3	elementType: {type: 'string'},
4	value: ['one', 'two', 'three', 'four'],
5	parentEl: 'container2',
6	sortable: true
7	});
8	var buttonGetValue = inputEx.cn('button', null, null, 'getValue()');
9	YAHOO.util.Dom.get('container2').appendChild(buttonGetValue);
10	YAHOO.util.Event.addListener(buttonGetValue, 'click', function() {
11	alert( YAHOO.lang.JSON.stringify(field2.getValue()));
12	});
	view plain \| print \| ?

How to listen to the updated event :

Log :


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

Use buttons :


1	new inputEx.ListField({
2	listLabel: 'Websites',
3	elementType: {
4	type: 'select',
5	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']
6	},
7	value: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com'],
8	parentEl: 'container4',
9	useButtons: true // set to true to display buttons instead of links
10	});
	view plain \| print \| ?

Use the maxItems and minItems options :


1	new inputEx.ListField({
2	listLabel: 'Websites',
3	maxItems: 4,
4	minItems: 1,
5	elementType: {
6	type: 'select',
7	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']
8	},
9	value: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com'],
10	parentEl: 'container5',
11	useButtons: true
12	});
	view plain \| print \| ?

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


1	new inputEx.Form( {
2	fields: [
3	{
4	name: 'firstVar',
5	label: "First variable",
6	value: "my-custom-value"
7	},
8	{
9	type: 'list',
10	label: "My Array",
11	maxItems: 4,
12	minItems: 1,
13	elementType: {type: 'string'},
14	value: ['this', 'is', 'a', 'test'],
15	name: 'myarray',
16	useButtons: true ,
17	sortable: true
18	}],
19	buttons: [{type: 'submit', value: 'Test to send the GET request'}],
20	method: 'GET',
21	parentEl: 'container6'
22	);
	view plain \| print \| ?