WebSquare.uiplugin.multiselect

Provides an interface for the end user to make multiple choices from a select box-like list.

Type

uiplugin

Property Summary

appearance: appearance property of the Select in Xforms
class: Class of the MultiSelect
dataListAutoRefresh: [default: false, true] Automatically refreshes the DataList upon execution of addItem or deleteItem when the item list of the MultiSelect is bound with a DataList.
defaultClass: defaultClass of the MultiSelect
disabled: disabled class of the MultiSelect
displaymessage: Displays the validation result.
escape: Converts <>&" characters into HTML Escape characters.
id: Component ID
invalidMessage: Validation failure message
invalidMessageFunc: A function for the validation failure message
mandatory: Mandatory status
nextTabID: Component ID to move by tab
ref: Model instance binding information
separator: Separator to divide multiple items
tabIndex: Tabindex of the MultiSelect
toolTip: Displays the tooltip.
useLocale: Supports multi-language.
userData1: User-defined property
userData2: User-defined property
userData3: User-defined property
validator: Name of the validation function

Event Summary

onblur: Triggered when the focus is lost.
onchange: Triggered upon a change in an inputted or selected value.
onclick: Triggered upon clicking of the MutliSelect.
ondblclick: Triggered upon double-clicking of the MutliSelect.
onfocus: Triggered upon the component being focused.
onviewchange: Triggered when the value on the list is changed through keyboard input or mouse clicking.

Method Summary

addClass( className ): Adds a class to the component.
addItem( value , label , index , refresh ): Adds an item. If no index is specified, the item will be appended to the lower node.
bind( eventType , function ): Dynamically allocates events to the component.
changeClass( oldClassName , newClassName ): Renames the class from oldClassName to newClassName.
deleteItem( index ): Deletes the item of the received index.
deleteSelectedItems( ): Deletes the selected item.
focus( ): Moves the focus to the component.
getAllValue( ): Returns all values of the component.
getDisabled( ): Gets the current value of the disabled property.
getGenerator( ): Called by a component under the Generator component. When called, gets the parent Generator object.
getID( ): Gets the ID of the component.
getIdxValue( index ): Returns the value of the corresponding index.
getInitStyle( property ): Gets the initial style of the component.
getItemCount( ): Returns the number of the items of the component.
getOpacity( ): Gets the opacity of the component defined in CSS.
getPluginName( ): Gets the pluginName (or the name) of the component.
getPosition( positionName ): Gets the left or top position of the component.
getReadOnly( ): Gets the current setting of the readOnly property.
getScope( ): Returns the parent WFrame object when the component is a child of the WFrame which uses the scope feature (scope=true).
getScopeWindow( ): Returns the scope object of the parent when the component is a child of the WFrame which uses the scope feature (scope=true).
getSelectedIndex( separator ): Returns the index of the selected item.
getSize( sizeName ): Gets the size of the component.
getStyle( propertyName ): Gets the current value of the propertyName of the component defined in CSS.
getStyleValue( style ): [deprecated] Use getStyle instead.
getText( separator ): Returns the label of the selected item.
getTitle( ): Gets the title value.
getUdcHome( ): Returns the path of the file which defines the UDC.
getUdcRoot( ): Returns the path of the file which defines the UDC.
getUserData( key ): Returns the user-defined property value set by setUserData as the user data or source (page XML).
getValue( separator ): Returns the value of the selected item.
hasClass( className ): Checks whether the component has className received as a parameter or not.
hide( ): Hides the component.
removeClass( className ): Removes className from the component.
setDisabled( disabled ): Sets the disabled property.
setEventPause( evList , flag ): Disables or enables the component event.
setInitStyle( property ): Initializes the component style.
setOpacity( value ): Sets the opacity of the component.
setPosition( left , top , mode ): Sets the position (left, top) of the component.
setReadOnly( readOnly ): Controls the "readOnly" property.
setRef( ref ): Dynamically sets the ref binding.
setSelectedIndex( idx ): Selects the item of the corresponding index.
setSize( width , heigth ): Sets the size (width, height) of the component.
setStyle( propertyName , value ): Sets the style of the specified property.
setText( label ): Selects an item that contains the received label.
setUserData( key , value ): Sets the user data in the component.
setValue( value ): Select an item that contains the same value as the value received as an argument, and applies the item to the model.
show( displayType ): Displays the component.
toggleClass( className ): Removes a class named className, or if there is no such a class, adds a class named className.
trigger( type , array ): Triggers a certain event registered for the component.
unbind( type , function ): Removes an event registered for the component.
unbindRef( ): Releases the ref binding.
validate( ): Validates the data selected on the MultiSelect.
validateObject( ): Validates the component according to the specified properties.
visible( flag ): [deprecated] Shows/Hides the component, or sets the visible property using setStyle.

