Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Reading ComboBox currentText from a Button signal handler



  • Hi,
    I have a ComboBox. The onAccepted handler reads the editText property. I would like to read the editText property from a Button onClicked handler. How can I do that?
    My code:
    WhatCombo.qml:

    import Felgo 3.0
    import QtQuick 2.9
    import QtQuick.Controls 2.5
    import QtQuick.Controls.Styles 1.4
    import QtQuick.LocalStorage 2.12
    import "Code.js" as JS
    import "Setup.js" as ST
    
    ComboBox {
        id: whatCombo
        height: dp(35)
        width: backgrnd.width / 2.4
        signal sendSigWhat(string szam)
    
        property string whatValue: ""
        ToolTip.visible: hovered
        ToolTip.text: qsTr("Press Enter when done.")
        ToolTip.timeout: 3000
    
        editable: true
        textRole: "what"
    
        //Displaying empty entry area.
        currentIndex: -1
    
        model: ListModel {
            id: listModel
        }
    
        delegate: ItemDelegate {
            width: whatCombo.width
            height: whatCombo.height
    
            //Defines the items in the dropdown list.
            Text {
                id: txt
                leftPadding: 20
                text: model.what
                font.pixelSize: 18
                color: ST.listColor()
                anchors.verticalCenter: parent.verticalCenter
            }
            onClicked: whatCombo.currentIndex = index
            highlighted: whatCombo.highlightedIndex === index
        }
    
        contentItem: TextInput {
            id: myInput
            leftPadding: 20
            rightPadding: whatCombo.indicator.width + whatCombo.spacing
            font.pixelSize: 18
    
            text: whatCombo.hovered ? "" : whatCombo.displayText
            color: whatCombo.pressed ? ST.comboPressed1() : ST.comboPressed2()
            verticalAlignment: Text.AlignVCenter
            layer.enabled: true
        }
    
        //Black X in the TextInput box
        IconButton {
            icon: IconType.close
            anchors.verticalCenter: myInput.verticalCenter
            anchors.right: myInput.right
            color: "black"
            onClicked: {
                myInput.clear()
            }
        }
    
        background: Rectangle {
            id: rect
            width: backgrnd.width / 2.4
            implicitHeight: 80
            color: ST.editBackground()
            border.color: whatCombo.pressed ? ST.comboPressed1(
                                                  ) : ST.comboPressed2()
            border.width: whatCombo.visualFocus ? 2 : 1
            radius: 30
        }
    
        onAccepted: {
            console.log("Entered onAccepted. CurrentIndex: " + currentIndex)
    
            if (find(editText) === -1) {
                listModel.append({
                                     "what": editText
                                 })
    
                console.log("editText: " + editText)
    
                var newItem = editText
                console.log("newItem: ", newItem)
    
                console.log("whatValue in WhatCombo: ", whatValue)
    
                JS.dbInsertWhat(newItem)
            }
        }
    
        //Reading list from db
        Component.onCompleted: {
            JS.dbInit()
            JS.dbGetWhatList()
        }
    }
    
    

    AddToDb.qml:

    import QtQuick 2.0
    import Felgo 3.0
    import QtQuick.LocalStorage 2.12
    import QtQuick.Controls 2.5
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Dialogs 1.2
    import QtQuick.Layouts 1.3
    import QtQuick 2.9
    import "Setup.js" as ST
    import "Code.js" as JS
    import "ErrorPopup.js" as EP
    
    //Background rectangle.
    Rectangle {
        id: backgrnd
        anchors.fill: parent
        color: ST.pageColor()
    
        property int newID: 22 // JS.getLastID()
        //    Component.onCompleted: newFriendID.text = JS.getLastID() + 1
        //    property Text whatTxt: WhatCombo.currentText
        //Title
        Text {
            id: title
            text: qsTr("Add a Friend to the Database")
            font.bold: true
            font.pointSize: 20
            color: ST.textColor()
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            //        anchors.topMargin: 30
            anchors.topMargin: parent.height * 0.02
        }
    
        //ID line (ID plus calculated Friend ID)
        Text {
            id: id
            text: qsTr("ID: ")
            anchors.top: title.bottom
            anchors.topMargin: 30
            anchors.left: parent.left
            anchors.leftMargin: 25
            font.bold: true
            font.pointSize: 18
            focus: false
            visible: true
        }
    
        Text {
            id: newFriendID
            text: newID
            anchors.bottom: id.bottom
            anchors.left: id.right
            anchors.leftMargin: 20
            font.bold: true
            font.pointSize: 18
            color: ST.idColor()
            focus: false
            visible: true
        }
    
        //Getting the Friend's name.
        AppTextField {
            id: getName
            width: backgrnd.width / 2.4
    
            height: dp(35)
            placeholderText: "Enter the Friend's name."
            placeholderColor: ST.placeHColor()
            showClearButton: true
            radius: 30
            textColor: ST.txtColor()
            cursorColor: ST.cursorClr()
            font.pixelSize: 15
            anchors.top: id.bottom
            anchors.topMargin: 15
            anchors.left: id.left
            backgroundColor: ST.editBackground()
    
            selectionColor: ST.selectionColor()
            borderColor: ST.borderClr()
            borderWidth: 2
    
            onEditingFinished: {
                if (getName.text.length < 2) {
                    var popup = EP.createMsg(backgrnd, {
                                                 "text": "The Friend's name must be at least 2 characters long."
                                             })
                }
            }
        }
    
        //What combo instruction
        Text {
            id: comboInstruct
            text: qsTr("What is the Friend?")
            font.pixelSize: 18
            color: ST.placeHColor()
            anchors.top: getName.bottom
            anchors.topMargin: 10
            anchors.left: getName.left
        }
    
        //Getting What
        Rectangle {
            id: root
            color: ST.rootColor()
            focus: false
            anchors.top: comboInstruct.bottom
            anchors.topMargin: 10
            anchors.left: comboInstruct.left
            WhatCombo {
            }
        }
    
        //Getting the image.
        AppButton {
            id: button
            anchors.horizontalCenter: imageViewer.horizontalCenter
            anchors.bottom: imageViewer.top
            radius: dp(20)
            text: "Choose Image"
    
            backgroundColor: button.hovered ? ST.btnHovered1() : ST.btnHovered2()
            onClicked: {
                nativeUtils.displayImagePicker("Choose the Friend's Image")
            }
        }
    
        //Imageviewer frame
        Rectangle {
            id: imageViewer
    
            width: parent.width * 0.4
            height: parent.width * 0.4
            anchors.left: getName.right
            anchors.leftMargin: 15
            anchors.top: id.bottom
            border.color: ST.borderClr()
            border.width: dp(2)
    
            //Enlarge mouse area above image thumbnail.
            MouseArea {
                id: enlarge
                anchors.fill: imageViewer
                enabled: false
                onClicked: {
                    PictureViewer.show(app, image.source)
                }
    
                AppImage {
                    id: image
    
                    onStatusChanged: if (image.status == Image.Ready)
                                         enlarge.enabled = true
    
                    anchors.fill: parent
                    width: 250
                    height: 250
                    autoTransform: true
                    fillMode: Image.PreserveAspectFit
                }
            }
    
            Connections {
                target: nativeUtils
    
                onImagePickerFinished: {
                    if (accepted) {
                        var path
                        image.source = path
                        console.log("The path in main.qml: ", path)
                        ImgCoding.code = path //invokes code::setCode()"
                        enlrgIcon.visible = true
                    }
                }
            }
            //Enlarge icon in image.
            Image {
                id: enlrgIcon
                source: "qrc:/icons/zoom.png"
    
                width: dp(40)
                height: dp(20)
                anchors.top: parent.top
                anchors.right: parent.right
                visible: false
            }
        }
    
        //Submit button
        StyledButton {
            id: submit
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            style: ButtonStyle {
                background: Rectangle {
                    implicitHeight: 30
                    implicitWidth: 100
                    border.width: submit.activeFocus ? 2 : 1
                    border.color: ST.borderClr()
    
                    radius: 4
                    gradient: Gradient {
                        GradientStop {
                            position: 0
                            color: submit.pressed ? ST.sbmtClr1() : ST.sbmtClr2()
                        }
                        GradientStop {
                            position: 1
                            color: submit.pressed ? ST.presssed1() : ST.pressed2()
                        }
                    }
    
                    Label {
                        text: "Submit"
                        anchors.centerIn: parent
                        font.pixelSize: 20
                        color: "#000000"
                    }
                    visible: true
                }
            }
    
            onClicked: {
                console.log("submit clicked.")
                //Creating variables for the add function
                var myName = getName.text
                var myImage = ImgCoding.code
                console.log("myID: ", newID) //this is not cool
                console.log("The Friend's name: ", myName)
                console.log("The Friend's image: ", myImage)
    
                //            JS.dbInsert(newID, myName, myWhat, myImage)
            }
        }
    }
    
    

    Thank you for your help.


  • Lifetime Qt Champion

    @gabor53 Like

    whatCombo.currentText
    

    ?



  • Hi @jsulm ,
    Yes, but for some reason it comes back as undefined.


  • Lifetime Qt Champion

    @gabor53 I guess because you're doing it in another QML file where whatCombo does not exist



  • @jsulm
    Is there a way to do it this way or I have to move the ComboBox code into the same file?


  • Moderators

    @gabor53 your WhatCombo instance has no ID, give it one and you should be able to access the current text like usual

    Rectangle {
            id: root
            color: ST.rootColor()
            focus: false
            anchors.top: comboInstruct.bottom
            anchors.topMargin: 10
            anchors.left: comboInstruct.left
            WhatCombo {
                  id:whatCombo
            }
        }
    

    The issue is, inside WhatCombo.qml you gave the root element the ID whatCombo. that id is only valid inside WhatCombo.qml and can not be accessed from outside. So you WhatCombo instance has no id -> Failure to access it by it!



  • Hi @J.Hilk ,
    I tried but it still doesn't work. On the other hand even if I copy whatCombo ComboBox to AddToDb.qml I still can't access currentText.



  • @J.Hilk
    I think I solved it. After deleting the Rectangle (id: root) it works perfectly.


Log in to reply