Resizing: function (sender, args);
sender. Event source.
args. Event information. Arguments: startPosition - panel width before size changing.
The Resizing event occurs on resizing the Details panel.
To execute the example, the <head> tag of HTML page must contain links to PP.js script file and to PP.css styles file, in the <body> tag of HTML page of the <div> item with the panel identifier and the example must be placed in the <script> tag. In the onload event of the <body> tag it is necessary to specify the call of the createSlidePanel() function. Create the SlidePanel component and add a handler of the Resizing and Resized events:
function createSlidePanel() {
// Create a panel
panel = new PP.Ui.SlidePanel({
// Set parent element
ParentNode: document.getElementById("panel"),
// Panel title
HeaderContent: "Title",
// Detail panel title
DetailsTitleContent: "Details panel title",
// Details panel contents
DetailsContent: "Details panel",
// View panel contents
ViewContent: "View panel",
// Align control to the left
Alignment: PP.Alignment.Left,
// Set title height of details panel
DetailsTitleHeight: 25,
// Set whether details panel is resized
EnableResize: true,
// Set minimum width of left panel
MinLeftPanelWidth: 50,
// Set handlers for details panel resize events
Resizing: function (sender, args) {
console.log("Details panel is being resized");
},
Resized: function (sender, args) {
console.log("Details panel is resized");
},
});
}
As a result the SlidePanel component is added on the page directed by the left side:
Get the value of distance between contents of the Details panel and header of the Details panel:
// Get distance value between contents of the Details panel and titles of the Details panel var width = panel.getConsoleCollapsedWidth(); console.log("Distance between contents of the Details panel and title of the Details panel: " + width);
As a result, the console displays the value of required distance:
Distance between contents of the Details panel and header of the Details panel: 31
Change details panel size. As a result information about details panel size changing is displayed in the console:
Details panel size is changing
Details panel size changed.
See also: