A simple button that can have an icon. Button can be twoState and can have a badge with a number, which can be useful for displaying the number of new messages, etc.
Related sample: Form. All DhxForm Inputs
You can easily add a Button control during initialization of a form:
var form = new dhx.Form("form_container", {
rows: [
{
type: "button",
name: "button",
text: "Send",
size: "medium",
view: "flat",
color: "primary"
}
]
});
You can provide the following attributes in the configuration object of a button:
type | (string) the type of a control, set it to "button" |
name | (string) the name of a control |
id | (string) the id of a control, auto-generated if not set |
text | (string) the text label of a button |
submit | (boolean) enables the button to send form data to a server |
url | (string) the URL the post request with form data will be sent to (if the submit property is set to true) Related sample: Form. All DhxForm Inputs |
width | (string|number|"content") the width of a control |
height | (string|number|"content") the height of a control |
css | (string) adds style classes to a control |
disabled | (boolean) defines whether a control is enabled (false) or disabled (true) |
hidden | (boolean) defines whether a control is hidden |
icon | (string) an icon of the button |
view | (string) defines the look of a button: "flat"|"link" |
size | (string) defines the size of a button: "small"|"medium" |
color | (string) defines the color scheme of a button: "danger"|"secondary"|"primary"|"success" |
full | (boolean) extends a button to the full width of a form |
circle | (boolean) makes the corners of a button round |
loading | (boolean) adds a spinner into a button |
padding | (string|number) sets padding between a cell and a border of a button control |
You can manipulate a Button control by using methods (or events) of the object returned by the getItem() method.
For example, you can disable a control on a page:
form.getItem("button").disable();
disable | disables a Button control on a page |
enable | enables a disabled Button control |
getProperties | returns an object with the available configuration attributes of the control |
hide | hides a Button control |
isDisabled | checks whether a Button control is disabled |
isVisible | checks whether a Button control is visible on the page |
setProperties | allows changing available configuration attributes of the control dynamically |
show | shows a Button control on the page |
afterChangeProperties | fires after configuration attributes of the control have been changed dynamically |
afterHide | fires after a control is hidden |
afterShow | fires after a control is shown |
beforeChangeProperties | fires before configuration attributes of the control are changed dynamically |
beforeHide | fires before a control is hidden |
beforeShow | fires before a control is shown |
click | fires after a click on a button control |