inputEx - KeyOpValueField Usage

Basic KeyOpValueField creation

The KeyOpValueField makes it easy to build a search form from an existing inputEx definition

		var field1 = new Y.inputEx.KeyOpValueField({
			parentEl: 'container1',
			availableFields: [
				{type: 'string', name: 'lastname', label: 'Lastname' },
				{type: 'string', name: 'firstname', label: 'Firstname' },
				{type: 'select', name: 'gender', label: 'Gender',  choices: ["Mr","Mrs","Ms"] }
			]
		});
		
		var button1 = inputEx.cn('button', null, null, 'getValue()');
		Y.one('#container1').appendChild(button1); 
		Y.one(button1).on('click', function() { alert( Y.JSON.stringify(field1.getValue())); });

List of conditions

Here is a search form with multiple conditions

	inputEx({
		type: 'list',
		parentEl: 'container2',
		elementType: {
			type: 'keyopvalue',
			availableFields: [
				{type: 'string', name: 'lastname', label: 'Lastname' },
				{type: 'string', name: 'firstname', label: 'Firstname' },
				{type: 'select', name: 'gender', label: 'Gender',  choices: ["Mr","Mrs","Ms"] }
			]
		}
	});

Changing the operators and setting labels for operators

Two more options are available for this field: "operators" and "operatorLabels"

		var field3 = new Y.inputEx.KeyOpValueField({
			parentEl: 'container3',
			availableFields: [
				{type: 'string', name: 'lastname', label: 'Lastname' },
				{type: 'string', name: 'firstname', label: 'Firstname' },
				{type: 'select', name: 'gender', label: 'Gender',  choices: ["Mr","Mrs","Ms"] }
			],
			
			operators: ["=","!="],
			operatorLabels: ["equals", "different"]
		});
		
		var button3 = inputEx.cn('button', null, null, 'getValue()');
		Y.one('#container3').appendChild(button3); 
		Y.one(button3).on('click', function() { alert( Y.JSON.stringify(field3.getValue())); });