How to access Roles of a QAbstractListModel used in a QML ComboBox via Javascript

Question

I have a model based on QAbstractListModel.

It implements several different roles to provide various pieces of data.

I've set the model as well as the textRole inside a ComboBox. This perfectly works.

When the user selects an item (row) from this ComboBox, I need to run some Javascript that reads that Item's values for several different roles and uses them to do useful work.

However, I cannot find any way to do that. Example ComboBox QML:

import QtQuick 2.4
import QtQuick.Controls 1.3

ComboBox {
    id: dropDownList
    model: myModel
    textRole: "display"
    onActivated: {
        console.log("dropDownList Activated");
        console.log("Read Model Value: " + model.display);
    }
}

The console log I get is:

qml: dropDownList Select Activated
qml: Read Model Value: undefined

The display role values are shown correctly by the ComboBox itself.

I have also tried model[index].display, this gives

TypeError: Cannot read property 'display' of undefined

model.get(index) is not supported by QAbstractListModel, and doesn't have the role so it isn't suitable.

I believe this must be possible, as the ComboBox can display text from arbitrary roles.

Answer 1

You can use the undocumented property of the QuickControls 2 ComboBox delegateModel.

import QtQuick 2.4
import QtQuick.Controls 1.3

ComboBox {
    id: dropDownList
    model: myModel
    textRole: "display"
    onActivated: {
        console.log("dropDownList Activated");
        var currentItem = delegateModel.items.get(currentIndex)
        console.log("Read Model Value: " + currentItem.model.display);
    }
}

The items returned are javascript objects, not QtObjects so you cannot use the object returned by delegateModel.items.get() in bindings as it has no Qml properties.

Although this property is not documented it is mentioned in the Customizing ComboBox example when setting the model used for the customized popup.

contentItem: ListView {
    clip: true
    implicitHeight: contentHeight
    model: control.popup.visible ? control.delegateModel : null
    currentIndex: control.highlightedIndex

    ScrollIndicator.vertical: ScrollIndicator { }
}