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

Dynamic qml object creation and deletion



  • Hi guys
    I am trying to create dynamic objects using javascript and i am able to create it. But when I am trying to delete those objects I am getting error

    In my example I am having 3 qml files and one .js file

    Controller.js

    var componentOne;
    var spriteOne;
    var componentTwo;
    var spriteTwo;
    function createSpriteObjects() {
        componentOne = Qt.createComponent("qrc:/Group.qml");
         componentTwo = Qt.createComponent("qrc:/Terminator.qml");
        if (componentOne.status ===  Component.Ready && componentTwo.status === Component.Ready)
            finishCreation();
        else
            componentOne.statusChanged.connect(finishCreation);
            componentTwo.statusChanged.connect(finishCreation);
    }
    
    function finishCreation() {
    
            spriteOne = componentOne.createObject(mainWindow, {"iwidth": 800, "iheight": 100,"icolor":"Gray" });
            spriteTwo = componentTwo.createObject(mainWindow, {"jwidth": 800, "jheight": 100,"jcolor":"Gray" });
    
    }
    
    function destroyer()
    {
    spriteOne.destroy();
    
    }
    

    Main.qml

    import QtQuick 2.6
    import QtQuick.Window 2.2
    import "qrc:/Controller.js" as Control
    Window {
        id:mainWindow
        visible: true
        width: 800
        height: 600
        title: qsTr("Hello World")
    
        Component.onCompleted:
        {
            Control.createSpriteObjects();
        }
    
    }
    

    Group.qml

    import QtQuick 2.0
    
    Rectangle
    {
    id:groupRect
    property int iheight;
    property int iwidth;
    property string icolor;
    
    height:iheight
    width:iwidth
    color:icolor
     anchors.bottom:parent.bottom
    }
    

    Terminator.qml

    import QtQuick 2.0
    import "qrc:/Controller.js" as Terminate
    Rectangle
    {
        id:term
    
        property int jheight;
        property int jwidth;
        property string jcolor;
    
        height:jheight
        width:jwidth
        color:jcolor
        anchors.top:parent.top
    
        MouseArea
        {
         anchors.fill:parent
         onClicked:   Terminate.destroyer();
        }
    }
    

    I have dynamically created group.qml and terminator.qml . My aim is to call a function written in .js (destroyer)on mouse click event of terminator.qml and that function should destroy my group.qml object. But I am getting this error on mouse click

    qrc:/Controller.js:24: TypeError: Cannot call method 'destroy' of undefined

    how can i solve this problem?


  • Qt Champions 2017

    This indicate that spriteone object does not exist



  • @dheerendra yes sir spriteone will only work under finishcreation... so how can i delete qml object from a function in .js or if I want to change property of group.qml from a function in .js ..?



  • @ashajg

    Keep the dynamically created object reference inside main.qml and use it inside JS to assign and delete.

    //main.qml
    Window {
    ...
    property var spriteOne;
    ...
    

    and inside Controller.js

    function finishCreation() {
    
        mainWindow.spriteOne = componentOne.createObject(mainWindow, {"iwidth": 800, "iheight": 100,"icolor":"red" });
        spriteTwo = componentTwo.createObject(mainWindow, {"jwidth": 800, "jheight": 100,"jcolor":"blue" });
    
    }
    
    function destroyer()
    {
        mainWindow.spriteOne.destroy();
    }
    


  • hi sir @Mammamia

    Okk..So I should declare spriteOne in main.qml instead of Controller.js
    and then use it in my .js for creation and deletion operation..

    Surely I ll try this approach and check...

    Thanks



  • @Mammamia Thanks a Lot its working!!!


Log in to reply