Button for a toolbar.
This widget should be used ONLY in an ``aps/Toolbar``. Find an example in aps/Toolbar.
Table of contents
CP only
Using the aps/ToolbarButton widget, you can display a toolbar button
that contains the same properties and methods as the aps/Button widget.
Since all properties are the same as in aps/Button, below are just
few examples for the aps/ToolbarButton. Examples of aps/Toolbar are presented
later.
To assign a label and an icon to a button, use the following properties:
label (preferable) or title - defines a text displayed on the button. Use only one of them.
iconClass or iconName - defines an icon for the button:
iconClass specifies a CSS class
require(["aps/Toolbar", "aps/ToolbarButton", "aps/PageContainer", "aps/ready!"],
function(Toolbar, ToolbarButton, PageContainer){
"use strict";
var page = new PageContainer({}, "example");
var toolbar = new Toolbar({});
toolbar.addChild(new ToolbarButton({
label: "Add New Server",
iconClass: "sb-add-new-server"
}));
page.addChild(toolbar);
page.startup();
});
iconName specifies a path to the icon file
You can add an on-click handler for a button by defining the onClick property:
require(["aps/Toolbar", "aps/ToolbarButton", "aps/PageContainer", "aps/ready!"],
function(Toolbar, ToolbarButton, PageContainer){
"use strict";
var page = new PageContainer({}, "example");
var toolbar = new Toolbar();
toolbar.addChild(new ToolbarButton({
label: "Add New Server",
iconClass: "sb-add-new-server",
onClick: function(){
alert("triam!");
}
}));
page.addChild(toolbar);
page.startup();
});
After creating a button, irrespective of the way it was declared,
you can specify an on-click handler at any time you like by using
the on method with a value of the first argument set to “click”.
You can get a button object with help of a
dijit/registry object as explained at Base Properties and Methods.
require([
"aps/Toolbar",
"aps/ToolbarButton",
"dijit/registry",
"aps/PageContainer",
"aps/ready!"
], function(Toolbar, ToolbarButton, registry, PageContainer){
"use strict";
var page = new PageContainer({}, "example");
var toolbar = new Toolbar();
toolbar.addChild(new ToolbarButton({
id: "AddNewServer",
label: "Add New Server",
iconClass: "sb-add-new-server"
}));
page.addChild(toolbar);
page.startup();
registry.byId("AddNewServer").on("click", function(e) {
alert("click!");
});
});
| PROPERTY | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
| autoBusy | boolean | true | If true than a button will be disabled after a click. |
| busyLabel | string | Please wait | Text displayed while a button is disabled. |
| disabled | boolean | false | Specifies if the widget will respond to user input. |
| gridSize | string | undefined | This specifies the widget width that is relevant only for widgets inside Container, FieldSet, or Tiles. |
| hideFor | string | “” | It is a string containing “md” (hides the property in desktops), or “xs” (hides it in mobiles), or both “md xs” (hides the property regardless of the mode). |
| iconClass | string | “” | Class to apply to the DOMNode in a button to make it display an icon. |
| iconName | string | “” | Icon source - address to an icon file. |
| isBusy | boolean | false | If the widget is busy then this property is true. |
| label | string | “” | Text on the button. |
| requireItems | boolean | false | If “true” the button will be enabled only if ONE or MORE items in the aps/Grid is selected. |
| requireSingleItem | boolean | false | If “true” the button will be enabled only if ONE item in the aps/Grid is selected. |
| timeout | number | 0 | If exists, then it will call the cancel() method to enable the button after a period of time specified by this property. |
| title | string | “” | Text on the button. |
| visible | boolean | true | If this property value is set to true, then the widget is visible. |
If true than a button will be disabled after a click. Default value: true.
Text displayed while a button is disabled. Default value: “Please wait” (PCP / CCP v1) or “Loading” (CCP v2).
This specifies the widget width that is relevant only for widgets inside Container, FieldSet, or Tiles. In other cases it will be ignored.
gridSize string contains few options with number values (from 1 to 12) separated by spaces, which specify the grid size of the widget in different layouts:
- md - desktop
- xs - phone
For example, gridSize: “md-4 xs-2”.
All values below 1, e.g. “md-0”, will be replaced with the empty string (“”), values above 12, e.g. “md-14”, will be reduced to 12 (“md-12”).
Default value: undefined.
It is a string containing “md” (hides the property in desktops), or “xs” (hides it in mobiles), or both “md xs” (hides the property regardless of the mode). Default value: “”.
Class to apply to the DOMNode in a button to make it display an icon. Default value: “”.
Icon source - address to an icon file. Deprecated in CCP v2 and replaced with iconClass. it has no effect without the label or title property. Default value: “”.
Text on the button. You shouldn’t use both together. The preferred equivalent for the “title” property. Default value: “”.
If “true” the button will be enabled only if ONE or MORE items in the aps/Grid is selected. Default value: false.
If “true” the button will be enabled only if ONE item in the aps/Grid is selected. This property has a priority on requireItems property. Default value: false.
If exists, then it will call the cancel() method to enable the button after a period of time specified by this property. Default value: 0.
Text on the button. Equivalent for the “title” property. You shouldn’t use both together. We recommended using the “label” property. Default value: “”.
If this property value is set to true, then the widget is visible.
Default value: true.
| METHOD | RETURN | DESCRIPTION |
|---|---|---|
| cancel () | undefined
|
Switches the button back to the enabled state |
| destroy () | undefined
|
Destroys the button |
| get () | any
|
Get a property of the Stateful instance |
| getParents () | array
|
Discover and return all parents of the widget |
| makeBusy () | aps.button
function
|
Does a transition between the ‘ready to handle user event’ (isBusy: false) state and the ‘busy’ (isBusy: true) state |
| placeAt () | dijit/_widgetbase
function
|
Place this widget somewhere in the DOM based on standard dojo/dom-construct::place() conventions |
| resetTimeout (timeout) | undefined
|
Resets existing timeout and sets a new timeout |
| set () | object
function
|
Set a property of the Stateful instance |
| setLabel (val) | undefined
|
Deprecated |
| startup () | undefined
|
Processing after the DOM fragment is added to the document |
Switches the button back to the enabled state. To prevent double submission by a user, aps.Button is switched to the disabled state automatically each time after the user clicks. To switch the button back to the enabled state, call the cancel() method in your onClick handler. Functionality is almost the same as dojox/form/BusyButton.
Return: undefined
Get a property of the Stateful instance. Get a named property of the Stateful object. The property may potentially be retrieved via a getter method in subclasses.
In the base class, this just retrieves the object’s property.
Return: any
Does a transition between the ‘ready to handle user event’ (isBusy: false) state and the ‘busy’ (isBusy: true) state. Also disables the button (disabled:true).
Return: aps.button function
Place this widget somewhere in the DOM based on standard dojo/dom-construct::place() conventions. A convenience function providing a simple shorthand mechanism to put an existing (or newly created) widget somewhere in the DOM, and allow chaining.
Return: dijit/_widgetbase function
Resets existing timeout and sets a new timeout.
Return: undefined
| ARGUMENT | TYPE | DESCRIPTION |
|---|---|---|
timeout |
Int
|
Time in millisecondsю |
Set a property of the Stateful instance. Sets named properties of the stateful object and notifies the watchers of the property. A programmatic setter may be defined in subclasses.
Return: object function
Deprecated. Use set() instead.
Return: undefined
| ARGUMENT | TYPE | DESCRIPTION |
|---|---|---|
val |
String
|
The label of the button. |
Processing after the DOM fragment is added to the document. Called after a widget and its children have been created and added to the page and all related widgets have finished their creation cycle, that is after the postCreate() function is successfully completed for each of the related widgets. Note that startup() may be called while the widget is still hidden.
Return: undefined
| EVENT | RETURN | DESCRIPTION |
|---|---|---|
| onClick () | undefined
|
The method is called when a user clicks on the widget |
The method is called when a user clicks on the widget.