Home Reference Source
public class | source

TextInput

Extends:

react~React.ComponentEventDispatcherUIComponent → TextInput

Indirect Subclass:

MultiSelectComboBoxEx

A TextInput that implements ITextFilterControl (IFilterControl) and ITextDataBoundControl (IDataBoundControl) which enables it to be used within the filtering/binding infrasturcture. It also adds support for a number of features like autocomplete, inside and outside icons, etc.

Constructor Summary

Public Constructor
public

constructor(props: *, tag: *, shouldInit: *)

Member Summary

Public Members
public

The dataField value associated with autocomplete dropdown.

public

Class factory for the dropdown item renderer.

public

The labelField value associated with autocomplete dropdown.

public

The labelFunction for the autocomplete dropdown

public
public
public

Type of the match to filter items.

public

Plugin specific options for the autocomplete.

public

RowCount for the autocomplete dropdown.

public

Row height for the autocomplete dropdown.

public

The source for the autocomplete dropdown (the list of items).

public

Style name for the auto complete dropdown [Style(name="autoCompleteStyleName", type="String")]

public

Width of the autocomplete dropdown.

public

If you specify an Icon Style, setting this variable to true will clear the text on icon click.

public

The amount of time (in milliseconds) to wait before dispatching the DELAY_CHANGE event.

public

Enables auto complete behavior.

public

Whether or not to enable the DELAY_CHANGE event.

public

This is usually automatically set, you don't have to manually set it, unless you're sending strings as Date objects.

public

The filter operation to apply to the comparison See the FilterExpression class for a list.

public

The event that the filter triggers on.

public

grid: *

The grid that the filter belongs to - can be null if filter is used outside the grid

public

The grid column that the filter belongs to - can be null if filter is used outside the grid

public

Whether or not there is an active search

public

iconGap: *

The spacing between insideIcon, outsideIcon, and the text input [Style(name="iconGap", type="Number", inherit="no")]

public

Width of the inside and outside icons

public

Width of the inside and outside icons

public

idValue: *

To enable use of the text input in picker type scenarios where we display a label string in the text input, but expose a store for the ID value.

public

Input mask for the text input

public

Plugin specific options for the input mask.

public

The icon that is displayed inside the textbox, based on the insideIconPosition property.

public

The position of the icon that is displayed inside the textbox.

public
public

Dispatched when the user clicks on a the icon specified by the insideIcon property

public

Dispatched when the user clicks on a the icon specified by the outsideIcon property

public

The icon that is displayed outside the textbox, based on the outsideIconPosition property.

public

The position of the icon that is displayed outside the textbox.

public

Whether or not this control has been registered.

public

Property; indicates the set of characters that a user can enter in the text field.

public

The field to search on, usually same as the data field.

public

Flag to control whether the icon only shows up when there is text in the box

public
public
public

The watermark to show when there is no text entered into the text input.

public

Plugin specific options for the watermark.

public

Style to apply to the watermark label

public

width: *

Method Summary

Public Methods
public
public

Applies the selected item from the list to the autocomplete textbox

public

clear()

public
public

Destroys the autocomplete list.

public

dispatchEvent(evt: *): *

public

Based on the autoCompleteMatchType, filter the autocomplete dataprovider that

public

focus()

Sets the focus on the textbox

public

Dispatches the filter programmatic.

public
public

Returns the icon within the text input (This is usually the clear icon)

public

Returns the icon outside the span (This is usually the picker icon)

public
public

getText(): *

public

getTextBox(): *

Returns the inner text input

public

getValue(): *

Generic function that returns the value of a IFilterControl

public
public

keyUpHandler(event: *)

If the mouse is clicked up, and we dont own the target, kill autocomplete.

public

Apply the list item value.

public

If the mouse is clicked up, and we dont own the target, kill autocomplete.

public

onFocusIn(event: *)

public

onFocusOut(event: *)

public

onInsideIcon(evt: *)

When icon is enabled, handles the click event of the icon.

public
public

onOutsideIcon(evt: *)

When icon is enabled, handles the click event of the icon.

public
public
public

onTimerComplete(event: *)

public

setDataProvider(val: *)

Sets the provided value as the source for the auto complete options.

public

setIconVisible(event: *)

Sets the visibility of the icons when there is text in the box on basis of the showIconWhenHasText flag.

public

setMaxLength(len: *)

public

setPlaceHolder(placeHolder: *)

public

setSelection(begin: *, end: *)

Sets the selection on the text box.

public

