StackPanel.DeferredResize

Syntax

DeferredResize: Boolean

Description

The DeferredResize property determines whether items are resized after the mouse cursor leaves the area.

Comments

Available values:

true. Item resizing will take place after the mouse cursor leaves the area.
false. Item resizing will take place after mouse cursor movements (default).

Use JSON or the setDeferredResize method to set the property value and the getDeferredResize method to get the property value.

Example

To execute the example, the HTML page must contain links to the PP.js script files and the PP.css styles file in the <body> tag of the <div> item with the stackPanel identifier and the example itself must be placed in the <script> tag. In the onload event of the <body> tag it is necessary to specify the call of the createStackPanel() function. Add a container with items on the page and implement a handler of the ItemSizeChanging event:

var stackPanel;
function createStackPanel() {
    // Create a container
    stackPanel = new PP.Ui.StackPanel({
        // Do not take into account size of scrollbars
        AutoScrollSize: false,
        // Set a parent item
        ParentNode: "stackPanel",
        // Set sizes
        Width: 250,
        Height: 300,
        // Set resize option for container items
        IsContentResizable: true,
        // Set resize option for item after the mouse cursor leaves the area
        DeferredResize: true,
        // Enable scrollbars view when necessary
        ScrollVisible: true,
        ItemSizeChanging: function (sender, args) {
            console.log("Container item size changes")
        }
    });
    // Add several buttons
    for (var i = 0; i < 3; i++) {
        stackPanel.add(new PP.Ui.Button({ Content: "Button "+ i }));
}

Get button contents in the coordinates (20, 20):

// Get button contents which is located in the coordinates (20, 20)
!!(stackPanel.getItemByPoint(20, 20)) ? console.log("Contents: " + stackPanel.getItemByPoint(20, 20).getContent().getContent()) : console.log("Item is not avalable");

As a result the button contents or a message about item unavailability is displayed in the console:

Contents: Button 1

Resizing of the button with the 0 index will not be immediate, but only after the mouse cursor leaves the area. The item will have new size of the frame:

On item resizing, the browser console displays a message about item resizing.