nativeselectitem.js

javascript 很酷的类库

/*
 * Isomorphic SmartClient
 * Version 6.5 (2008-04-30)
 * Copyright(c) 1998-2007 Isomorphic Software, Inc. All rights reserved.
 * "SmartClient" is a trademark of Isomorphic Software, Inc.
 *
 * [e-mail]
 *
 * http://smartclient.com/license
 */

 





//>	@class	NativeSelectItem
// Select items rendered using a native HTML select item.
// @visibility internal
//<
// Note: This should be invisible to the developer in most cases. The Developer will define
// a form item with type 'select' and based on 'form.useNativeSelectItems', we'll render out
// a SelectItem, or a NativeSelectItem.


isc.ClassFactory.defineClass("NativeSelectItem", "FormItem");
isc.NativeSelectItem.addClassProperties({
    //>	@attr	isc.NativeSelectItem.DEFAULT_ROW_COUNT	(number : 6 : IRW)
	//		Default maximum number of rows to show for a multiple 
    //      select box. (Overridden by selectItem.rows, or height).
	//		@group	appearance
	//		@see selectItem.getElementStyleHTML()
	//<
    DEFAULT_ROW_COUNT:6,

    // Used to track every Native select item on the page
    instances: []
    
});

// Include the shared SelectItem properties
isc.NativeSelectItem.addProperties(isc._SelectItemProperties);

// Properties to apply to native selects only.
isc.NativeSelectItem.addProperties({

    //>	@attr	selectItem.multiple		(boolean : false : IRW)
	// If true, this selectItem will be displayed as a tall list of options, and the user
    // will be able to select multiple options.
    // <P>
    // In this case the logical value of the formItem, as retrieved by 
    // +link{formItem.getValue,getValue()} and set via +link{formItem.setValue,setValue()}, is 
    // an Array of Strings reflecting the selected values.
    //
	//  @group	appearance
    //  @visibility external
	//<
    // Doc'd here, since multiple selects are always implemented using this class.
    
    // Set the height to null by default - will size to 1 row of content.
    height:null,
    
    
    

    //>	@attr	nativeSelectItem._getSizesDynamically	(boolean : true : RA)
	//			Dynamically figure out field sizes for this element
	//			 in Navigator so we know how to approximate its size.
	//<
	_getSizesDynamically:true,


    //> @attr   nativeSelectItem._hasDataElement    (boolean : true : IRW)
    //      Native Select items have a data element.
    // @group formValues
    // @visibility   internal
    // @see     method:FormItem.hasDataElement
    // @see     method:FormItem.getDataElement
    //<
    _hasDataElement:true,
    
    // This flag means updateState will apply the result of this.getTextBoxStyle() to this item's
    // data element - appropriate for native text boxes, text areas and selects.
    _dataElementIsTextBox:true,

    
    // _nativeEventHandlers is a place to specify native event handlers to be applied to the
    // form item element once it has been written into the DOM (without having to override 
    // '_applyHandlersToElement()'
    _nativeEventHandlers : {
        // apply a native 'onchange' hander to notify us of changes.
        onchange : isc.FormItem._nativeChangeHandler
    }    


});

// add the getOptionsHTML method as a static method so it can be used as a utility routine
//	without requiring the creation of a StaticItem instance
isc.NativeSelectItem.addClassMethods({

	//NativeSelectItem.getOptionsHTML()	(A) output the HTML for a select element's OPTION items
	getOptionsHTML : function (valueMap, selectedValue) {	
		var output = isc.SB.create();
    
		// output each option in turn
		if (isc.isAn.Array(valueMap)) {
			for (var i = 0, len = valueMap.length; i < len; i++) {
				var storedValue = valueMap[i];

                // Note - you can break SelectItems by having a valueMap containing unescaped
                // HTML.  The example I saw was setting up a valueMap like this:
                //  { 0:"<select one>", 1:"Some Value", 2:"Some Other Value"}
                // We could catch this here, but it may be expensive to run 'asHTML()' on a 
                // potentially large number of options. Developers must avoid using angle
                // braces in valueMap names.
                //if (isc.isA.String(option)) option = option.asHTML();

                output.append(this._getOptionHTML(storedValue, storedValue, selectedValue));
			}
		} else {
			for (var storedValue in valueMap) {
                var visibleValue = valueMap[storedValue];
                //if (isc.isA.String(option)) option = option.asHTML();

                output.append(this._getOptionHTML(storedValue, visibleValue, selectedValue));
			}
		}
        
        return output.toString();
	},

    _getOptionHTML : function (storedValue, visibleValue, selectedValue) {
        var template = this._template;
        if (!template) {
            this._selectedOption = " SELECTED ";
            template = this._template = [];

            template[0] = "<OPTION ";
            // [1] SELECTED or blank
            template[2] = ' VALUE="';
            // [3] actual value
            template[4] = '">';
            // [5] visible value
            template[6] = "</OPTION>";
        }
        template[1] = (storedValue == selectedValue ? this._selectedOption : null);
        template[3] = storedValue;
        template[5] = visibleValue;
        return template.join(isc._emptyString);
    },
	
	// NativeSelectItem.getOptionCount()	(A)
	//			Return the number of option elements in a valueMap.
	getOptionCount : function (valueMap) {	
		// output each option in turn
		if (isc.isAn.Array(valueMap)) {
			return valueMap.length;
		} else {
			var count = 0;
			for (var key in valueMap) {
				count++;
			}
			return count;
		}
	}
	
});


