PDA

View Full Version : Trying to replicate inline tree leaf editing after node is added



dirtdevil
8 Aug 2012, 12:18 PM
I'm working on a project that has a tree.panel that can add a new leaf and trigger an edit on the leafs label. I'm trying to replicate what was done in the task manager demo but I can't seem to get it to run right. Here is a link to the demo I'm talking about...

http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/simple-tasks/index.html

And here is the specific block that does the dynamic add.


addList: function(leaf) {
var listTree = this.getListTree(),
cellEditingPlugin = listTree.cellEditingPlugin,
selectionModel = listTree.getSelectionModel(),
selectedList = selectionModel.getSelection()[0],
parentList = selectedList.isLeaf() ? selectedList.parentNode : selectedList,
newList = Ext.create('SimpleTasks.model.List', {
name: 'New ' + (leaf ? 'List' : 'Folder'),
leaf: leaf,
loaded: true // set loaded to true, so the tree won't try to dynamically load children for this node when expanded
}),
expandAndEdit = function() {
if(parentList.isExpanded()) {
selectionModel.select(newList);
cellEditingPlugin.startEdit(newList, 0);
} else {
listTree.on('afteritemexpand', function startEdit(list) {
if(list === parentList) {
selectionModel.select(newList);
cellEditingPlugin.startEdit(newList, 0);
// remove the afterexpand event listener
listTree.un('afteritemexpand', startEdit);
}
});
parentList.expand();
}
};

parentList.appendChild(newList);
if(listTree.getView().isVisible(true)) {
expandAndEdit();
} else {
listTree.on('expand', function onExpand() {
expandAndEdit();
listTree.un('expand', onExpand);
});
listTree.expand();
}
}

Here is my code...



addItem: function(){
var tree = this;
var cellEditingPlugin = tree.plugins[0];
//no node selected so stick new node at root
if(tree.getSelectionModel().selected.items.length==0){
console.log('add new to root');
var parentNode = tree.getRootNode();
//add new node as child of selected node
} else {
console.log('add new to selected');
var parentNode = tree.getSelectionModel().selected.items[0];
}

var newNode = parentNode.appendChild({
text: 'new node2',
iconCls: 'icon-task',
id: 3333302443,
leaf: false,
loaded: true
});

newNode.parentNode.expand(false,function(){
tree.getSelectionModel().select(newNode);
cellEditingPlugin.startEdit(newNode, 0);
});

console.log(newNode);
console.log(tree);
},

This code is rigged up to a button the user clicks when they want to add a new item to the tree. All the items in the tree are folders so there is never a time when someone tries to add a leaf to another leaf. When you click on the button, a new folder appears and the folder label turns to a textfield for editing. The bug is when you want to add an item to a folder that hasn't been expanded, it expands the folder but the textfield appears above the parent folder instead of on the new child folder. If the folder has already been expanded before you add the new folder, it works fine. The edit textfield appears over the new folder and all is well.

I've read the docs and tried to manipulate the same logic as best I could but I still don't understand what I'm missing. From what I've gathered so far, you have to expand the parent and in the expand event, you fire a cell edit or else the edit field will appear where the parent node is and not where the new node is.

oldroy
8 Aug 2012, 2:24 PM
newNode.parentNode.expand(false,function(){

Do you need to prepend parentNode with new node? You already have var parentNode set.

Just drop newNode from the front of that and see what happens.

I not sure that newNode.parentNode returns anything but just an object and not another
nodeInterface instance.

Either way, you already have a good reference to the parentNode.

dirtdevil
8 Aug 2012, 10:05 PM
My problem is telling the cell editor when to fire. It screws up if the parent node wasn't expanded before I try to add a new node. If I can tell the cell editor to start after the parent node has fully expanded, it should work fine. My problem is even if I fire the cell editor in the "expand" handler, it still screws up. It's almost as if the expand handler doesn't run after the parent node has fully expanded.

oldroy
9 Aug 2012, 1:00 PM
newNode.parentNode.expand(false,function(){
tree.getSelectionModel().select(newNode);
cellEditingPlugin.startEdit(newNode, 0);
});


Can you separate these lines? I guess I don't understand why the select newNode and startEdit
need to be put in as a callback....

Also - why not use the addList function as is just without the leaf param?




addList: function() {
var listTree = this.getListTree(),
cellEditingPlugin = listTree.cellEditingPlugin,
selectionModel = listTree.getSelectionModel(),
parentList = selectionModel.getSelection()[0],

newList = Ext.create('SimpleTasks.model.List', {
name: 'New Folder',
loaded: true // set loaded to true, so the tree won't try to dynamically load children for this node when expanded
}),
expandAndEdit = function() {
if(parentList.isExpanded()) {
selectionModel.select(newList);
cellEditingPlugin.startEdit(newList, 0);
} else {
listTree.on('afteritemexpand', function startEdit(list) {
if(list === parentList) {
selectionModel.select(newList);
cellEditingPlugin.startEdit(newList, 0);
// remove the afterexpand event listener
listTree.un('afteritemexpand', startEdit);
}
});
parentList.expand();
}
};
parentList.appendChild(newList){
if(listTree.getView().isVisible(true)) {
expandAndEdit();
} else {
listTree.on('expand', function onExpand() {
expandAndEdit();
listTree.un('expand', onExpand);
});
listTree.expand();
}
}

dirtdevil
9 Aug 2012, 7:31 PM
Can you separate these lines? I guess I don't understand why the select newNode and startEdit
need to be put in as a callback....
Because (I think) the bug is JS firing the field editor before the parent has fully expanded. If I fire the field editor in an expand callback, it will fire after the expand (I hope).


Also - why not use the addList function as is just without the leaf param?
Because I don't want to blindly dump someone elses code into my app and tweak it here and there. I did that when I was first learning extjs3 and it just caused problems in the long run when I had to debug or add new features. I want to understand how it works and form my own code to the app. After reading the example code, from what I understand, I got the core logic of it down (I hope) I just need it to work on unexpanded parent nodes.