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 a list of elements listBox = new PP.Ui.ListBox({ // Set parent element ParentNode: document.getElementById("listBox"), // Set whether list is scrolled to the selected element IsScrollToSelected: true, // Set whether elements can be edited EnableEdit: true, // Set whether elements are selected on mouse click SelectOnMouseDown: true, /* Set whether empty set of elements can be selected */ EmptySelection: true, // Set list width Width: 200, Height: 210, // Handle list element click event ItemClick: function(sender, args) { console.log("Left mouse button clicked on element: " + args.Item.getContent()); }, // Handle list element click event ItemMouseDown: function(sender, args) { console.log("Mouse button clicked element: " + args.Item.getContent()); }, // Handle list element click event SelectableSelected: function(sender, args) { console.log("List element is clicked"); }, // Handle list element edit end event ItemEdited: function(sender, args) { console.log("Element contents: \"" + args.PrevValue + "\" is changed for \"" + args.NewValue + "\""); }, // Handle list element edit event ItemEditing: function(sender, args) { console.log("Element with 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: