Solved 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.
-
-
Hi @jsulm ,
Yes, but for some reason it comes back as undefined. -
@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? -
@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.