ApplicationWindow {
    id: root
    width: 640
    height: 480
    visible: true

    header: Row {
        Button {
            text: "Clear"
            onClicked: model.resetData(0) // Calls (begin|end)ResetModel()
        }
        Button {
            text: "Reset Data"
            onClicked: model.resetData(100) // Calls (begin|end)ResetModel()
        }
        Button {
            text: "Prepend Data"
            onClicked: model.prependData(100) // Calls (begin|end)InsertRows()
        }
    }

    MyModel {
        id: model
    }

    ListView {
        id: view
        width: 400
        height: 400
        model: model

        onCountChanged: positionViewAtEnd()

        delegate: Rectangle {
            id: delegate
            required property int index
            required property string display

            width: view.width
            height: view.height / 10
            color: (index % 2) ? "beige" : "brown"

            Text {
                anchors.centerIn: parent
                font.pixelSize: 15
                color: (delegate.index % 2) ? "black" : "white"
                text: delegate.display
            }
            Component.onCompleted: console.log("New:", display)
            Component.onDestruction: console.log("Destroyed:", display)
        }
    }
}