getScrollBox();
The getScrollBox method returns the area of scrolling list of elements.
Executing the example requires links to the PP.js scenario file and the PP.css styles file in the <body> tag of HTML page of the <div> element with the listBox identifier. In the onload event of the <body> tag the createListBox() function call must be specified. Add a list of elements on the page and implement handlers of the following events: ItemClick, ItemMouseDown, SelectableSelected, ItemEdited, ItemEditing:
function createListBox() {
// Create list of elements
listBox = new PP.Ui.ListBox({
// Set parent element
ParentNode: document.getElementById("listBox"),
// Set attribute of scrolling the list to selected element
IsScrollToSelected: True,
// Specify the list of ability to edit elements
EnableEdit: True,
// Set attribute of selecting elements on mouse click
SelectOnMouseDown: True,
/* Set attribute of ability to select
empty set of elements */
EmptySelection: True,
// Set list width
Width: 200,
Height: 210,
// Handle event of clicking list of elements
ItemClick: function(sender, args) {
console.log("Left mous button is clicked over the element: " +
args.Item.getContent());
},
// Handle event of mouse click on the element of the list
ItemMouseDown: function(sender, args) {
console.log("Mouse button is clicked on the element: " +
args.Item.getContent());
},
// Handle click event on the element of the list
SelectableSelected: function(sender, args) {
console.log("Click on the list element is performed");
},
// Handle event of end of editing element of the list
ItemEdited: function(sender, args) {
console.log("Element content: \"" + args.PrevValue +
"\" changed to \"" + args.NewValue + "\"");
},
// Handle event of editing element of the list
ItemEditing: function(sender, args) {
console.log("Element with the following identifier is changed: " +
args.Item.getId());
}
});
// Fill list with elements
listBox.beginUpdate();
for (var i = 1; i <= 50; i++) {
listBox.addItem({
Content: "Item " + i,
Id: "ListItem" + i
});
}
listBox.endUpdate();
}
Output the content of the fifth element of the list to the console:
console.log("Content of the fifth element of the list: " + listBox.getLayoutItems()[4].getContent());
As a result the content of the fifth element is output to the browser console:
Content of the fifth element of the list: Element 5
Output width and height value of list scrolling to the console:
// Obtain sizes of scroll area
var scrollBox = listBox.getScrollBox();
console.log("Scroll area width: " + scrollBox.getWidth());
console.log("Scroll area height: " + scrollBox.getHeight());
Consequently the height and the width values of the scroll area will be output to the browser console:
Scroll area width: 200
Scroll area height: 850
Obtain identifier of 30 element and select it:
// Obtain identifier of 30 element of the list var id = listBox.getItems()[29].getId(); // Select element with specified identifier listBox.selectItemById(id); // Set attribute of scrolling list to the selected element listBox.setIsScrollToSelected(True);
Scroll list to selected element:
// Scroll list to the selected element listBox.scrollToSelected();
As a result 30 element will be selected in the list:
Obtain content of selected element of the list:
// Obtain content of selected element
console.log("Content of selected element: " + listBox.getActiveItem().getContent());
As a result the content of the selected element is output to the browser console:
Content of selected element: Element 30
Set focus to the first element of the dictionary:
// Set focus on the first element of the dictionary listBox.setSelectedFocus(0);
As a result focus will be set on 1 element:
Scroll list to 40 element:
// Obtain 40 element var itemListBox = listBox.getItems()[39]; // Scroll list to 40 element listBox.scrollToItem(itemListBox);
As a result the list will be scrolled to 40 element:
Click mouse button on the second element of the dictionary. As a result the following will be output to the console:
Mouse button is hold on the element: Element 2
After releasing mouse button to the console the following will be output:
Element of the list is selected
Left button of the mouse is clicked on the element: Element 2
Output content of the last selected element
// Output the content of the last selected element
var content = listBox.getLastItemClick() === undefined ? "Empty" : listBox.getLastItemClick().getContent();
console.log("Content of the last selected element: " + content);
As a result the following will be output to the console:
Content of the last selected element: Element 2
Double click the left button to the third element of the list and change its value to New Value. During changing the value the following will be output to the console:
The element with the following identifier is changed: ListItem167
After finishing change the following will be output to the console:
Element content: "Element 3" is changed to "New Value"
Clear list:
// Clear list listBox.clear();
As a result all elements will be deleted.
See also: