StateChanged: function (sender, args);
sender. Event source.
args. Event information.
The StateChanged event is fired when the button state is changed.
To execute the example, the HTML page must contain the ToolBar component named toolBar (see Example of creating the ToolBar component).
//Add four buttons to the toolbar: two radio buttons and two checkboxes:
toolBar.addItem(new PP.Ui.ToolBarButton({ Content: "1", IsToggle: true
}));
toolBar.addItem(new PP.Ui.ToolBarButton({ Content: "2", IsToggle: true
}));
toolBar.addItem(new PP.Ui.ToolBarButton({ Content: "3", GroupName: "Gr"
}));
toolBar.addItem(new PP.Ui.ToolBarButton({ Content: "4", GroupName: "Gr"
}));
var children = toolBar.getItems();
//Create a function that handles the StateChange event:
function onStateChange() {
for (var i = 0; i < children.length; i++) {
var checked = toolBar.getItem(i).getIsChecked();
var toggle = toolBar.getItem(i).getIsToggle();
if (checked == true) {
if (toggle == true)
toolBar.getItem(i).setContent("check" + i);
else
toolBar.getItem(i).setContent("radio" + i);
}
}
}
//Adds the event handler for all buttons of the toolbar:
for (var i = 0; i < children.length; i++) {
toolBar.getItem(i).StateChanged.add(onStateChange);
}
After executing the example two radio buttons and two checkboxes are added on the toolbar. Selecting these buttons sets new names for them.
See also: