How to populate Sailfish Silica ComboBox

2019-08-26 One-minute read

Sailfish • qml • Jolla • Silica

The easy way to do it, if you know what the items are in the combobox, is to just add MenuItems to the menu of the combobox.

ComboBox {
id: combo
width: 200
label: "Combobox label"

menu: ContextMenu {
    MenuItem {
        text: "Banana"
        onClicked: console.debug("Banana" + ", " + "Yellow")
    }
    MenuItem {
        text: "Apple"
        onClicked: console.debug("Apple" + ", " + "Green")
    }
    MenuItem {
        text: "Coconut"
        onClicked: console.debug("Coconut" + ", " + "Brown")
    }
}

Or you can use Repeater if you have a ListModel containing the combobox items. You don’t need to know all the possible elements in the combobox when you use ListModel and Repeater and more items can be added dynamically.

ListModel {
    id: cbItems
    ListElement { itemText: "Banana"; color: "Yellow" }
    ListElement { itemText: "Apple"; color: "Green" }
    ListElement { itemText: "Coconut"; color: "Brown" }
}

ComboBox {
    id: combo
    width: 200
    label: "Combobox label"

    menu: ContextMenu {
        Repeater {
            model: cbItems
            MenuItem { text: itemText; onClicked: {
                    console.debug(itemText + ", " + color)
                }
            }
        }
    }
}