Dynamically override contentItem of a ComboBox

[SeDi]

Hi,
is it possible to dynamically override the contentItem of a ComboBox (QtQuick 2.6 / QtQuick.Controls 2.2) ?

I'd like to have formatting stuff like elide... and bold when it's not editable, but I need it to be editable sometimes.

Of course, it's not as easy as the (more pseudo-) code below. But is there a chance?

    ComboBox {
        [...]
        contentItem: !editable ? Text {
            text: cbx.displayText
            font: cbx.font
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        } : TextInput {
            [...]
        }
    }

[raven-worx]

@SeDi
use a Loader element as the contentItem and switch it's source like you have shown in your example code

[SeDi]

@raven-worx BAM. Thank you. :-)

[SeDi]

Works perfectly. Thanks again. Here's - more or less (I've shortened it, there's more to the component) - what works for me:

Rectangle {
    id: base
    property alias currentIndex: cbx.currentIndex
    property string currentText: displayText
    property alias model: cbx.model
    property alias textRole: cbx.textRole
    property alias displayText: cbx.displayText
    property alias highlightedIndex: cbx.highlightedIndex
    property alias indicator: cbx.indicator
    property alias count: cbx.count
    property alias delegate: cbx.delegate
    property alias popup: cbx.popup
    property alias pressed: cbx.pressed
    property alias description: txt.text
    property real spacing: Geo.dp(5)
    property bool labelRight: true
    property color textColor: "black"
    property alias backColor: backRec.color
    property alias editable: cbx.editable
    signal highlighted();
    signal activated();

    implicitWidth: childrenRect.width

    function find(text, flags) { return cbx.find(text,flags) }
    function selectAll() { cbx.selectAll() }
    function decrementCurrentIndex() { cbx.decrementCurrentIndex() }
    function incrementCurrentIndex() { cbx.incrementCurrentIndex() }
    function textAt() { return cbx.textAt(index) }

    ComboBox {
        id: cbx
        onActivated: base.activated()
        onHighlighted: base.highlighted()
        contentItem: Loader {
            sourceComponent: editable ? textInputEditable : textNotEditable
        }
        onCurrentTextChanged: base.currentText = currentText
    }
    Component {
        id: textNotEditable
        Text {
            leftPadding: 0
            rightPadding: cbx.indicator.width + cbx.spacing
            text: cbx.displayText
            font: cbx.font
            color: cbx.pressed ? Qt.darker(base.textColor) : base.textColor
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }
    }
    Component {
        id: textInputEditable
        TextInput {
            id: textInput
            leftPadding: 0
            rightPadding: cbx.indicator.width + cbx.spacing
            text: cbx.displayText
            onTextChanged: base.currentText = text
            font: cbx.font
            color: cbx.pressed ? Qt.darker(base.textColor) : base.textColor
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
        }
    }
}