inputEx - KeyOpValueField Usage

Basic KeyOpValueField creation

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

1var field1 = new inputEx.KeyOpValueField({ 
2    parentEl: 'container1', 
3    availableFields: [ 
4        {type: 'string', name: 'lastname', label: 'Lastname' }, 
5        {type: 'string', name: 'firstname', label: 'Firstname' }, 
6        {type: 'select', name: 'gender', label: 'Gender',  choices: ["Mr","Mrs","Ms"] } 
7    ] 
8}); 
9 
10var button1 = inputEx.cn('button', null, null, 'getValue()'); 
11YAHOO.util.Dom.get('container1').appendChild(button1);  
12YAHOO.util.Event.addListener(button1, 'click', function() { alert( YAHOO.lang.JSON.stringify(field1.getValue())); });   
13     
view plain | print | ?

List of conditions

Here is a search form with multiple conditions

1inputEx({ 
2    type: 'list', 
3    parentEl: 'container2', 
4    elementType: { 
5        type: 'keyopvalue', 
6        availableFields: [ 
7            {type: 'string', name: 'lastname', label: 'Lastname' }, 
8            {type: 'string', name: 'firstname', label: 'Firstname' }, 
9            {type: 'select', name: 'gender', label: 'Gender',  choices: ["Mr","Mrs","Ms"] } 
10        ] 
11    } 
12}); 
13  
view plain | print | ?

Changing the operators and setting labels for operators

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

1var field3 = new inputEx.KeyOpValueField({ 
2    parentEl: 'container3', 
3    availableFields: [ 
4        {type: 'string', name: 'lastname', label: 'Lastname' }, 
5        {type: 'string', name: 'firstname', label: 'Firstname' }, 
6        {type: 'select', name: 'gender', label: 'Gender',  choices: ["Mr","Mrs","Ms"] } 
7    ], 
8     
9    operators: ["=","!="], 
10    operatorLabels: ["equals", "different"] 
11}); 
12 
13var button3 = inputEx.cn('button', null, null, 'getValue()'); 
14YAHOO.util.Dom.get('container3').appendChild(button3);  
15YAHOO.util.Event.addListener(button3, 'click', function() { alert( YAHOO.lang.JSON.stringify(field3.getValue())); });   
view plain | print | ?