1 include(bbq.gui.form.FormField); 2 3 bbq.gui.form.DropDown = new Class.create(bbq.gui.form.FormField, /** @lends bbq.gui.form.DropDown.prototype */ { 4 /** 5 * @example 6 * <pre><code class="language-javascript"> 7 * var dropDown = new bbq.gui.form.DropDown({ 8 * options: [ 9 * {key: "Option 1", value: 1}, 10 * {key: "Option 2", value: 2} 11 * ] 12 * }) 13 * </code></pre> 14 * @constructs 15 * @extends bbq.gui.form.FormField 16 * @param {Object} options 17 * @param {Object[]} options.options Array members should be objects with two fields {String} key and {Object} value 18 */ 19 initialize: function($super, options) { 20 try { 21 $super(options); 22 23 this.setRootNode("select"); 24 this.addClass("DropDown"); 25 26 if(Object.isArray(this.options.options)) { 27 this.setOptions(this.options.options); 28 } 29 } catch(e) { 30 Log.error("Error constructing DropDown", e); 31 } 32 }, 33 34 _getRawValue: function() { 35 var index = this.getRootNode().value; 36 37 return this.options.options[index].value; 38 }, 39 40 _setRawValue: function(value) { 41 if(!Object.isArray(this.options.options)) { 42 return; 43 } 44 45 var optionElements = $A(this.getRootNode().getElementsByTagName("option")); 46 47 optionElements.each(function(option) { 48 delete option.selected; 49 }); 50 51 this.options.options.each(function(option, index) { 52 if(option.value == value) { 53 if(optionElements[index]) { 54 optionElements[index].selected = true; 55 } 56 } 57 }.bind(this)); 58 }, 59 60 setOptions: function(options) { 61 // preserve currently selected index 62 var selectedIndex = 0; 63 64 $A(this.getRootNode().getElementsByTagName("option")).each(function(option, index) { 65 if (option.selected) { 66 selectedIndex = index; 67 68 throw $break; 69 } 70 }); 71 72 this.empty(); 73 74 options.each(function(option, index) { 75 var node = DOMUtil.createElement("option", option.key, {value: index}); 76 77 if (index == selectedIndex) { 78 node.selected = true; 79 } 80 81 this.appendChild(node); 82 }.bind(this)); 83 84 this.options.options = options; 85 } 86 }); 87