Property Detail

appearance: appearance property of the Select in Xforms
class: Class of the MultiSelect
dataListAutoRefresh: [default: false, true] Automatically refreshes the DataList upon execution of addItem or deleteItem when the item list of the MultiSelect is bound with a DataList.
true: Automatically updates. false: Default Not automatically update.
Required for lower compatibility. Setting true is recommended. (Set in config.xml to apply to all.)
defaultClass: defaultClass of the MultiSelect
disabled: disabled class of the MultiSelect
displaymessage: Displays the validation result.
escape: Converts <>&" characters into HTML Escape characters.
id: Component ID
invalidMessage: Validation failure message
invalidMessageFunc: A function for the validation failure message
mandatory: Mandatory status
nextTabID: Component ID to move by tab
ref: Model instance binding information
separator: Separator to divide multiple items
tabIndex: Tabindex of the MultiSelect
toolTip: Displays the tooltip.
useLocale: Supports multi-language.
userData1: User-defined property. Use getUserData("userData1") to get the data.
userData2: User-defined property. Use getUserData("userData2") to get the data.
userData3: User-defined property. Use getUserData("userData3") to get the data.
validator: Name of the validation function

Event Detail

onblur

Triggered when the focus is lost.

Parameter
name	type	description
e	Object	Event object

onchange

Triggered upon a change in an inputted or selected value.

onclick

Triggered upon clicking of the MutliSelect.

Parameter
name	type	description
e	Object	Event object

ondblclick

Triggered upon double-clicking of the MutliSelect.

Parameter
name	type	description
e	Object	Event object

onfocus

Triggered upon the component being focused.

Parameter
name	type	description
e	Object	Event object

onviewchange

Triggered when the value on the list is changed through keyboard input or mouse clicking. In case the change was made by a script, no event will be triggered. (Similar to the native onchange event.)

Parameter
name	type	description
info	Object	Returns an object containing oldValue, newValue, oldSelectedIndex, and newSelectedIndex.

Sample

Method Detail

addClass( className )

Adds a class to the component.

Parameter
name	type	required	description
className	String	Y	Name of the class to add

Sample

// Add oddClass to component input1. input1.addClass("oddClass");

addItem( value , label , index , refresh )

Adds an item. If no index is specified, the item will be appended to the lower node.
If the chooseOption or allOption is true, -All- or -Select- will be considered as an item and will be also included in index numbering.

Parameter
name	type	required	description
value	String	Y	Value of the item
label	String	Y	Label of the item
index	Number	N	Index of the item
refresh	Boolean	N	Automatically updates the bound DataList (instance). If not specified (undefined), use the setting of the dataListAutoRefresh property.

Return
type	description
Number	Index of the added item

Sample

// Do not append, and set the chooseOption as true. <xf:select1 chooseOption="true" id="multiselect1" style="position: relative;width: 148px;height: 21px;" disabledClass="w2multiselect_disabled" appearance="minimal"> <xf:choices></xf:choices> </xf:select1> // Add an item without specifying an index. multiselect1.addItem( 'M', 'Male' ); // Added to the last of "-Choose-". The sequence will be "-Select-" and "Male". // (Return) 1 // Add an item with specifying the index as "0". multiselect1.addItem( 'F', 'Female' ); // Added to 0th position before "-Choose-". The sequence will be "Female","-Select-", and "Male". // (Return Example) 0

bind( eventType , function )

Dynamically allocates events to the component.

Parameter
name	type	required	description
eventType	String	Y	Name of the event to allocate.
function	Function	Y	Handler function of the event to allocate.

Sample

// Define the event handler function for the onclick event in the input component, and bind the function. input1.bind("onclick", function(e){ alert(input1.getValue();})); // Bind commObj.ev_click function for the onclick event with component input1. var commObj = {}; commObj.ev_click = function(e){ alert("click :: "+this.id); }; input1.bind("onclick", commObj.ev_click );

changeClass( oldClassName , newClassName )

Renames the class from oldClassName to newClassName.
In the default setting, only the classes added by addClass will be applied. In order to directly remove the class defined in the "class" property of the component, add the following setting in config.xml file.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
oldClassName	String	Y	Name of the class to remove
newClassName	String	Y	Name of the class to add

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Change tmpInputClass class to tmpInputWarninClass. input1.changeClass("tmpInputClass","tmpInputWarninClass");

