How to create a Grid inside of a Tab?

p3c0

Tab inherits Loader so have access to all its properties. So to load something inside tab dynamically you can use source or sourceComponent.
For eg.:

Component {
        id: comp
        Grid {
            columns: 2
            spacing: 2
            Rectangle { color: "red"; width: 50; height: 50 }
            Rectangle { color: "magenta"; width: 10; height: 10 }
        }
    }

//to add inside tab
tab1.sourceComponent = comp // tab1 is id of Tab inside TabView

Alper

@p3c0
thanks for your reply.
your code worked but it just loaded the rectangles.
i use this statement to load somFile.qml into grid:

                var component = Qt.createComponent("someFile.qml");
                var object= component.createObject(myGrid);

When the statement executes, i get an error:
ReferenceError: myGridID is not defined

p3c0

@Alper
Are you sure you code contains myGridID or is it just myGrid ?

Alper

@p3c0
Sorry. i inserted it by typing, not copied. it was a mistake, i edited it.

Yes in code it has same id for grid

Component {
        id: comp       
Grid  {
            id: myGrid
            columns: 3
        }
}

and:

var component = Qt.createComponent("someFile.qml");
var object= component.createObject(myGrid);

p3c0

@Alper In that case you will need to move the component creation code inside Grid or inside Component.

Alper

Not worked. same error.

p3c0

@Alper Ok. Can you post a minimal complete running example that can reproduce the problem ?

Alper

@p3c0

This is minimal code before your first reply:
main.qml

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import QtQml.Models 2.2
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    Button {
        text: "Load Component"
        onClicked: compoLoade.createCompWindow()
        x:500
    }
    Item {
        id: compoLoade
        function createCompWindow(){
            {
                var component = Qt.createComponent("qrc:/SomeComp.qml");
                var radioPanelObject  = component.createObject(myGrid);//, {"x": 0, "y": 0});
            }
        }
    }
    TabView {
        Tab {
            id:tab1
            Flickable {
                id:flk
                anchors.fill: parent
                contentHeight: myGrid.height
                contentWidth: myGrid.width
                Grid  {
                    id: myGrid
                    columns: 3
                }
            }
            ScrollView {
                contentItem :flk
                width: parent.width*.8
                height: parent.height*.8
                x:myGrid.x
                y:myGrid.y
            }
            title: "Red"
            Rectangle { color: "red" }
        }
        Tab {
            title: "Blue"
            Rectangle { color: "blue" }
        }
        Tab {
            title: "Green"
            Rectangle { color: "green" }
        }
    }
}

SomeComp.qml:

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.2
import QtQuick.Extras 1.4

Item {
    z:0
    property var clickPos
    MouseArea {
        anchors.fill: parent
        property int mousePresed: 0
        onPressed: {
            clickPos  = Qt.point(mouse.x,mouse.y)
            mousePresed = 1
        }
        opacity: 0
        onPositionChanged:   {
            if(mousePresed==1){
                var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
                pi.x += delta.x;
                pi.y += delta.y;
            }
        }
        onReleased: mousePresed = 0
    }
    width: 100
    height: 100
    Rectangle {
        id:rc
        width: 80
        height: 80
        color: "cyan"
        border.color: "black"
    }
    Button {
        text: "Close"
        onClicked: parent.destroy()
    }
}

p3c0

@Alper Well in this case Grid cannot be accessed directly. Try:
tab1.item.contentItem

Alper

@p3c0 Thanks for your help.
it worked but i lost scrollbar.

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import QtQml.Models 2.2
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    Button {
        text: "Load Component"
        onClicked: compoLoade.createCompWindow()
        x:500
    }
    Item {
        id: compoLoade
        function createCompWindow(){
            {
                var component = Qt.createComponent("qrc:/SomeComp.qml");
                var radioPanelObject  = component.createObject(tab1.item);
            }
        }
    }
    TabView {
        id:tbV
        Tab {
            active: true
            id:tab1
                Grid  {
                    objectName: "mGrid"
                    id: myGrid
                    columns: 3
                    width: 200
                    height: 200
                }
            title: "Red"
        }
        Tab {
            title: "Blue"
            Rectangle { color: "blue" }
        }
        Tab {
            title: "Green"
            Rectangle { color: "green" }
        }
    }
}

p3c0

@Alper Well earlier you had Flickable which contained Grid. Then you can use Scrollbar inside Flickable. It needs Qt.labs.controls 1.0