A control for integration with an HTML form.
The component allows you to get an HTML Form as a lib-based view, so that to use it together with the other lib components (common API, techniques, architecture etc.). Check htmlform documentation for more detailed description.
HTML.
<div class="myform">
<div>
<label for="title">Book title</label><br/>
<input type="text" name="title" placeholder="Title" />
</div>
<div>
<label for="author">Author</label><br/>
<input type="text" name="author" placeholder="Author" />
</div>
</div>
JS.
var htmlform = webix.ui({
view:"htmlform",
id:"formView",
padding:5,
content:document.body
});
| adjust | adjusts the component to the size of the parent HTML container |
| attachEvent | attaches the handler to an inner event of the component |
| bind | binds components |
| blockEvent | temporarily blocks triggering of ALL events of the calling object |
| blur | removes focus from the component |
| callEvent | calls an inner event |
| clear | clears all the fields in a specified form |
| define | redefines a single configuration property (or a object with properties) |
| destructor | destructs the calling object |
| detachEvent | detaches a handler from an event (which was attached before by the attachEvent method) |
| disable | disables the calling view (makes it dimmed and unclickable) |
| enable | enables the calling view that was disabled by the 'disable' method |
| focus | sets focus into the necessary component |
| getChildViews | returns child views of the calling component |
| getCleanValues | returns object with original form values |
| getDirtyValues | returns object with changed values |
| getFormView | returns master form for the input |
| getNode | returns the main HTML container for the calling object |
| getParentView | returns the parent view of the component |
| getScrollState | returns the scroll position |
| getTopParentView | returns the top parent view |
| getValues | derives input values from the form |
| hasEvent | checks whether the component has the specified event handler |
| hide | hides the view |
| isDirty | checks whether changes were made within the form |
| isEnabled | checks whether the view is enabled |
| isVisible | checks whether the view is visible |
| load | loads data from an external data source |
| mapEvent | routes events from one object to another |
| markInvalid | marks a form control invalid |
| parse | loads data to the component from an inline data source |
| queryView | returns inner element/elements of a widget that correspond(s) to the defined parameters |
| refresh | repaints the component |
| render | renders the specified item or the whole component |
| resize | adjusts the view to a new size |
| scrollTo | scrolls the data container to a certain position |
| setContent | attaches html container to the template |
| setDirty | marks the form as the one with changed values and vice versa |
| setHTML | sets HTML for template |
| setValues | sets values into the inputs of a form/toolbar/property sheet control |
| show | makes the component visible |
| sync | allows you to sync two copies of data (all or just a part of it) from one DataCollection to another |
| unbind | breaks "bind" link |
| unblockEvent | cancels events blocking that was enabled by the 'blockEvent' command |
| onAfterLoad | fires after server side loading is complete |
| onAfterRender | occurs immediately after the component has been rendered. |
| onAfterScroll | occurs when some webix view has been scrolled |
| onBeforeLoad | fires immediately before data loading has started |
| onBeforeRender | occurs immediately before the component has been rendered |
| onBindRequest | fires when the component is ready to receive data from the master component |
| onBlur | fires when focus is moved out of the view |
| onChange | fires when data in the input of related form/toolbar is changed |
| onDestruct | occurs when component destroyed |
| onEnter | fires when the Enter key has been pressed |
| onFocus | fires when a view gets focus |
| onKeyPress | occurs when keyboard key is pressed for the control in focus |
| onLoadError | fires when an error occurs during data loading (invalid server side response) |
| onLongTouch | fires on holding finger in some position for a certain period of time |
| onSwipeX | occurs on a horizontal swipe movement |
| onSwipeY | occurs on a vertical swipe movement |
| onTimedKeyPress | fires after typing has been finished in the field |
| onTouchEnd | occurs when the touch event is ended |
| onTouchMove | occurs during touch movement |
| onTouchStart | fires when some webix view has been touched |
| onValues | fires after values have been set within a toolbar or a form |
| onViewResize | fires when the size of a view has been changed by resizer |
| onViewShow | fires when any hidden view is shown |
| animate | defines the type of animation, with which the view is shown, if it is a Multiview cell |
| autoheight | lets the component autosize to its contents |
| borderless | used to hide the component borders |
| complexData | enables complex data parsing mode |
| container | an HTML container (or its ID) where the component should be initialized |
| content | the id or node, the content of which will be moved to the view |
| css | the name of the CSS class or the object with styles that will be applied to the view container |
| data | JavaScript array containing data for the component |
| datatype | the type of loaded data |
| disabled | indicates whether an item is enabled |
| gravity | sets the view gravity |
| height | sets the height of the component |
| hidden | defines whether the view will be hidden initially |
| id | the ID of a widget |
| keyPressTimeout | a delay between the key press and the action |
| maxHeight | sets the maximum height for the view |
| maxWidth | sets the maximum width for the view |
| minHeight | sets the minimal height for the view |
| minWidth | sets the minimal width for the view |
| on | allows attaching custom handlers to inner events of the component |
| onClick | attaches a click handler for component parts with the specified CSS class |
| scroll | enables/disables the scroll bar |
| scrollSpeed | the time during which the component is scrolled to the specified position (in milliseconds) |
| src | the path to an external template that is loaded by Ajax |
| template | the component template |
| tooltip | sets a popup message next to the item when the cursor points to it |
| url | the URL which the component will use to load data after its initialization |
| width | sets the width of a widget |
| $getSize | returns the current size of the component |
| $height | the current height of the view |
| $scope | scope for resolving event and method names |
| $setNode | defines HTML element for the component |
| $setSize | sets the component size |
| $skin | the method which will be called when skin is defined |
| $tooltipIn | shows a tooltip |
| $tooltipMove | defines the tooltip while the cursor moves over a view or an HTML area |
| $tooltipOut | defines the behavior of a tooltip when the cursor is out of the target widget or HTML area |
| $view | reference to the top HTML element of the view |
| $width | the current width of the view |
| config | all options from the initial component configuration |
| name | indicates the name of the component (a read-only property) |