nativeselectitem.js

javascript 很酷的类库

                             (this._getElementTabIndex() > 0 ? "normal;" : "ignore;")
                );
            }
            
            // Force an explicit top and bottom margin of zero - by default there's
            // 1px above and below, increasing the total size of the item
            style.append("margin-top:0px;margin-bottom:0px;");
            
            style = style.toString();
			if (style.length > 0) output.append(" STYLE='", style, "'");
        }
            
        return output.toString(); 
    },
    
    // We allow SelectItems with no explicitly specified size, to size based on the content
    // of the select - so we avoid writing a width property into the element unless we need to
    // Modify _iconVisibilityChanged() to similarly avoid writing a width property into the
    // element unless it's required, so we don't react to an icon showing/hiding by shrinking
    // or growing the select item unnecessarily.
    _iconVisibilityChanged : function () {
        if (!isc.isA.Number(this.width)) return;
        return this.Super("_iconVisibilityChanged", arguments);
    },

    
    _getIconVMargin : function () {
        return 0;
    },
    
    mapValueToDisplay : function (dataValue) {
        if (isc.isAn.Array(dataValue)) {
            var displayArray = [];
            for (var i = 0; i < dataValue.length; i++) {
                displayArray[i] = this.mapValueToDisplay(dataValue[i]);
            }
            return displayArray;
        }
        return this.Super("mapValueToDisplay", arguments);
    },
    
	//selectItem.setElementValue() : set the value of the form element to the value passed in
	setElementValue : function (newDisplayValue, newValue) {
        
        // Select items support a 'native' value map - each item has the data value (option.value)
        // and the display value (option.text) specified. 
        // We select the item by setting the element's value to the data value.
        // - If the 'data' value is not passed to this method - assume data / display values
        //   match
        // - If we don't fine an option with a .value that matches the value passed in, also
        //   check option.text as we may have been passed the display value only. This
        //   can happen if a developer calls 'item.setValue(<displayValue>)'
        if (arguments.length  == 1) newValue = newDisplayValue;
        
		// get a pointer to the element for this item
		var element = this.getDataElement();

		// if we don't currently have an element, bail
		if (!element) return null;

		// iterate through each option
		var options = element.options;
		
		if (!options) {
			//>DEBUG
			this.logDebug("setElementValue(): element.options is null. ???");
			//<DEBUG
			return null;	//???
		}
        
        // always update the value icon (if we're showing one)
        this._updateValueIcon(newValue);
		
		// if this is a single-select item, set its selectedIndex
		if (!this.multiple) {
			// normalize a null value to the empty string
 			// this fixes a problem in Nav where it creates items called "undefined"
			if (newValue == null) newValue = "";	

			// look for an option with matching value
			for (var i = 0; i < options.length; i++) {
				if (options[i].value == newValue) {
					// only update the selectedIndex if it's not already correct, otherwise the
                    // native select scrolls unnecessarily
					if (element.selectedIndex != i) {
						element.selectedIndex = i;
					}
					return element.selectedIndex;
				}
			}

			// no matching value - look for an option with matching text 
			for (var i = 0; i < options.length; i++) {            
				if (options[i].text == newValue) {
					// only update the selectedIndex if it's not already correct, otherwise the
                    // native select scrolls unnecessarily
					if (element.selectedIndex != i) {
						element.selectedIndex = i;
					}
					element.selectedIndex = i;
					return element.selectedIndex;
				}
			}

			// add a new form option with the value
			if (this.addUnknownValues) {
                
				if (isc.Browser.isIE) {
					var newElementNum = 0;
					// if we've already added an unknown value since the list was redrawn,
					//  simply munge that value (rather than adding a new one).
					if (this._unknownValueAdded) {
						options[newElementNum].text = newDisplayValue;
						options[newElementNum].value = newValue;
					} else {
						options.add(new Option(newValue, newDisplayValue), newElementNum);
						this._unknownValueAdded = true;
					}

				} else {
					if (this._unknownValueAdded) {
						var newElementNum = options.length-1;
						options[newElementNum].value = newValue;
						options[newElementNum].text = newDisplayValue;
					} else {
						var newElementNum = options.length;
						options[newElementNum] = new Option(newValue, newDisplayValue);
						this._unknownValueAdded = true;
					}
				}

				// only update the selectedIndex if it's not already correct, otherwise the
                // native select scrolls unnecessarily
				if (element.selectedIndex != newElementNum) {
					element.selectedIndex = newElementNum;		
				}
	
				return element.selectedIndex;
			} else {
				// not found -- return null
				return null;
			}

		// otherwise it's multi-select item
		} else {
        
            // "newValue" is the list of selected values - normalize to an array
			if (newValue == null) {
				newValue = [];
			} else if (isc.isA.String(newValue) && newValue.contains(",")) {
				newValue = newValue.split(",");
			} else if (!isc.isAn.Array(newValue)) {
				newValue = [newValue];
			} else {
				// duplicate the array since we're changing it below (and don't want to screw
                // up the original)
				newValue = newValue.duplicate();
			}
            
            // same thing with newDisplayValue - may be required if we're adding unknown values
			if (newDisplayValue == null) {
				newDisplayValue = [];
			} else if (isc.isA.String(newDisplayValue) && newDisplayValue.contains(",")) {
				newDisplayValue = newDisplayValue.split(",");
			} else if (!isc.isAn.Array(newDisplayValue)) {
				newDisplayValue = [newDisplayValue];
			} else {
				// duplicate the array since we're changing it below (and don't want to screw
                // up the original)
				newDisplayValue = newDisplayValue.duplicate();
			}            

            // set option.selected on native option elements.  "newValue" will retain only the
            // values for which there are no native option elements.
			for (var i = 0; i < options.length; i++) {
				var option = element.options[i];

				var valueIndex = newValue.indexOf(option.value);

				// only update option.selected if it's not already correct, otherwise the
                // native select scrolls unnecessarily
				if (valueIndex > -1) {
					if (option.selected != true) option.selected = true;
					newValue.removeItem(valueIndex);
				} else {
					if (option.selected != false) option.selected = false;
				}
			}
            
            // iterate through the options a second time in case we were passed display values
            if (newValue.length != 0) {
                for (var i = 0; i < options.length; i++) {
                    var option = element.options[i];
                    var valueIndex = newValue.indexOf(option.text);
                    if (valueIndex > -1) {
                        if (option.selected != true) option.selected = true;
                        newValue.removeItem(valueIndex);
                    }
                }
            }
			
			// if some values in "newValue" had no corresponding option element, add more
            // option elements to the native multi-select
			if (newValue.length != 0 && this.addUnknownValues) {
            
				for (var i = 0; i < newValue.length; i++) {
					var newOption = options[options.length] = 
                            new Option(newValue[i], newDisplayValue[i]);
					newOption.selected = true;
				}
			}
            // XXX: this will be the values that had to be added, not the new value
			return newValue; 
		}
	},

	// getRawElementValue()     return the value stored in the form element(s) for this item.
	getElementValue : function () {
		// get a pointer to the element for this item
		var element = this.getDataElement();
		
		// if no element was found, bail
		if (!element) return null;
		
		var options = element.options;
		if (!options || options.length == 0) return null;
		
		// if we're dealing with a single-select option
		if (!this.multiple) {
			var option = options[element.selectedIndex];
			// if no option found, forget it
			if (!option) return null;
			return (option.value != null ? option.value : option.text);
		
		// otherwise if a multi-select item, return an array
		} else {
			var output = [];
			// for each option
			for (var i = 0; i < options.length; i++) {
				var option = options[i];
				// if that option is selected
				if (option.selected) {
					// add its value (or text if value was not specified) to the output
					output.add(option.value != null ? option.value : option.text);	
				}
			}
			// if zero or one values were selected, return the value rather than an array
			if (output.length < 2) return output[0];
			// otherwise return the array of values
			return output;
		}
	},
	
	//setElementValueMap		Set the valueMap for the actual form element to those passed in.
	setElementValueMap : function (valueMap) {
		// since we're resetting the element's options, 
		//	note that we have NOT added an unkown value to its options.  
		//	See nativeSelectItem.setElementValue
		this._unknownValueAdded = false;
	
		this.Super("setElementValueMap", arguments);
		// if this item doesn't currently have an element, bail
        var element = this.getDataElement();
		if (element == null) return;
		
		// get a pointer to the original options
		var elementOptions = element.options;
		// clear the elementValueMap
		elementOptions.length = 0;

		// add the new options
		if (isc.isAn.Array(valueMap)) {
			// array where key and value are the same
			for (var i = 0; i < valueMap.length; i++) {
				elementOptions[i] = new Option(valueMap[i], valueMap[i])
			}
		} else {
			// object of key:value pairs
			for (var key in valueMap) {
				elementOptions[elementOptions.length] = new Option(valueMap[key],key)
			}		
		}
        
        if (this.isSelectOther) {
        
        	// add the separators
    		elementOptions[elementOptions.length] = new Option(this.separatorTitle, this.separatorValue);
    		elementOptions[elementOptions.length] = new Option(this.otherTitle, this.otherValue);
    		
            
        }
	},
    
    // override upateValue to handle 'selectOther' functionality
    updateValue : function () {

        if (this.isSelectOther) {
    
            // we have to re-implement some of the default updateValue function to get at the element
            // value.
            if (!this.hasElement() || this.getDataElement() == null) return;
    
            var oldValue = this._value,
                value = this.getElementValue();
    	
    		// if they selected the separator, return false to reject the value
            if (value == this.separatorValue) {
                this.setValue(oldValue);
                return false;
            }
    
            if (value == this.otherValue) {
                var oldTitle = this.getValueMapTitle(oldValue);
                value = prompt("Other value for \r'"+this.getTitle()+"'?", (oldTitle ? oldTitle : ""));
                if (value == null) {
                    this.setValue(oldValue);
                    return false;
                }
    		
                // set the value of the field to value
                //	this has the side effect of adding the element to the field
                // - we'll continue through Superclass 'updateValue' implementation to handle firing
                //   change handlers, and actually saving the value.
                this.setElementValue(value);
            }
        }
	
        return this.Super("updateValue", arguments);    
    }
	
});
//!<Deferred