setText(val: *)

public

setValue(val: *)

Generic function that sets the value of a IFilterControl

public

setWidth(w: *)

public
public

validate(evt: *)

Inherited Summary

From class EventDispatcher
public

[prop]: *

public
public

A list of event listeners for this event dispatcher object.

public

typeCache: {}

public

addEventListener(context: *, type: *, listener: *)

Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event.

public
public

dispatchEvent(event: *): boolean

Dispatches an event into the event flow.

public
public

getStyle(prop: *): *

Gets the value of the prop property on this object

public

Returns true if an event listener exists

public

Returns true if the class name to check is in the list of class names defined for this class.

public

kill()

Removes all event listeners

public

killArray(arr: *)

Given an array of event dispatchers, calls the kill method on each of them.

public

removeEventListener(type: *, listener: *)

Removes a listener from the EventDispatcher object.

public

setStyle(prop: *, val: *)

Sets the value of the prop property on this object

From class UIComponent
public static
public static
public
public

children: *[]

public
public

data: *

This is a getter/setter for the data property.

public

domElement: HTMLElement

The dom element associated with this UIComponent.

public

A list of event listeners that are added to the domElement (these create html dom event listeners as opposed to js only event listeners)

public

Whether or not this control is enabled.

public
public
public
public
public
public
public
public

A flag to store if this object has been marked for invalidation.

public
public

parent: *

public
public

props: *

public

reactElement: ReactElement

The react element associated with this UIComponent.

public

state: *

public

tagName: *

public

toolTip: *

public
public

Whether or not this control is enabled.

public
public

x: *

public

y: *

public

addChild(child: *)

This methods takes another UIComponent object, and adds it to the dom as a child of the domElement of this UIComponent.

public

addChildAt(child: *, idx: *)

This methods takes another UIComponent object, and adds it to the dom as a child of the domElement of this UIComponent.

public

addDomEventListener(evt: *, f: *)

When you call addEventListener on a UIComponent, certain events, defined by the domEvents array are also associated with the corresponding domElement.

public

addEventListener(context: *, type: *, listener: *)

Calls super.addEventListener, and for dom based events, also adds a HTML Event listener

public

attachClass(newClass: *)

public
public
public
public
public
public

detachClass(newClass: *)

public

domEventFired(event: *)

The event handler that gets triggered from the HTML DOM.

public

focus()

public
public

getAttribute(attr: *): *

public
public

getChildAt(idx: *): *

Returns the child of the domElement at the specified index.

public
public
public

getData(): *

This is a getter/setter for the data property.

public

getElementByTagName(tag: *): *

public

getEnabled(): *

Sets the enabled flag

public

getErrorString(val: *): *

public
public
public

getHeight(): *

public
public
public

getIncludeInLayout(val: *): *

public

Getter for the innerHTML property

public
public

getStyleAttribute(attr: *): *

public

getText(): *

Getter for the text property

public
public
public

getVisible(val: *): *

Sets the visible flag

public

getWidth(): *

public

getX(): *

Gets the X co ordinate

public

getY(): *

Gets the Y co ordinate

public

globalToLocal(ptIn: *): flexiciousNmsp.Point

Converts the given global Point to local co-ordinates.

public

initFromProps(props: *)

public

Any initialization code is supposed to go in this method.

public

This method will queue the component so the display list will render it once the current frame of execution is over.

public

kill()

First, calls super.kill(), which takes out all event listeners.

public

localToGlobal(ptIn: *): flexiciousNmsp.Point

Converts the given local Point to global co-ordinates.

public

measureText(textToMeasure: *): {"width": *}

Returns the width of the given text.

public

mergeObjects(obj1: *, obj2: *): *

public

move(x: *, y: *)

Sets the X and Y co ordinates of the current dom element

public

Gets the number of children of the dom element associated with this UIComponent.

public

owns(elem: *): Boolean

Recursively iterates through the parent hierarchy of the given element to check to see if the current node is in its parent hierarchy.

public

ownsPoint(pt: *): boolean

public

removeAllChildren(child: *)

public

removeChild(child: *)

This methods takes another UIComponent object, and removes it from the dom.

public

removeChildAt(idx: *)

This methods takes another UIComponent object, and removes it from the dom.

public
public

removeDomEventListener(evt: *, f: *)

Removes a previously attached DOM event listener.

public

removeEventListener(type: *, listener: *)

Calls super.addEventListener, and for dom based events, also removes the previously added HTML Event listener

public