deleteItem( index )

Deletes an item received of the received index.

Parameter
name	type	required	description
index	String	Y	Index of the item to delete

Return
type	description
Object	Deleted item info as an object

Sample

var returnValue = multiselect1.deleteItem(0); returnValue.label is 'red'. returnValue.value is '#ff0000'. returnValue.xml is [XML Object]. Check the XML string with WebSquare.xml.serialize( returnVal.xml ).

deleteSelectedItems( )

Deletes the selected item.

Sample

(Example) The first and the fourth items are selected. var returnValue1 = multiselect1.deleteSelectedItems(); The first and the fourth items will be deleted.

focus( )

Moves the focus to the component.

getAllValue( )

Returns all values of the component. All selected items will be returned being separated by blank space.

Return
type	description
String	All item values

Sample

(Example) The first and the fourth items are selected. (The item name (labe) is Color, and the item value is '#000000 ~ #ffffff'.) var returnValue = multiselect1.getAllValue(); '#ff0000 #000000 #00ff00 #0000ff ...' will be returned.

getDisabled( )

Gets the current value of the disabled property.

Return
type	description
Boolean	The value of the disabled property.

Sample

var returnValue = componentId.getDisabled(); (Return example) false

getGenerator( )

Called by a component under the Generator component. When called, gets the parent Generator object.

Return
type	description
Object	Parent Generator object

Sample

<w2:generator id="generator1"> <w2:trigger id="trigger1" ev:onclick="scwin.trigger1_onclick"></w2:trigger></w2:generator> scwin.trigger1.onclick = function(){ console.log(this.getGenerator());} // Click trigger1 to display the generator1 object on the console. // See https://inswave.com/jira/browse/WPF-1425.

getID( )

Gets the ID of the component.

Return
type	description
String	ID of the WebSquare5 component

Sample

// The WebSquare5 component dynamically received as a parameter can be used as shown in the following. function fn_validCheck(tmpObj){ // tmpObj has an ID of "input1". var compID = tmpObj.getID(); // (Return Example) "input1" }

getIdxValue( index )

Returns the value of the corresponding index.

Parameter
name	type	required	description
index	Number	Y	Index of the corresponding item

Return
type	description
String	Value of the corresponding item of the specified index

Sample

(Example) The first and the fourth items are selected. (The item name (labe) is Color, and the item value is '#000000 ~ #ffffff'.) var returnValue = multiselect1.getIdxValue(0); returnValue is '#ff0000'.

getInitStyle( property )

Gets the initial style of the component.

Parameter
name	type	required	description
property	String	N	Name of the attribute (If not specified, all information will be ouputted.)

getItemCount( )

Returns the number of the items of the component.

Return
type	description
Number	Number of the items of the component

Sample

var returnValue = multiselect1.getItemCount();

getOpacity( )

Gets the opacity of the component defined in CSS.

Return
type	description
Integer	Opacity

Sample

// Apply opacity CSS to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;opacity:0.2;"></xf:input> var returnValue = input1.getOpacity(); // "returnValue" is a real number between 0 and 1. // (Return Value) "0.2"

getPluginName( )

Gets the pluginName (or the name) of the component.

Return
type	description
String	pluginName of the WebSquare5 component

Sample

// For a WebSquare5 object dynamically received by a common function, conditional statements can be used as shown below. var commObj = {}; commObj.fn_makeReqData = function(tmpObj){ var tmpID = tmpObj.getID(); // Component ID var tmpCompType = tmpObj.getPluginName(); // Component Type if(tmpCompType == "input"){ //..Logic.. }else if(tmpCompType == "gridView"){ //..Logic .. }else{ //..Logic.. } };

getPosition( positionName )

Gets the left or top position of the component. If set by %, the corresponding pixel value will be returned.

Parameter
name	type	required	description
positionName	String	Y	[left,top] Type of the position

Return
type	description
Number	Position of the component

Sample

// Apply margin CSS to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;margin:10px;"></xf:input> var returnValue = input1.getPosition("top"); // The returnValue will be a position in pixels. // (Return Example) 10

getReadOnly( )

Gets the current setting of the readOnly property.

Return
type	description
Boolean	The current setting of the readOnly property

Sample

var returnValue = componentId.getReadOnly(); // (Return Example) false

getScope( )