//!>Deferred
isc.NativeSelectItem.addMethods({
    
    init : function () {
        this.Super("init", arguments);
        isc.NativeSelectItem.instances.add(this);
    },

    destroy : function () {
        isc.NativeSelectItem.instances.remove(this);
        this.Super("destroy", arguments);
    },
    // by putting 'nowrap' on the text box cell we avoid the value icon / text box appearing 
    // on different lines
    getTextBoxCellCSS : function () {
        return this._$nowrapCSS
    },
        
	// getElementHTML()			output the HTML for this element
	getElementHTML : function (value) {
		// since we're redrawing the element, note that we have NOT added an unkown value
		//	to its options.  See nativeSelectItem.setElementValue
		this._unknownValueAdded = false;
        
		var form = this.form,
			formID = form.getID(),
			output = isc.StringBuffer.newInstance(),
			itemID = this.getItemID()
		;
		
        var emptyString = isc._emptyString;  
        var valueIconHTML = this._getValueIconHTML(this._value);
        if (valueIconHTML != null) output.append(valueIconHTML);
        if (!this.showValueIconOnly) {
    		output.append(
                        "<SELECT",
    					" NAME=" , this.getElementName(),
                        " ID=", this.getDataElementId(),
    
                        // hang a flag on the element marking it as the data element for the
                        // appropriate form item.
                        this._getItemElementAttributeHTML(),
                        
                        (!this.showTitle && this.accessKey != null ? 
                            " ACCESSKEY=" + this.accessKey : emptyString),
    			 		(this.isDisabled() ? " DISABLED " : emptyString),
    					this.getElementStyleHTML(),
    					(this.multiple ? " MULTIPLE" : emptyString),
                        " TABINDEX=", this._getElementTabIndex()," handleNativeEvents=false>");
                        
    		output.append(this.getOptionsHTML(this.getValueMap()));
    
    		output.append("</SELECT>");
        }
		return output.toString();
	},
    
    // Fired in response to a native onchange event
    _handleElementChanged : function (waited) {
    
        
        if (isc.Browser.isIE && !waited) {
            isc.Timer.setTimeout(this.getID() + "._handleElementChanged(true)", 10);
            return true;
        }
        return this.form.elementChanged(this.getID());
    
    },

    // If changeOnBlur is true, fire change after blur.
    _nativeElementBlur : function (element, itemID) {
        var returnVal = this.Super("_nativeElementBlur", arguments);

        if (this.changeOnBlur) this.form.elementChanged(this);
    },    
    

	//getOptionsHTML()	output the HTML for a select element's options
	getOptionsHTML : function (valueMap) {	
		var output = isc.NativeSelectItem.getOptionsHTML(valueMap? valueMap : this.getValueMap());
        
        if (this.isSelectOther) {
    		output += "<OPTION VALUE=\"" + this.separatorValue + "\">" + this.separatorTitle
                    + "<OPTION VALUE=\"" + this.otherValue + "\">" + this.otherTitle
    		;
        }
        
		return output;
        
	},

	
	// getOptionCount()	(A)     Return the number of option elements in a valueMap.
	getOptionCount : function (valueMap) {	
		return isc.NativeSelectItem.getOptionCount(valueMap? valueMap : this.getValueMap());
	},

	//  NativeSelectItem.getElementStyleHTML()	(I)
    //      	Get the HTML string used to set the visual characteristics for a select item.
    //          This includes the STYLE=... & CLASS=... properties to be written into this
    //          form item's element.
    //          Uses this.height, this.width and this.rows to calculate desired size
    //          In most DOM browsers uses CSS styling to apply width (and height for multiple-select
    //          style).
    //          In Nav / IE 5.x calculates the appropriate number of rows to make the widget the
    //          desired height.
    //
	//		@group	appearance
	//		@return	(string)    String of HTML containing STYLE=... & CLASS=... properties for 
    //                          this items element.
	//
	getElementStyleHTML : function () {

        var output = isc.SB.create(),
            style = isc.SB.create();         
        if (this.textBoxStyle != null) output.append(" CLASS='", this.getTextBoxStyle(), "' ");

        // There are two interfaces for this item: 
        // - the default single-select interface "drop list"
        // - the default multiple-select interface "pick list"
        
        // Pick List - determine the desired number of rows, and set the height for the item.
        if (this.multiple || this.rows) {

            //desired number of rows
            var rows = this.rows;
            
            // default rows if necessary (ensures a pickbox is drawn and that it looks consistent
            // across browsers).
            if (!isc.isA.Number(rows) || rows < 1) 
                        rows = Math.min(isc.NativeSelectItem.DEFAULT_ROW_COUNT, this.getOptionCount());
        
            // If the height was specified, respect the specified height.
            
            if (this.height) {

                
                if (isc.isA.Number(this.height)) style.append("HEIGHT:", this.height, "px;");
            }
            
	    	output.append(" SIZE=", rows);
        }
        // otherwise were using a drop-list - allow the default form item handling to set the 
        // height for the Dynamic Form table cell.

        // DOM specific styling code
        if (isc.Browser.isDOM) {
            
            
            var width = this.getElementWidth();
            if (isc.isA.Number(width)) {

                // Don't attempt to write out a negatively sized element!
                width = Math.max(width, 1);
            
    			// output the width as a CSS WIDTH property
	    		style.append("WIDTH:", width, "px;");
            }

            // In Mozilla we must use the 'moz-user-focus' css property to govern
            // whether this element can recieve focus or not.
            if (isc.Browser.isMoz) {
                style.append("-moz-user-focus:",