Custom editable TableView

Hi,

I am facing several issues with a tableView that I am not able to solve. I hope there is someone here who can show me that what I need is the simplest thing.

What do I want to achieve?
For a GUI I want to have a table. The first column shall hold the title of the row. The second and third column shall have a spin box with custom max and min values. The fourth column shall hold the sum of the second and third column.

What do I have?

Code:

---

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
import QtQuick.XmlListModel 2.0
 
Item {
    id: secondPage
    anchors.fill: parent
 
    property int propValueSum: 96
    property int propValueCost: 480
 
    ListModel {
            id: propertyModel
 
            ListElement {
                name: qsTr("Curage")
                value: 12
                bonus: 0
                current: 12
            }
            ListElement {
                name: qsTr("Cunning")
                value: 12
                bonus: 0
                current: 12
            }
    }
 
    TableView {
            id: propertyTable
            width: parent.width
            height: rowDelegate.height*9 // <- this is not working
 
            model: propertyModel
 
            TableViewColumn {
                role: "name"
                title: qsTr("Property")
            }
            TableViewColumn {
                role: "value"
                title: qsTr("Value")
 
                delegate: SpinBox{
                    id: propValue
                    value: styleData.value
                    minimumValue: 8
                    maximumValue: secondPage.propValueSum > 99 ? propValue.value:14
                    selectByMouse: false // <- this is not working still editable
 
                    property int lastValue: 12
 
                    onValueChanged: {
                        var newValue = propValue.value + propertyModel.get(propertyTable.currentRow).bonus
                        var delta = propValue.value - lastValue
                        secondPage.propValueSum += delta
                        lastValue = propValue.value
                        propertyModel.setProperty(propertyTable.currentRow, "value", propValue.value)
                        propertyModel.setProperty(propertyTable.currentRow, "current", newValue)
                    }
                }
            }
            TableViewColumn {
                role: "bonus"
                title: qsTr("Bonus")
 
                delegate: SpinBox{
                    id: propBonus
                    value: styleData.value
                    selectByMouse: false
 
                    onValueChanged: {
                        var newValue = propBonus.value + propertyModel.get(propertyTable.currentRow).value
                        propertyModel.setProperty(propertyTable.currentRow, "bonus", propBonus.value)
                        propertyModel.setProperty(propertyTable.currentRow, "current", newValue)
                    }
                }
            }
            TableViewColumn {
                role: "current"
                title: qsTr("Actual")
            }
            rowDelegate: Rectangle{ // <- I needed to add this because the spinBox was larger than the row height.
                id: rowDelegate
                height: 25
                color: styleData.alternate? "#d9e5ea" : "white"
            }
        }
}

---

What is missing?

1. If I hover over a spinbox and use the mouse wheel the value of the active and the value of the "hovered" spinBox is changed. How can I prevent changes via mouse wheel?
2. How can I set the table height to its content height?
3. How can I dynamically adjust the row height to its content (in my case the spinBox)
4. How can I adjust the width of the column to its content? I did not find an example explaining resizeColumnsToContents() in detail. Where do I have to put this?
5. If I hardcode the width will I run into problems on different devices?

With this custom tableView I see a lot of warnings. Do I need to do anything about them?

Code:

---

qrc:/pages/SecondPage.qml:113: TypeError: Cannot read property 'bonus' of undefined // <- both int in my opinion and it works
SpinBox_QMLTYPE_91_QML_98 QVariant(Invalid) QRect(0,0 0x0)
SpinBox_QMLTYPE_91_QML_98 QVariant(Invalid) QRect(0,0 0x0)

---

And when I hover over the scrollbar

Code:

---

2016-03-06 21:54:27.342 MyApp[4759:51929] inOptions: {
    "is.flipped" = 1;
    kCUIOrientationKey = kCUIOrientVertical;
    kCUIPartMaskKey = 768;
    kCUIThumbProportionKey = "0.665";
    state = normal;
    value = 0;
    widget = scrollbar;
}

---