Javascript import does not resolve ApplicationWindow::overlay

jiancaiyang

I have a problem. When I use Javascript import syntax like this:

// Misc.js
.pragma library
.import QtQuick.Controls 2.2 as QQC2

function dimension( type )
{
    var overlay = QQC2.ApplicationWindow.overlay;
    return overlay.width / 5;
}

I cannot get QQC2.ApplicationWindow.overlay resolved, in that gets error:

qrc:/Misc.js:7: TypeError: Cannot read property 'width' of undefined
qrc:/Misc.js:7: TypeError: Cannot read property 'width' of undefined
qrc:/Misc.js:7: TypeError: Cannot read property 'width' of undefined
qrc:/Misc.js:7: TypeError: Cannot read property 'width' of undefined
qrc:/Misc.js:7: TypeError: Cannot read property 'width' of undefined

If I put it into QML file:

width: ApplicationWindow.overlay.width / 5

That's okay. Why does it cause a type error? I am confused. Hope to reply.
Here is the full source code:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import "Misc.js" as Misc

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


    footer: TabBar {
        id: tabBar
        width: parent.width
        Repeater
        {
            model: ["First", "Second", "Third", "Fourth", "Fifth"]

            TabButton
            {
                text: modelData
                width: ApplicationWindow.overlay.width / 5

                //width: Misc.dimension( "col-md-3" )
            }
        }
    }
}

jiancaiyang

I found ApplicationWindow.overlay is an attached property. Attached property cannot be used directly in JS file.