PDA

View Full Version : Tree Editor not displaying node editing properly



Yemi
23 Sep 2013, 8:36 AM
I have a tree editor that edits the content of a node in a tree (treeid1 and treeid2). but I observed that if I edit a node in treeid1 and thereafter try to edit a node in treeid2, the edit window becomes static while typing but when I click enter the update was successful, this problem also occur vice versa (editing treeid2 before treeid1). see attached image. How can I rectify this problem



var onCompleteEdit = function(treeEditor, newValue, oldValue) {
var treePanel = Ext.getCmp(id);
treePanel.el.mask('Saving...', 'x-mask-loading');
var editNode = treeEditor.editNode;
var editNodeId = editNode.attributes.id;
treePanel.el.unmask();
};

if (id=='treeid1'|| id=='treeid2' ){
var treePanel = Ext.getCmp(id);
var selectedNode = treePanel.getSelectionModel().getSelectedNode();
if (! this.treeEditor) {
this.treeEditor = new Ext.tree.TreeEditor(treePanel, {}, {
cancelOnEsc :true,
completeOnEnter : true,
allowBlur:true,
selectOnFocus : true,
allowBlank : false,
listeners : {
complete : onCompleteEdit
}
});
}
this.treeEditor.editNode = selectedNode;
this.treeEditor.startEdit(selectedNode.ui.textNode)

}


}

Yemi
24 Sep 2013, 2:00 AM
Anyone with hints on how to resolve this ?

Yemi
24 Sep 2013, 5:31 AM
Any clues ?

willigogs
24 Sep 2013, 6:15 AM
Could you create a test case that isn't reliant on your undeclared variables?

Yemi
24 Sep 2013, 6:20 AM
Could you create a test case that isn't reliant on your undeclared variables?

I really don't understand what you are saying. Can you explain further ?
thanks

willigogs
24 Sep 2013, 6:34 AM
I meant could you provide a working example of your code which demonstrates your problem.

Yemi
24 Sep 2013, 7:24 AM
Thats the code, I the only missing piece is the function that passes the ids of the tree panel

willigogs
24 Sep 2013, 8:06 AM
It should be relatively simple to get a working example up and running then ;)

From looking at your code I don't even understand what you're trying to do? Your onCompleteEdit function doesn't even perform anything (it just sets some variables, masks, then immediately unmasks), and then you have a random if statement to create a treeeditor.

Did you write the above, or have you gleaned this from somewhere else and are now trying to get it to work? :\

Yemi
25 Sep 2013, 4:13 AM
Yes from ext js in action. I removed the ajax call, am using this code for two different treepanels using the id of those panel, Am just testing how it works.


var onCompleteEdit = function(treeEditor, newValue, oldValue) {var treePanel = Ext.getCmp('treepanel')
treePanel.el.mask('Saving...', 'x-mask-loading');
var editNode = treeEditor.editNode;
var editNodeId = editNode.attributes.id;
Ext.Ajax.request({
url : 'editNode.php',
params : {
id : editNodeId,
newName : newValue
},
success : function (response, opts) {
treePanel.el.unmask();
var responseJson = Ext.decode(response.responseText);
if (responseJson.success !== true) {
editNode.setText(oldValue);
Ext.Msg.alert('An error occured with the server.');
}
},
failure : function (response, opts) {
treePanel.el.unmask();
editNode.setText(oldValue);
Ext.Msg.alert('An error occured with the server.');
}
});
}
var onEdit = function() {
var treePanel = Ext.getCmp('treepanel');
var selectedNode = treePanel.getSelectionModel().getSelectedNode();
if (! this.treeEditor) {
this.treeEditor = new Ext.tree.TreeEditor(treePanel, {}, {
cancelOnEsc :
true,
completeOnEnter : true,
selectOnFocus : true,
allowBlank : false,
listeners : {
complete : onCompleteEdit
}
});
}
this.treeEditor.editNode = selectedNode;
this.treeEditor.startEdit(selectedNode.ui.textNode);
}

willigogs
25 Sep 2013, 4:59 AM
Yes from ext js in action.
Ah yes - great book :)

I took the example you were referencing and tweaked it so that it now works with multiple trees.

The key part was to get the parent treepanel ID from the selected node, and then pass that into the onEdit function.

http://jsfiddle.net/Whinters/2WvuS/

(Please note that only the onEdit function has been amended - other functions such as delete, etc, will fail).