Create a context menu with QML

Question

The question is quite simple: How to create a context menu with QML and javascript? I have found this manual about 'Menu' component on qt-project.org but quite unusable: http://qt-project.org/doc/qt-5.1/qtquickcontrols/qml-qtquick-controls1-menu.html#details

The Qt Creator IDE says: "Unknown component" on the word 'Menu' in my QML file. I'm using Qt 5.2.1 stable. And I'm coding with Qt Quick 2.

Answer 1

Need to import Qt Quick Controls along with Qt Quick:

import QtQuick 2.0
import QtQuick.Controls 1.1

For a context menu, you need to call popup() which opens the menu at the cursor position.

Answer 2

I have created one customized context menu for my desktop application. This is working perfect for me. I think this may be helpfull.

ContextMenu.qml

import QtQuick 1.1

Rectangle {
    id: contextMenuItem
    signal menuSelected(int index) // index{1: Select All, 2: Remove Selected}
    property bool isOpen: false
    width: 150
    height: menuHolder.height + 20
    visible: isOpen
    focus: isOpen
    border { width: 1; color: "#BEC1C6" }

    Column {
        id: menuHolder
        spacing: 1
        width: parent.width
        height: children.height * children.length
        anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: 3 }

        ContextButton {
            id: selectedAll
            button_text: "Select All"
            index: 1
            onButtonClicked: menuSelected(index);
        }

        ContextButton {
            id: removeSelected
            button_text: "Remove Selected"
            index: 2
            onButtonClicked: menuSelected(index);
        }
    }
}

ContextItem.qml

import QtQuick 1.1

Item {
    id: contextButtonItem
    property string button_text;
    property bool clicked;
    property int index;
    property string target;
    property bool enable: true;
    signal buttonClicked;
    height: 25
    width: parent.width - 5

    function viewButtonHovered() {
        viewButton.state = "hovered";
        outerArea.z= -10;
    }

    function viewButtonExited() {
        outerArea.z= 1;
        if(clicked == false) {
            viewButton.state = "";
        } else {
            viewButton.state = "clicked"
        }
    }
    Rectangle {
        id: viewButton;
        height: vButton.height + 4
        width: parent.width

        Text {
            id: vButton
            text: qsTr(button_text)
            width: parent.width
            anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: 10 }
            font { pixelSize: 14 }
        }
        MouseArea {
            hoverEnabled: enable
            anchors.fill: parent
            enabled: enable
            onClicked: buttonClicked();
            onEntered: viewButtonHovered();
            onExited: viewButtonExited();
        }
        states: [
            State {
                name: "clicked";
                PropertyChanges { target: vButton; color: "#286E1E"; }
            },
            State {
                name: "hovered";
                PropertyChanges { target: vButton; color: "#BEA1C6"; }
            },
            State {
                name: "normal";
                PropertyChanges { target: vButton; color: "#232323"; }
            }
        ]
    }
}