How to dynamically update a child ListModel within a singleton? - qt

Question

I try to understand how shared qml objects can be used globally by other qml and javascript files. I have a QML app that has two comboboxes in one window. One is parent (country) combo box in ApplicationWindow, other one is child (city) combo box in Page1.qml. When selecting a country, the child combo box should have cities of the country at the same time. This is possible when using the comboboxes and the function are in ApplicationWindow, I had asked a question about it here. With the help of the answer of my previous question I tried to connect child combobox outside of ApplicationWindow to parent combobox in ApplicationWindow using qmldir, singleton and javascript.
I tried child combobox's list model to be a singleton object, it doesn't work and it gives error qrc:/script.js:11: Error: Cannot assign QJSValue to QQmlListModel*
main.qml:
import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
import Qt.labs.settings 1.0
import "script.js" as JS
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
property int currentindex: comboBox2.currentIndex
Settings{
property alias country : comboBox2.currentIndex
}
Dialog {
id: dialog
title: "Select Country"
implicitWidth: parent.width
implicitHeight: parent.height/2
Column{
ComboBox {
id: comboBox2
x: 199
y: 176
width: 277
height: 48
currentIndex: 0
model:
ListModel {
ListElement { text: qsTr("USA") }
ListElement { text: qsTr("Russia") }
ListElement { text: qsTr("Iran") }
}
onCurrentIndexChanged:{
currentindex = currentIndex
JS.coord_combo_changed()
}
}
}
}
ColumnLayout{
anchors.horizontalCenter: parent.horizontalCenter
spacing:20
width: parent.width
Button{
anchors.horizontalCenter: parent.horizontalCenter
id:select_country
text:"select country"
onClicked: dialog.open()
}
Page1{
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
Page1.qml:
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
Page{
RowLayout{
anchors.horizontalCenter: parent.horizontalCenter
spacing:5
width: parent.width
Text{
text:"Select City: "
}
ChildCombo{
id:comboBox1
model: Shared.childmodel
}
}
}
qmldir:
singleton Shared 1.0 Shared.qml
Shared.qml:
pragma Singleton
import QtQuick 2.9
import QtQuick.Controls 2.2
QtObject {
property ListModel childmodel: ChildModel{}
}
ChildModel.qml:
import QtQuick 2.0
ListModel {}
script.js:
function coord_combo_changed(){
if(currentindex === 0){
Shared.childmodel = ["New York", "Washington", "Houston"]
return Shared.childmodel
}
else if (currentindex === 1){
Shared.childmodel = ["Moscow","Saint Petersburg","Novosibirsk"]
return Shared.childmodel
}
else if (currentindex === 2){
Shared.childmodel = ["Tehran","Tabriz","Shiraz"]
return Shared.childmodel
}
}
I also tried to make combobox as a shared object, it also didn't work and it didn't give any error either. Is it possible to update the child combo box?
Thank you.

Answer 1

In QML a model can be a list, a ListModel, a QAbstractItemModel, etc., but those objects are not equivalent. And that is your mistake, you are trying to point out that a ListModel is a list, in this case the solution is to first clean the model and then add the elements with the append method:
function coord_combo_changed(){
var values = [];
if(currentindex === 0){
values = ["New York", "Washington", "Houston"]
}
else if (currentindex === 1){
values = ["Moscow","Saint Petersburg","Novosibirsk"]
}
else if (currentindex === 2){
values = ["Tehran","Tabriz","Shiraz"]
}
Shared.childmodel.clear()
for(var i in values){
Shared.childmodel.append({"text": values[i]});
}
}
On the other hand I see that your code throws warning indicating that you should not use the anchors if the items are within a layout, in your case you should change to:
ColumnLayout{
anchors.horizontalCenter: parent.horizontalCenter
spacing:20
width: parent.width
Button{
Layout.alignment: Qt.AlignHCenter // <---
id:select_country
text:"select country"
onClicked: dialog.open()
}
Page1{
Layout.alignment: Qt.AlignHCenter // <---
}
}