Working with General Visual Components > Components > MainPanel > Example of Creating the MainPanel Component

Example of Creating the MainPanel Component

To execute the example, the HTML page must contain links to PP.js, PP.Ext.js script files and to PP.css and PP.Ext.css styles files. In the onload event of the <body> tag it is necessary to add the call of the createMainPanel() function. Create a drop-down panel with menu and display it:

function createMainPanel() {
    // create panel with menu
    mainPanel = new PP.Ui.MainPanel({
        // set attribute of items search line display
        SearchVisible: true,
        // Add items
        Items: [
            {
                HotKey: "Item 1"
            },
            {
                HotKey: "item 2"
            },
            {
                HotKey: "Item 3"
            }
        ]
    });


    // Display panel with menu
    mainPanel.show(10, 10);
}

As a result, a drop-down panel with menu is displayed: