Access Flickable from parent element

Question

I'm trying to call a function which is defined inside a Flickable element, but it seems impossible to access it by id. The following code produces ReferenceError: flickable is not defined when tab.getValues() is called:

import QtQuick 2.4

Tab {
    id: tab
    function getValues() {
        flickable.getValues()
    }
    Flickable {
        id: flickable
        clip: true
        flickableDirection: Flickable.VerticalFlick
        contentHeight: column.height
        topMargin: 2 * pxPermm
        function getValues() {
            console.log("flickable.getValues() called")
        }
        Column {
            id: column
            // some content
        }
    }
}

How else am I supposed to access the Flickable element? The function getValues() must be placed inside the Flickable because it needs to access elements placed inside the column.

score 2 · Accepted Answer · answered Apr 29 '15 at 23:13

That's a problem with Tab object. It's a Loader whose default property is sourceComponent. When you put a Flickable element inside it, it is converted* to Component and assigned. When your Tab object is viewed, it creates your Flickable object, which can be accessed via item property:

function getValues() {
  if(tab.active)
    tab.item.getValues();
  else
    console.log("Tab is not viewed so item does not exists.");
}

That Flickable object have inherited, but different context than your Tab object. That means you can access tab from flickable, but not flickable from tab.

Access Flickable from parent element

1 Answers1