form.SearchField Class
Form field designed to search in dataSource.Collection
Item Index
Methods
- addChild
- addChildren
- clear
- commit
- disable
- dispose
- disposeAllChildren
- enable
- focus
- getAllChildren
- getBody()
- getCanvas
- getChild
- getChildren
- getClassChildren
- getEl()
- getFieldWidth
- getForm *
- getFormEl
- getHeight
- getParent
- getSocket
- getTitle
- getValue
- getWidth
- hasChildren
- hide
- hideAfterDelay
- insertJSON
- isCollapsible
- isDirty
- isHidden
- isValid
- isVisible
- load
- ludoConfig
- ludoDOM
- ludoEvents
- ludoRendered
- reset
- resize
- search
- setHtml
- setTitle
- setValue
- show
- showChild
Properties
Attributes
Methods
addChild
-
child. -
insertAt -
pos
Add a child component. The method will returned the created component.
Parameters:
Returns:
addChildren
-
children
Add child components Only param is an array of child objects. A Child object can be a component or a JSON object describing the component.
Parameters:
-
childrenArray
Returns:
clear
()
Reset value back to the original value sent(constructor value)
Returns:
commit
()
Update initial value to current value. These actions will always trigger a commit
- Form or Model submission
- Fetching new record for a ludo.model.Model
Returns:
disable
()
Disable form element
Returns:
dispose
-
view
Dispose LudoJS components
Parameters:
-
viewCore
disposeAllChildren
()
Remove all children
Returns:
enable
()
Enable form element
Returns:
focus
()
Focus form element
Returns:
getAllChildren
()
Return array of all child components, including grand children
Returns:
getBody()
()
Object
Return reference to the "body" DOM element. A component consists of one container and inside it a DOM "body" element
Returns:
getCanvas
()
canvas.Canvas
Returns drawable Canvas/SVG
Returns:
Example:
var win = new ludo.Window({ id:'myWindow', left:50, top:50, width:410, height:490, title:'Canvas', css:{ 'background-color':'#FFF' } }); // Creating style sheet var paint = new ludo.canvas.Paint({ css:{ 'fill':'#FFFFFF', 'stroke':'#DEF', 'stroke-width':'5' } }); var canvas = win.getCanvas(); canvas.adopt(new ludo.canvas.Node('line', { x1:100, y1:100, x2:200, y2:200, "class":paint }));
getChildren
()
Return Array reference to direct direct child components.
Returns:
getClassChildren
()
Array | Children
Return child views of this class. By default it returns the children property of the class. There may be advantages of defining children in this method. By defining children in the children property of the class, you don't have access to "this". By returning children from getClassChildren, you will be able to use "this" as a reference to the class instance.
Returns:
getEl()
()
Object
Return reference to components DOM container. A component consists of one container and inside it a DOM "body" element
Returns:
getForm *
()
form.Manager
Returns form.Manager for this view. The form manager gives you access to form methods like save, deleteRecord, reset etc
Returns:
Example:
view.getForm().reset();
to reset all form fields
view.getForm().save();
to submit the form
view.getForm().read(1);
to send a read request to the server for record with id 1.
getFormEl
()
Get reference to input element
Returns:
getTitle
()
Returns title of Component.
Returns:
getValue
()
Return current value
Returns:
getWidth
()
Number
Returns total width of component including padding, borders and margins
Returns:
hide
()
Hide this component
Returns:
insertJSON
-
data
Insert JSON into components body Body of Component will be updated with compiled JSON from ludo.tpl.Parser. This method will be called automatically when you're using a JSON data-source
Parameters:
-
dataObject
Returns:
isDirty
()
Boolean
Returns true if current value is different from original value
Returns:
isValid
()
Boolean
Returns true when value of form element is valid, i.e. larger than minValue, matching regex etc.
Returns:
load
()
Load content from the server. This method will send an Ajax request to the server using the properties specified in the remote object or data-source
Returns:
ludoDOM
()
The second life cycle method This method is typically used when you want to create your own DOM elements.
Example:
ludoDOM : function() {
this.parent(); // Always call parent ludoDOM
var myEl = new Element('div');
myEl.set('html', 'My Content');
this.getEl().adopt(myEl);
}
ludoEvents
()
The third life cycle method This is the place where you add custom events
Returns:
Example:
ludoEvents:function(){ this.parent(); this.addEvent('load', this.myMethodOnLoad.bind(this)); }
ludoRendered
()
The final life cycle method. When this method is executed, the componenent (including child components) are fully rendered.
reset
()
Reset / Roll back to last committed value. It could be the value stored by last commit method call or if the original value/default value of this field.
Returns:
resize
-
config
Resize Component and it's children. Example:
Parameters:
-
configObject
Example:
component.resize( { width: 200, height:200 } );
search
()
Executes search in data source
Properties
array unReneredChildren
Unknown
Array of unrendered children
boolean isRendered
Unknown
Property set to true when component and it's children are rendered.
int
Unknown
private
current pixel width of form element
isReady
Boolean
private
Is form element ready for setValue. For combo boxes and select boxes it may not be ready until available values has been loaded remotely
layout
Object | String
Layout config object
Default: undefined
Example:
layout:{ type:'linear', orientation:'horizontal' } or shortcut :
layout:"cols" which is the same as linear horizontal
Layout types: linear, fill, grid, tab, popup
linkWith
String
Link with a form component with this id. Value of these components will always be the same Update one and the other component will be updated automatically. It's sufficient to specify linkWith for one of the two views.
Default: undefined
statefulProperties
Array
When using stateful:true, value will be preserved to next visit.
Default: ['value']
string cssSignature
Unknown
private
CSS class added to container of this component
Default: undefined
tpl
String
Template for JSON compiler.
Curly braces {} are used to specify keys in the JSON object. The compiler will replace {key} with JSON.key
The compiled string will be inserted as html of the body element.
The template will be compiled automatically when you're loading JSON remotely. If JSON is an array of object, the template will be applied to each object, example:
JSON : [ { firstname : 'Jane', lastname : 'Doe' }, { firstname : 'John', lastname: 'Doe' }]
tpl : '<div>{lastname}, {firstname}</div>
will produce this result:
<div>Doe, Jane</div><div>Doe, John</div>
Default: '' (empty string)
Example:
tpl:'Firstname: {firstname}, lastname:{lastname}'
twin
String
Will not validate unless value is the same as value of the form element with this id Example of use: Password and Repeat password. It's sufficient to specify "twin" for one of the views.
Default: undefined
validateKeyStrokes
Boolean
Run RegEx validation on key strokes. Only keys matching "regex" will be added to the text field.
Default: false
validator
Object
Object of class form.validator.* or a plain validator function When set the isValid method of the validator will be called after standard validation is complete and form element is valid.
Example:
validator : { type : 'form.validator.Md5', value : 'MD5 hash of something' } In order to validate this field, the MD5 of form field value must match form.validator.Md5.value
validator:function(value){ return value === 'Valid value'; } is example of simple function used as validator.
Attributes
children
Array
Array of Config objects for dynamically created children
Example:
new ludo.Window({ left : 200, top : 200, width : 400, height: 400, children : [{ type : 'View', html : 'This is my sub component' }] });
containerCss
Object
CSS styles of component container example: { padding : '2px', margin: '2px' }
Default: undefined
copyEvents
Object
Create copies of events, example: This will fire a "send" event for every "click" event.
Default: undefined
Example:
copyEvents:{ 'click' : 'send' }
css
Object
CSS styles of body element of component example: { padding : '2px', margin: '2px' }
Default: undefined
fieldWidth
Int
Width of input element
Default: undefined
Fires event fieldWidthChange
Fires when the value for the configuration attribute fieldWidth is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
form
Object
Form object, used for form submission. Example
Default: undefined
Example:
form : { url: 'my-submit-url.php', method:'post', name : 'myForm' }
formConfig
Object
Form config for child elements, example { labelWidth : 200, stretchField:true }, which will be applied to all child form elemetns if no labelWidth is defined in their config
Default: undefined
formCss
Object, example: border : '1px solid #000'
Custom CSS rules to apply to input element
Default: undefined
Fires event formCssChange
Fires when the value for the configuration attribute formCss is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
frame
Boolean
Draw a frame around the component. This is done by assigning the container to css class ludo-container-frame and body element to ludo-body-frame. You can also customize layout by specifying css and|or containerCss
Default: false
labelWidth
Width of label
Default: 100
Fires event labelWidthChange
Fires when the value for the configuration attribute labelWidth is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
ludoDB
Object
Config object for LudoDB integration.
Example:
ludoDB:{ 'resource' : 'Person', 'arguments' : 1, // id of person 'url' : 'router.php' // optional url }
This example assumes that ludoJS properties are defined in the LudoDBModel called "Person".
maxLength
Int
Max length of input field
Default: undefined
Fires event maxLengthChange
Fires when the value for the configuration attribute maxLength is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
minLength
Number
Minimum length of value. invalid event will be fired when value is too short. The value will be trimmed before checking size
Default: undefined
Fires event minLengthChange
Fires when the value for the configuration attribute minLength is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
name
String
"name" is inherited from ludo.View. It will also be set as name of input element
Default: undefined
Fires event nameChange
Fires when the value for the configuration attribute name is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
object tplParserConfig
Default config for ludo.tpl.Parser. ludo.tpl.Parser is a JSON compiler which converts given tpl into a string. If you want to create your own parser, extend ludo.tpl.Parser and change value of tplParserConfig to the name of your class
Default: { type: 'tpl.Parser' }
regex
RegExp
Regular expression used for validation
Default: undefined
Fires event regexChange
Fires when the value for the configuration attribute regex is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
Example:
regex:'[0-9]'
This will only validate numbers
required
Boolean
Is a value required for this field
Default: false
Fires event requiredChange
Fires when the value for the configuration attribute required is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
resizable
Boolean
if set to true and this component is a child of a component with "rows" or "cols" layout, resize handles will be created for it and it will be resizable. Please notice that components with stretch set to true are not resizable.
searchFn
Function
Custom search fn to execute instead of plain text search
Default: undefined
Example:
searchFn:function(record){
return record.value = this.value && record.active === true
}
note that "this" inside the function is a reference to search field.
selectOnFocus
Boolean
On focus, auto select text of input field.
Default: false
Fires event selectOnFocusChange
Fires when the value for the configuration attribute selectOnFocus is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
socket
Object
Configuration object for socket.Socket, Example: A reference to the socket can be retrieved by this.getSocket()
Default: undefined
Example:
socket:{ url:'http://127.0.0.1:1337', emitEvents:['chat','logout'] }
stretchField
Boolean
Let input field use all remaining space of the component
Default: true
Fires event stretchFieldChange
Fires when the value for the configuration attribute stretchField is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
ucFirst
Boolean
When true, capitalize first letter automatically
Default: false
Fires event ucFirstChange
Fires when the value for the configuration attribute ucFirst is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
ucWords
Boolean
When true, capitalize first letter of every word while typing Note! ucWords is not an option for ludo.form.Textarea
Default: false
Fires event ucWordsChange
Fires when the value for the configuration attribute ucWords is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
Events
beforeload
This event is fired from the "load" method before a remote request is sent to the server.
beforeshow
Event fired just before a component is shown using the show method
Event Payload:
-
thisObject
blur
On blur event
change
On change event. This event is fired when value is changed manually by the user via GUI. The "change" event is followed by a "valueChange" event. When value is changed using the setValue method only the "valueChange" event is fired.
clean
event fired on blur when value is equal to original/start value
dirty
event fired on blur when value is different from it's original value
focus
On focus event
invalid
Event fired when value of form component is valid. This is fired on blur
key_down
key down event
key_press
key press event
resize
Event fired when component is resized
valid
Event fired when value of form component is valid. This is fired on blur
valueChange
This event is fired whenever current value is changed, either manually by user or by calling setValue. When the value is changed manually by user via GUI, the "change" event is fired first, then "valueChange" afterwards.
Event Payload:
-
valueObject | String | Number -
formform.Elementcomponent