removeEventListenerKeepDomListener(type: *, listener: *)

Calls super.addEventListener, and for dom based events, also removes the previously added HTML Event listener

public

render(): *

public

setActualSize(w: *, h: *)

public
public

setAttribute(attr: *, val: *)

public
public

setChildIndex(child: *, index: *)

Sets the visible flag

public

setComponentStyleAttribute(attr: *, val: *)

public

setData(val: *)

This is important, because the grid looks for a "setData" method on the renderer.

public

setDomElement(elem: *)

Sets the domElement of this UIComponent to the specified element, and creates a property on the dom element called component to this.

public

setEnabled(val: *)

Sets the enabled flag

public

setErrorString(val: *)

public

setHandCursor(val: *)

public

setHeight(val: *): *

public
public
public
public

setInnerHTML(val: *)

Setter for the innerHTML property

public

setState(newState: *)

public

setStateIfDomPresent(state: *, db: *)

public

setStateInternal(newState: *)

public

setStyleAttribute(attr: *, val: *)

public

setText(val: *)

Setter for the text property

public

setToolTip(val: *)

public
public
public

setVisible(val: *)

Sets the visible flag

public

setWidth(val: *): *

public

setX(val: *): *

Sets the X co ordinate

public

setY(val: *): *

Sets the Y co ordinate

public

updateDisplayList(w: *, h: *)

Called as a part of render phase.

public
public

Public Constructors

public constructor(props: *, tag: *, shouldInit: *) source

Override:

UIComponent#constructor

Params:

NameTypeAttributeDescription
props *
tag *
shouldInit *

Public Members

public autoCompleteDataField: string source

The dataField value associated with autocomplete dropdown.

public autoCompleteItemRenderer: * source

Class factory for the dropdown item renderer.

public autoCompleteLabelField: string source

The labelField value associated with autocomplete dropdown.

public autoCompleteLabelFunction: * source

The labelFunction for the autocomplete dropdown

public autoCompleteList: * source

public autoCompleteListAlternatingItemColors: number[] source

public autoCompleteMatchType: * source

Type of the match to filter items. Can be one of:

  • BeginsWith
  • EndsWith
  • Contains

public autoCompleteOptions: * source

Plugin specific options for the autocomplete. Depending on the flavor of Flexicious you go with, flexicious will use either the JQuery, Dojo or EXT versions of the autocomplete. This object will be used to pass in additional parameters for autocomplete.

Properties:

NameTypeAttributeDescription
autoCompleteOptions *

public autoCompleteRowCount: number source

RowCount for the autocomplete dropdown. Defaults to 5, or max length of the dataprovider, which ever is less.

public autoCompleteRowHeight: number source

Row height for the autocomplete dropdown. Defaults to 30.

public autoCompleteSource: * source

The source for the autocomplete dropdown (the list of items).

Properties:

NameTypeAttributeDescription
autoCompleteSource *

public autoCompleteStyleName: * source

Style name for the auto complete dropdown [Style(name="autoCompleteStyleName", type="String")]

Properties:

NameTypeAttributeDescription
autoCompleteStyleName *

public autoCompleteWidth: number source

Width of the autocomplete dropdown. If you do not set it, defaults to the width of the text input

public clearTextOnIconClick: * source

If you specify an Icon Style, setting this variable to true will clear the text on icon click. Used for a "clear" icon.

Properties:

NameTypeAttributeDescription
clearTextOnIconClick *

public delayDuration: * source

The amount of time (in milliseconds) to wait before dispatching the DELAY_CHANGE event.

Properties:

NameTypeAttributeDescription
delayDuration *

public enableAutoComplete: * source

Enables auto complete behavior. Please ensure you set the autocompletesource property.

Properties:

NameTypeAttributeDescription
enableAutoComplete *

public enableDelayChange: * source

Whether or not to enable the DELAY_CHANGE event.

Properties:

NameTypeAttributeDescription
enableDelayChange *

public filterComparisionType: * source

This is usually automatically set, you don't have to manually set it, unless you're sending strings as Date objects. When set, will attempt to first convert the current value to the type you specified and then do the conversion. Values : auto,string,number,boolean,date

Properties:

NameTypeAttributeDescription
filterComparisionType *

public filterOperation: * source

The filter operation to apply to the comparison See the FilterExpression class for a list. Please note, for CheckBoxList and MultiSelectComboBox, this field defaults to "InList" and is ignored when set. Valid values are : "Equals,NotEquals,BeginsWith,EndsWith,Contains,DoesNotContain,GreaterThan,LessThan,GreaterThanEquals,LessThanEquals,InList,NotInList,Between"