Returns the parent WFrame object when the component is a child of the WFrame which uses the scope feature (scope=true).
Returns null when the component is not a child of the WFrame using the scope feature (scope=true).

Return
type	description
Object	wframe object or null

Sample

// The main page contains wframe1, and wframe1 contains wframe11 which contains textbox1. textbox1.getScope(); // Returns wframe11 object.

getScopeWindow( )

Returns the scope object of the parent when the component is a child of the WFrame which uses the scope feature (scope=true).
Returns a global window object when the component is not a child of the WFrame using the scope feature (scope=true.

Return
type	description
Object	Scope object of the wframe object, or a global window object

Sample

// The main page contains wframe1, and wframe1 contains wframe11 which contains textbox1. var scope = textbox1.getScopeWindow(); scope.wframe11 === textbox1.getScope(); // true

getSelectedIndex( separator )

Returns the index of the selected item.
Multiple items are separated by the specified separator when being returned.
If the separator is not specified, space will be used as the separator.

Parameter
name	type	required	description
separator	String	N	Separator

Return
type	description
Number	Index of the selected item

Sample

(Example) The first and the fourth items are selected. var returnValue1 = multiselect1.getSelectedIndex(","); var returnValue2 = multiselect1.getSelectedIndex(); returnValue1 is '0,3', and returnValue2 is '0 3'.

getSize( sizeName )

Gets the size of the component. If set by "%", the corresponding pixel value will be returned.

Parameter
name	type	required	description
sizeName	String	Y	[height, innerHeight, outerHeight, outerMarginHeight, width, innerWidth, outerWidth, outerMarginWidth] Type of the size. For the calculation of each size type, see below.

Return
type	description
Number	Size of the component

Sample

var returnValue = componentId.getSize("width"); // "returnValue" will be a size in pixels. If set by "%", the corresponding pixel value will be returned. // (Return Example) 100

getStyle( propertyName )

Gets the current value of the propertyName of the component defined in CSS.

Parameter
name	type	required	description
propertyName	String	Y	Name of the property in the style

Return
type	description
String	Style value

Sample

// Define an Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;"></xf:input> var returnValue = input1.getStyle("width"); // (Return Example) "144px"

getStyleValue( style )

[deprecated] Use getStyle instead.
Gets the current value of the propertyName of the component defined in CSS.

Parameter
name	type	required	description
style	String	Y	Name of the property defined in the style

Return
type	description
String	Value defined in the style property. (In case of a color, the hexcode of the color will be returned.)

getText( separator )

Returns the label of the selected item.
Multiple items are separated by the specified separator when being returned.
If the separator is not specified, space will be used as the separator.

Parameter
name	type	required	description
separator	String	N	Separator

Return
type	description
String	Label of the selected item

Sample

(Example) The first and the fourth items are selected. (The item name (labe) is Color, and the item value is '#000000 ~ #ffffff'.) var returnValue = multiselect1.getText(','); 'Red, Blue' will be returned.

getTitle( )

Gets the title value.

Return
type	description
String	Title value

Sample

// Define the "title" for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" title="이름 입력"></xf:input> var tmpTitle = input1.getTitle(); // (Return Example ) "Input Name"

getUdcHome( )

Returns the path of the file which defines the UDC. Includes the file extension of .xml. For a path without .xml, use getUdcRoot. When called by a component, not a UDC object, undefined will be returned.

Return
type	description
String	When called by a component, not a UDC object, undefined will be returned.

Sample

The udc file is /a/b/udc.xml, the XML file is /a/c/main.xml, and the UDC object ID is udc1. udc1.getUdcHome(); // The execution result is /a/b/udc.xml.

getUdcRoot( )

Returns the path of the file which defines the UDC. udc1.getUdcHome(); // The execution result is /a/b/udc.xml. For a path including .xml, use getUdcHome. When called by a component, not a UDC object, undefined will be returned.

Return
type	description
String	When called by a component, not a UDC object, undefined will be returned.

Sample

The udc file is /a/b/udc.xml, the XML file is /a/c/main.xml, and the UDC object ID is udc1. udc1.getUdcHome(); // The execution result is /a/b/udc.xml.

getUserData( key )

Returns the user-defined property value set by setUserData as the user data or source (page XML).

Parameter
name	type	required	description
key	String	Y	Random data key

Return
type	description
String	Data of the corresponding key

Sample

// Apply the customized property (eduTest) to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" eduTest="Hello"></xf:input> input1.getUserData("eduTest"); // (Return Example) "Hello" // Use setUserData. input1.setUserData("eduTest","WebSquare"); input1.getUserData("WebSquare"); // (Return Example) "Hello"

getValue( separator )

Returns the value of the selected item.
Multiple items are separated by the specified separator when being returned.
If the separator is not specified, space will be used as the separator.

Parameter
name	type	required	description
separator	String	N	Separator

Return
type	description
String	Values of the selected items

Sample

(Example) The first and the fourth items are selected. (The item name (labe) is Color, and the item value is '#000000 ~ #ffffff'.) var returnValue = multiselect1.getValue(','); '#ff0000,#0000ff' will be returned.

hasClass( className )

Checks whether the component has className received as a parameter or not.

Parameter
name	type	required	description
className	String	Y	className to check

Return
type	description
Boolean	Whether the component has the class or not

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> var returnValue = input1.hasClass("tmpInputClass"); // (Return Example) true

hide( )

Hides the component.
he CSS setting will be "display:none;" and "visibility:hidden;".

Sample

componentId.hide();

removeClass( className )

Removes className from the component.
In the default setting, only the classes added by addClass will be applied. In order to directly remove the class defined in the "class" property of the component, add the following setting in config.xml file.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	Name of the class to remove

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Remove tmpInputClass class. input1.removeClass("tmpInputClass");

setDisabled( disabled )

Sets the disabled property. True to disable, or false not to disable.

Parameter
name	type	required	description
disabled	Boolean	Y	True to disable, or false not to disable.

Sample

// Disable the component. componentId.setDisabled(true);

setEventPause( evList , flag )

Disables or enables the component event.

Parameter
name	type	required	description
evList	String	N	List of the events. If not specified, all user events of the component will be listed. (Enter null data.)
flag	Boolean	Y	true is to pause, or false is to cancel pausing.

Sample

input1.setEventPause("onclick", true); // Dynamically pauses the onclick event. input1.setEventPause("onfocus,onblur", false); // Restarts the onfocus and the onblur events. input1.setEventPause(null, true); // Pauses all user events registered for the Input component.

setInitStyle( property )

Initializes the component style.

Parameter
name	type	required	description
property	String	N	Name of the property (If not specified, all properties will be returned.)

Sample

group1.getInitStyle();

setOpacity( value )

Sets the opacity of the component.

Parameter
name	type	required	description
value	Number	Y	Opacity value (A real number between 0 and 1)

Sample

componentId.setOpacity(0.45);

setPosition( left , top , mode )

Sets the position (left, top) of the component.

Parameter
name	type	required	description
left	Number	Y	Left position or null.
top	Number	Y	Top position or null.
mode	String	N	[defulat:absolute, delta] absolute sets the current positions as x and y, and delta adds x and y to the current positions.

Sample

// Set the top position of the component as 100 pixels. componentId.setPosition(null, 100);

setReadOnly( readOnly )

Controls the "readOnly" property. True to enable, or false to disable.

Parameter
name	type	required	description
readOnly	Boolean	Y	True to enable, or false to disable.

Sample

// Enable the read-only. componentId.setReadOnly(true);

setRef( ref )

Dynamically sets the ref binding.

Parameter
name	type	required	description
ref	String	Y	XPath of the new ref

setSelectedIndex( idx )

Selects the item of the corresponding index.

Parameter
name	type	required	description
idx	Number	Y	Index of the item to select

Sample

(Example) The first and the fourth items are selected. multiselect1.setSelectedIndex(1); The first, the second, and the fourth items are selected.

setSize( width , heigth )

Sets the size (width, height) of the component.

Parameter
name	type	required	description
width	Number	Y	Component width or null
heigth	Number	Y	Component height or null

Sample

// Set the component height as 100 pixels. componentId.setSize(null,100);

setStyle( propertyName , value )

Sets the style of the specified property.

Parameter
name	type	required	description
propertyName	String	Y	Name of the style property to set
value	String	Y	Value of the style to set

Sample

Example: Change the width in the component style. componentId.setStyle("width", 100); The width is in pixels, and the result will be same with that of componentId.setStyle("width", "100px");. In order to use % unit, specify as componentId.setStyle("width", "100%");.

setText( label )

Selects an item that contains the received label.
Select multiple items using blank space as the separator between the labels.

Parameter
name	type	required	description
label	String	Y	Label of the item

Sample

(Example) The first and the fourth items are selected. (The item name (label) is Color, and the item value is '#000000 ~ #ffffff'.) multiselect1.setText("Black"); The first, the second, and the fourth items are selected. When selecting multiple items, use space as the separator. var colorArr = []; colorArr[0] = "Red" ; colorArr[1] = "Blue" ; colorArr[2] = "Green" ; multiselect1.setValue(colorArr.join(" ")); Red, Blue, and Green will be selected.

setUserData( key , value )

Sets the user data in the component. If the key cannot be set for the component, corresponding logs will be displayed.

Parameter
name	type	required	description
key	String	Y	Random data key
value	String	Y	Random data key

Sample

// Setting a (key, value) pair of ("data", "WebSquare5") in the component. componentId.setUserData("data", "WebSquare"); // Some keys cannot be set for the component. componentId.setUserData("title", "WebSquare"); // (Log Example) !!!WARNING - [title] can't define as UserData

setValue( value )

Select an item that contains the same value as the value received as an argument, and applies the item to the model.

Parameter
name	type	required	description
value	String	Y	Value of the item to select

Sample

(Example) The first and the fourth items are selected. (The item name (label) is Color, and the item value is '#000000 ~ #ffffff'.) multiselect1.setValue("#000000"); The first, the second, and the fourth items are selected. When selecting multiple items, use space as the separator. var colorArr = []; colorArr[0] = "#ff0000" ; // Red colorArr[1] = "#0000ff" ; // Blue colorArr[2] = "#00ff00" ; // Green multiselect1.setValue(colorArr.join(" ")); Red, Blue, and Green will be selected.

show( displayType )

Displays the component.
The related CSS properties are display and visibility:show;.

Parameter
name	type	required	description
displayType	String	N	[default:block ,inline ,none ,""] Value of the Display property.

Sample

// Block the "display" property. componentId.show(); // Enable the "display" property in the class. componentId.show("");

toggleClass( className )

Removes a class named className, or if there is no such a class, adds a class named className.
In the default setting, only the classes added by addClass can be removed. To remove other classes, add the following setting in config.xml.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	className to set

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Remove tmpInputClass class. input1.toggleClass("tmpInputClass"); // Add tmpInputClass class again. input1.toggleClass("tmpInputClass");

trigger( type , array )

Triggers a certain event registered for the component.

Parameter
name	type	required	description
type	String	Y	Name of the event to trigger
array	Array	N	Array of parameters to send to the event handler

Sample

// Trigger the onclick event in the input1 component. input1.trigger("onclick"); // Trigger the onviewchange event in the input component and call the event handler function by sending arguments of (1, 2). input1.trigger("onviewchange", [1,2]);

unbind( type , function )

Removes an event registered for the component.

Parameter
name	type	required	description
type	String	N	Name of the event to remove. If not specified, all events of the components will be removed.
function	Function	N	Handler function of the event to remove. If not specified, all handler functions of the event will be removed.

Sample

// Remove all events registered in the input component. input1.unbind(); // Remove all handler functions of onviewchange event registered in the input component. input1.unbind("onviewchange"); // Remove the func1 event handler of onviewchange event registered for component input1. input1.unbind("onviewchange", func1);

unbindRef( )

Releases the ref binding.

validate( )

Validates the data selected on the MultiSelect. For the MultiSelect component, only the mandatory data will be checked.

Sample

When all items are unselected, var returnValue = multiselect1.validate(); "false" will be returned. In case even a single item is selected, "true" will be returned.

validateObject( )

Validates the component according to the specified properties.
Related Properties : mandatory, minLength, maxLength, minByteLength, maxByteLength

Return
type	description
Object	object validation result object

Sample

// Set the mandatory property as shown below. <xf:select appearance="minimal" id="multiselect1" style="position: absolute;width:272px;height:64px;left:889px;top:659px;" mandatory="true"> <xf:choices> <xf:itemset nodeset="data:dataList3"> <xf:label ref="label"></xf:label> <xf:value ref="value"></xf:value> </xf:itemset> </xf:choices> </xf:select> var returnObj = multiselect.validateObject(); // Return - without a MultiSelect value) An empty object will be returned. // Return - without a MultiSelect value) returnObj will be returned. returnObj.callerId = "multiselect" returnObj.type = "mandatory" returnObj.value = "" If displaymessage is"true", a validation failure will alert the defined message. //// (Alert Example) This field is mandatory.

visible( flag )

[deprecated] Shows/Hides the component, or sets the visible property using setStyle.
Sets the visibility of the component style. In case of true, set visible. In case of false, set hidden.

Parameter
name	type	required	description
flag	Boolean	Y	Visibility (In case of true, set visible. In case of false, set hidden.)