QML doesn't set the list model when adding tab dynamically the second time

[volcano]

I have a tab view and trying to add the same tab dynamically using a button.
However the second time, QML complains with "qrc:///main.qml:43: TypeError: Type error"

main.qml

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
signal tabAdded(variant c)

ListModel {
id: toolbarModel

ListElement {
partColor: "red"
}
ListElement {
partColor: "blue"
}
}

ColumnLayout{
anchors.fill: parent

TabView{
visible: true
id:tabview
Layout.fillHeight: true
Layout.fillWidth: true

}
Button{
text: "add tab"
onClicked:{

console.log("Component.onCompleted " + toolbarModel.get(0).name)

var t = tabview.addTab("tab", Qt.createComponent("TabItem.qml"));
console.log("Component.onCompleted b " + t)
if(t != null)
{
t.item.partsModel = toolbarModel
var last = tabview.count-1;
tabview.getTab(last).active = true;
console.log(tabview.getTab(last).item);
}
}
}
Button{
text: "remove tab"
onClicked:{

var last = tabview.count-1;
tabview.getTab(last).active = false;
console.log(tabview.getTab(last).item);
tabview.removeTab(last)
}
}
}

}

TabItem

import QtQuick 2.0

import QtQuick.Controls 1.1

Item{
signal tabButtonClicked()

property alias partsModel:parts.partList

anchors.fill: parent
Rectangle{
id:colorRect
height: 100
width: 100
z:23
anchors.top : parent.top
color: "red"
}

PartList{
id : parts
anchors.left:colorRect.right
z:25
}
}

Partlist

import QtQuick 2.0

Item {

property var partList

ListView{
model:partList
height: 200
width: 100
delegate: delegateComp
}

Component{
id: delegateComp
Rectangle{
id: rect
height: 25
width: 25
color: partColor

MouseArea{
anchors.fill: parent
onClicked: {
console.log("Color " + partColor)
}
}
}
}
}

Kindly advice what step I'm missing

[anda_skoa]

First thing I would try is to only call createComponent once.

Either make a property somewhere, e.g. in the button


Component tabComponent: Qt.createComponent("TabItem.qml");

and use that with insertTab() or use a Component element


Component {
id: tabComponent
TabItem {}
}

and use that.

Another thing to check is of t.item is valid before you are trying to access it.

Cheers,
_

[volcano]

The component gets created as the reference is printed properly.

I learned that the tab need to be active before setting the model to the new tab.



if(t != null)
{
var last = tabview.count-1;
tabview.getTab(last).active = true;
t.item.partsModel = toolbarModel
console.log(tabview.getTab(last).item);
}


Thanks for the pointers.

[anda_skoa]

Tab is a Loader (http://doc.qt.io/qt-5/qml-qtquick-loader.html)
"active" is the Loader's property that tells the Loader whether it should have the item loaded or not.
So it seems it started in unloaded state.

You could also just write


t.active = true:

i.e. no need to get through getTab()

Cheers,
_