Properties:

NameTypeAttributeDescription
filterOperation *

public filterTriggerEvent: * source

The event that the filter triggers on. Defaults to "change", or if the filterRenderer supports com.flexicious.controls.interfaces.IDelayedChange, then the delayedChange event.

Properties:

NameTypeAttributeDescription
filterTriggerEvent *

public grid: * source

The grid that the filter belongs to - can be null if filter is used outside the grid

Properties:

NameTypeAttributeDescription
grid *

public gridColumn: * source

The grid column that the filter belongs to - can be null if filter is used outside the grid

Properties:

NameTypeAttributeDescription
grid *

public hasSearch: * source

Whether or not there is an active search

Properties:

NameTypeAttributeDescription
hasSearch *

public iconGap: * source

The spacing between insideIcon, outsideIcon, and the text input [Style(name="iconGap", type="Number", inherit="no")]

Properties:

NameTypeAttributeDescription
iconGap *

public iconHeight: * source

Width of the inside and outside icons

Properties:

NameTypeAttributeDescription
iconHeight *

public iconWidth: * source

Width of the inside and outside icons

Properties:

NameTypeAttributeDescription
iconWidth *

public idValue: * source

To enable use of the text input in picker type scenarios where we display a label string in the text input, but expose a store for the ID value.

Properties:

NameTypeAttributeDescription
idValue *

public inputMask: * source

Input mask for the text input

Properties:

NameTypeAttributeDescription
inputMask *

public inputMaskOptions: * source

Plugin specific options for the input mask. Depending on the flavor of Flexicious you go with, flexicious will use either the JQuery, Dojo or EXT versions of the input mask. This object will be used to pass in additional parameters for input mask.

Properties:

NameTypeAttributeDescription
inputMaskOptions *

public insideIcon: * source

The icon that is displayed inside the textbox, based on the insideIconPosition property. [Style(name="insideIcon", type="Class", inherit="no")]

Properties:

NameTypeAttributeDescription
insideIcon *

public insideIconPosition: * source

The position of the icon that is displayed inside the textbox. Default 'right'

Properties:

NameTypeAttributeDescription
insideIconPosition *

public maxLength: * source

public onInsideIconClick: * source

Dispatched when the user clicks on a the icon specified by the insideIcon property

Properties:

NameTypeAttributeDescription
onInsideIconClick *

public onOutsideIconClick: * source

Dispatched when the user clicks on a the icon specified by the outsideIcon property

Properties:

NameTypeAttributeDescription
onOutsideIconClick *

public outsideIcon: * source

The icon that is displayed outside the textbox, based on the outsideIconPosition property. [Style(name="outsideIcon", type="Class" , inherit="no")]

Properties:

NameTypeAttributeDescription
outsideIcon *

public outsideIconPosition: * source

The position of the icon that is displayed outside the textbox. Default 'right' [Style(name="outsideIconPosition", type="String", enumeration="left,right")]

Properties:

NameTypeAttributeDescription
outsideIconPosition *

public registered: * source

Whether or not this control has been registered. This should not be set by your code.

Properties:

NameTypeAttributeDescription
registered *

public restrict: String source

Property; indicates the set of characters that a user can enter in the text field. The default value is undefined. If this property is null or an empty string (""), a user can enter any character If this property is a string of characters, the user can enter only characters in the string; the string is scanned from left to right. You can specify a range by using a dash (-). If the string begins with ^, all characters that follow the ^ are considered unacceptable characters. If the string does not begin with ^, the characters in the string are considered acceptable. The ^ can also be used as a toggle between acceptable and unacceptable characters. For example, the following code allows A-Z except X and Q:

public searchField: * source

The field to search on, usually same as the data field.

Properties:

NameTypeAttributeDescription
searchField *

public showIconWhenHasText: * source

Flag to control whether the icon only shows up when there is text in the box

Properties:

NameTypeAttributeDescription
showIconWhenHasText *

public textBoxValue: * source

public timerInstance: * source

public watermark: * source

The watermark to show when there is no text entered into the text input. Depending on the flavor of Flexicious you go with, flexicious will use either the JQuery, Dojo or EXT versions of the watermark.

Properties:

NameTypeAttributeDescription
watermark *

public watermarkOptions: * source

Plugin specific options for the watermark. Depending on the flavor of Flexicious you go with, flexicious will use either the JQuery, Dojo or EXT versions of the water mark. This object will be used to pass in additional parameters for water mark.

