TextInput
Extends:
Direct Subclass:
Indirect Subclass:
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 |
gridColumn: * The grid column that the filter belongs to - can be null if filter is used outside the grid |
|
public |
hasSearch: * 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 |
iconHeight: * Width of the inside and outside icons |
|
public |
iconWidth: * 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 |
inputMask: * Input mask for the text input |
|
public |
Plugin specific options for the input mask. |
|
public |
insideIcon: * 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 |
maxLength: * |
|
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 |
outsideIcon: * 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 |
registered: * 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 |
searchField: * 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 |
textBoxValue: * |
|
public |
|
|
public |
watermark: * 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 |
filterAutoCompete(item: *): boolean Based on the autoCompleteMatchType, filter the autocomplete dataprovider that |
|
public |
focus() Sets the focus on the textbox |
|
public |
Dispatches the filter programmatic. |
|
public |
getClassNames(): string[] |
|
public |
getInsideIcon(): * Returns the icon within the text input (This is usually the clear icon) |
|
public |
getOutsideIcon(): * Returns the icon outside the span (This is usually the picker icon) |
|
public |
getPlaceHolder(): * |
|
public |
getText(): * |
|
public |
getTextBox(): * Returns the inner text input |
|
public |
getValue(): * Generic function that returns the value of a IFilterControl |
|
public |
keyDownHandler(e: *) |
|
public |
keyUpHandler(event: *) If the mouse is clicked up, and we dont own the target, kill autocomplete. |
|
public |
onAutoCompleteItemClick(event: *) Apply the list item value. |
|
public |
onAutoCompleteMouseUpHandler(event: *) 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 |
onInsideIconLoad(evt: *) |
|
public |
onOutsideIcon(evt: *) When icon is enabled, handles the click event of the icon. |
|
public |
onOutsideIconLoad(evt: *) |
|
public |
onTextInputDelayedChange(event: *) |
|
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 |
getClassNames(): string[] |
|
public |
getStyle(prop: *): * Gets the value of the prop property on this object |
|
public |
hasEventListener(type: *): Boolean Returns true if an event listener exists |
|
public |
implementsOrExtends(name: *): Boolean 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 |
childrenWithProps: *[] |
|
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 |
errorString: * |
|
public |
handCursor: * |
|
public |
|
|
public |
|
|
public |
|
|
public |
|
|
public |
|
|
public |
A flag to store if this object has been marked for invalidation. |
|
public |
oldDisplay: * |
|
public |
parent: * |
|
public |
propertyBag: {} |
|
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 |
componentWillReceiveProps(nextProps: *) |
|
public |
|
|
public |
|
|
public |
detachClass(newClass: *) |
|
public |
domEventFired(event: *) The event handler that gets triggered from the HTML DOM. |
|
public |
focus() |
|
public |
getAllChildren(): * |
|
public |
getAttribute(attr: *): * |
|
public |
getAutomationName(): * |
|
public |
getChildAt(idx: *): * Returns the child of the domElement at the specified index. |
|
public |
getClassNames(): string[] |
|
public |
getComponentStyleAttribute(attr: *): * |
|
public |
getData(): * This is a getter/setter for the data property. |
|
public |
getElementByTagName(tag: *): * |
|
public |
getEnabled(): * Sets the enabled flag |
|
public |
getErrorString(val: *): * |
|
public |
getHandCursor(): * |
|
public |
getHandCursor(): * |
|
public |
getHeight(): * |
|
public |
|
|
public |
|
|
public |
getIncludeInLayout(val: *): * |
|
public |
getInnerHTML(): * Getter for the innerHTML property |
|
public |
getPixelHeight(): * |
|
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 |
numChildren(): * Gets the number of children of the dom element associated with this UIComponent. |
|
public |
Recursively iterates through the parent hierarchy of the given element to check to see if the current node is in its parent hierarchy. |
|
public |
|
|
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 |
removeComponentAttribute(attr: *) |
|
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 |
setAutomationName(val: *) |
|
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 |
setHorizontalScrollPolicy(policy: *) |
|
public |
setHorizontalScrollPosition(val: *): * |
|
public |
setIncludeInLayout(val: *) |
|
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 |
setVerticalScrollPolicy(policy: *) |
|
public |
setVerticalScrollPosition(val: *): * |
|
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#constructorParams:
Name | Type | Attribute | Description |
props | * | ||
tag | * | ||
shouldInit | * |
Public Members
public autoCompleteDataField: string source
The dataField value associated with autocomplete dropdown.
public autoCompleteLabelField: string source
The labelField value associated with autocomplete dropdown.
public autoCompleteList: * 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:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
autoCompleteSource | * |
public autoCompleteStyleName: * source
Style name for the auto complete dropdown [Style(name="autoCompleteStyleName", type="String")]
Properties:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
clearTextOnIconClick | * |
public delayDuration: * source
The amount of time (in milliseconds) to wait before dispatching the DELAY_CHANGE event.
Properties:
Name | Type | Attribute | Description |
delayDuration | * |
public enableAutoComplete: * source
Enables auto complete behavior. Please ensure you set the autocompletesource property.
Properties:
Name | Type | Attribute | Description |
enableAutoComplete | * |
public enableDelayChange: * source
Whether or not to enable the DELAY_CHANGE event.
Properties:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
filterTriggerEvent | * |
public grid: * source
The grid that the filter belongs to - can be null if filter is used outside the grid
Properties:
Name | Type | Attribute | Description |
grid | * |
public gridColumn: * source
The grid column that the filter belongs to - can be null if filter is used outside the grid
Properties:
Name | Type | Attribute | Description |
grid | * |
public hasSearch: * source
Whether or not there is an active search
Properties:
Name | Type | Attribute | Description |
hasSearch | * |
public iconGap: * source
The spacing between insideIcon, outsideIcon, and the text input [Style(name="iconGap", type="Number", inherit="no")]
Properties:
Name | Type | Attribute | Description |
iconGap | * |
public iconHeight: * source
Width of the inside and outside icons
Properties:
Name | Type | Attribute | Description |
iconHeight | * |
public iconWidth: * source
Width of the inside and outside icons
Properties:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
idValue | * |
public inputMask: * source
Input mask for the text input
Properties:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
insideIcon | * |
public insideIconPosition: * source
The position of the icon that is displayed inside the textbox. Default 'right'
Properties:
Name | Type | Attribute | Description |
insideIconPosition | * |
public maxLength: * source
public onInsideIconClick: * source
Dispatched when the user clicks on a the icon specified by the insideIcon property
Properties:
Name | Type | Attribute | Description |
onInsideIconClick | * |
public onOutsideIconClick: * source
Dispatched when the user clicks on a the icon specified by the outsideIcon property
Properties:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
outsideIconPosition | * |
public registered: * source
Whether or not this control has been registered. This should not be set by your code.
Properties:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
searchField | * |
public showIconWhenHasText: * source
Flag to control whether the icon only shows up when there is text in the box
Properties:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
watermarkOptions | * |
public watermarkStyle: * source
Style to apply to the watermark label
Properties:
Name | Type | Attribute | Description |
watermarkStyle | * |
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 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#dispatchEventParams:
Name | Type | Attribute | Description |
evt | * |
Return:
* |
public filterAutoCompete(item: *): boolean source
Based on the autoCompleteMatchType, filter the autocomplete dataprovider that
Params:
Name | Type | Attribute | Description |
item | * |
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 keyDownHandler(e: *) source
Params:
Name | Type | Attribute | Description |
e | * |
public keyUpHandler(event: *) source
If the mouse is clicked up, and we dont own the target, kill autocomplete.
Params:
Name | Type | Attribute | Description |
event | * |
public onAutoCompleteItemClick(event: *) source
Apply the list item value.
Params:
Name | Type | Attribute | Description |
event | * |
public onAutoCompleteMouseUpHandler(event: *) source
If the mouse is clicked up, and we dont own the target, kill autocomplete.
Params:
Name | Type | Attribute | Description |
event | * |
public onFocusIn(event: *) source
Params:
Name | Type | Attribute | Description |
event | * |
public onFocusOut(event: *) source
Params:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
evt | * |
public onInsideIconLoad(evt: *) source
Params:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
evt | * |
public onOutsideIconLoad(evt: *) source
Params:
Name | Type | Attribute | Description |
evt | * |
public onTextInputDelayedChange(event: *) source
Params:
Name | Type | Attribute | Description |
event | * |
public onTimerComplete(event: *) source
Params:
Name | Type | Attribute | Description |
event | * |
public setDataProvider(val: *) source
Sets the provided value as the source for the auto complete options.
Params:
Name | Type | Attribute | Description |
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:
Name | Type | Attribute | Description |
event | * |
public setMaxLength(len: *) source
Params:
Name | Type | Attribute | Description |
len | * |
public setPlaceHolder(placeHolder: *) source
Params:
Name | Type | Attribute | Description |
placeHolder | * |
public setSelection(begin: *, end: *) source
Sets the selection on the text box.
Params:
Name | Type | Attribute | Description |
begin | * | ||
end | * |
public setText(val: *) source
Setter for the text property
Override:
UIComponent#setTextParams:
Name | Type | Attribute | Description |
val | * |
public setValue(val: *) source
Generic function that sets the value of a IFilterControl
Params:
Name | Type | Attribute | Description |
val | * |
public sizeComponents() source
public validate(evt: *) source
Params:
Name | Type | Attribute | Description |
evt | * |