Hi All,
I have an application which uses QML Treeview. The items of the treeview needs to be editable, hence I have configured a delegate which toggles between text and textedit when user sets a flag.
Here's the code
ApplicationWindow {
id:window
visible: true
width: 640
height: 480
title: qsTr("File System")
property var clickedIndex: -1
ListModel{
id:listModel
ListElement{
colorName:"red"
}
ListElement{
colorName:"yellow"
}
ListElement{
colorName:"pink"
}
}
ListView{
id:listview
height: parent.height
width: 50
model: listModel
anchors.left: parent.left
delegate: Component{
Rectangle{
color: colorName
height: 50
width: 50
MouseArea{
anchors.fill: parent
onClicked: {
console.log("Clicked " + colorName)
forceActiveFocus()
}
}
}
}
}
TreeView {
id: view
objectName: "view"
anchors.margins: 2 * 12
anchors.left:listview.right
anchors.top:listview.top
anchors.right:parent.right
anchors.bottom:parent.bottom
model: treemodel
selectionMode:SelectionMode.ExtendedSelection
headerVisible: true
TableViewColumn {
title: "Name"
role: "Title"
width: 300
delegate: Component{
Item {
Text {
id: test
text: model.Title
color: model.IsSelected ? "green" : "blue"
width: parent.width
visible: !model.EditEnabled
}
TextEdit{
id: textField
width: parent.width
visible: model.EditEnabled
onVisibleChanged: {
if(visible)
{
textField.text = model.Title
forceActiveFocus()
}
onActiveFocusChanged: {
if(!activeFocus)
{
model.EditEnabled = activeFocus
}
}
onTextChanged: {
model.Title = textField.text
}
}
}
}
}
}
TableViewColumn {
title: rect
role:"IsSelected"
width: 25
delegate: Component{
Rectangle{
id: rect
anchors.right: test.right
color: model.IsSelected ? "red" : "teal"
MouseArea{
anchors.fill: parent
onClicked: {
model.EditEnabled = true;
}
}
}
}
}
}
}
ApplicationWindow {
id:window
visible: true
width: 640
height: 480
title: qsTr("File System")
property var clickedIndex: -1
ListModel{
id:listModel
ListElement{
colorName:"red"
}
ListElement{
colorName:"yellow"
}
ListElement{
colorName:"pink"
}
}
ListView{
id:listview
height: parent.height
width: 50
model: listModel
anchors.left: parent.left
delegate: Component{
Rectangle{
color: colorName
height: 50
width: 50
MouseArea{
anchors.fill: parent
onClicked: {
console.log("Clicked " + colorName)
forceActiveFocus()
}
}
}
}
}
TreeView {
id: view
objectName: "view"
anchors.margins: 2 * 12
anchors.left:listview.right
anchors.top:listview.top
anchors.right:parent.right
anchors.bottom:parent.bottom
model: treemodel
selectionMode:SelectionMode.ExtendedSelection
headerVisible: true
TableViewColumn {
title: "Name"
role: "Title"
width: 300
delegate: Component{
Item {
Text {
id: test
text: model.Title
color: model.IsSelected ? "green" : "blue"
width: parent.width
visible: !model.EditEnabled
}
TextEdit{
id: textField
width: parent.width
visible: model.EditEnabled
onVisibleChanged: {
if(visible)
{
textField.text = model.Title
forceActiveFocus()
}
onActiveFocusChanged: {
if(!activeFocus)
{
model.EditEnabled = activeFocus
}
}
onTextChanged: {
model.Title = textField.text
}
}
}
}
}
}
TableViewColumn {
title: rect
role:"IsSelected"
width: 25
delegate: Component{
Rectangle{
id: rect
anchors.right: test.right
color: model.IsSelected ? "red" : "teal"
MouseArea{
anchors.fill: parent
onClicked: {
model.EditEnabled = true;
}
}
}
}
}
}
}
To copy to clipboard, switch view to plain text mode
However, I want the textEdit to loose focus when i click any other item displayed in the screen.
Please provide me some pointers
Bookmarks