Properties:

NameTypeAttributeDescription
watermarkOptions *

public watermarkStyle: * source

Style to apply to the watermark label

Properties:

NameTypeAttributeDescription
watermarkStyle *

public width: * source

Override:

UIComponent#width

Public Methods

public addTemplate() source

public applyAutoCompleteValue() source

Applies the selected item from the list to the autocomplete textbox

public clear() source

public componentDidMountCustom() source

public destroyAutoComplete() source

Destroys the autocomplete list.

public dispatchEvent(evt: *): * source

Dispatches an event into the event flow. The event target is the EventDispatcher object upon which the dispatchEvent() method is called.

Override:

EventDispatcher#dispatchEvent

Params:

NameTypeAttributeDescription
evt *

Return:

*

public filterAutoCompete(item: *): boolean source

Based on the autoCompleteMatchType, filter the autocomplete dataprovider that

Params:

NameTypeAttributeDescription
item *

Return:

boolean

public focus() source

Sets the focus on the textbox

Override:

UIComponent#focus

public forceFilter() source

Dispatches the filter programmatic.

public getClassNames(): string[] source

Override:

UIComponent#getClassNames

Return:

string[]

public getInsideIcon(): * source

Returns the icon within the text input (This is usually the clear icon)

Return:

*

public getOutsideIcon(): * source

Returns the icon outside the span (This is usually the picker icon)

Return:

*

public getPlaceHolder(): * source

Return:

*

public getText(): * source

Getter for the text property

Override:

UIComponent#getText

Return:

*

public getTextBox(): * source

Returns the inner text input

Return:

*

public getValue(): * source

Generic function that returns the value of a IFilterControl

Return:

*

public keyDownHandler(e: *) source

Params:

NameTypeAttributeDescription
e *

public keyUpHandler(event: *) source

If the mouse is clicked up, and we dont own the target, kill autocomplete.

Params:

NameTypeAttributeDescription
event *

public onAutoCompleteItemClick(event: *) source

Apply the list item value.

Params:

NameTypeAttributeDescription
event *

public onAutoCompleteMouseUpHandler(event: *) source

If the mouse is clicked up, and we dont own the target, kill autocomplete.

Params:

NameTypeAttributeDescription
event *

public onFocusIn(event: *) source

Params:

NameTypeAttributeDescription
event *

public onFocusOut(event: *) source

Params:

NameTypeAttributeDescription
event *

public onInsideIcon(evt: *) source

When icon is enabled, handles the click event of the icon. If clearTextOnIconClick is set to true, clears the text. Dispatches the INSIDE_ICON_CLICK event.

Params:

NameTypeAttributeDescription
evt *

public onInsideIconLoad(evt: *) source

Params:

NameTypeAttributeDescription
evt *

public onOutsideIcon(evt: *) source

When icon is enabled, handles the click event of the icon. If clearTextOnIconClick is set to true, clears the text. Dispatches the INSIDE_ICON_CLICK event.

Params:

NameTypeAttributeDescription
evt *

public onOutsideIconLoad(evt: *) source

Params:

NameTypeAttributeDescription
evt *

public onTextInputDelayedChange(event: *) source

Params:

NameTypeAttributeDescription
event *

public onTimerComplete(event: *) source

Params:

NameTypeAttributeDescription
event *

public setDataProvider(val: *) source

Sets the provided value as the source for the auto complete options.

Params:

NameTypeAttributeDescription
val *

public setIconVisible(event: *) source

Sets the visibility of the icons when there is text in the box on basis of the showIconWhenHasText flag.

Params:

NameTypeAttributeDescription
event *

public setMaxLength(len: *) source

Params:

NameTypeAttributeDescription
len *

public setPlaceHolder(placeHolder: *) source

Params:

NameTypeAttributeDescription
placeHolder *

public setSelection(begin: *, end: *) source

Sets the selection on the text box.

Params:

NameTypeAttributeDescription
begin *
end *

public setText(val: *) source

Setter for the text property

Override:

UIComponent#setText

Params:

NameTypeAttributeDescription
val *

public setValue(val: *) source

Generic function that sets the value of a IFilterControl

Params:

NameTypeAttributeDescription
val *

public setWidth(w: *) source

Override:

UIComponent#setWidth

Params:

NameTypeAttributeDescription
w *

public sizeComponents() source

public validate(evt: *) source

Params:

NameTypeAttributeDescription
evt *