Button

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

Adding Button

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"
        }   
    ]
});

Attributes

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

Working with Button

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();

List of the control methods:

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

List of the control events:

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

Back to top