PDA

View Full Version : Edit Node Name in tree like the filed value editing in grid



jignesh.vaja
7 May 2012, 8:43 PM
Hi,
I want to edit particular Node name in tree view for following

http://www.vienen.co.uk/extjs4/examples/tree/treecontext.html

I want to do it the same way as grid editing works... like following

http://www.vienen.co.uk/extjs4/examples/writer/writer.html


Can anyone help me for the same..?

Thanks.

sword-it
7 May 2012, 11:07 PM
Attach the below Listener into Tree Panel


listeners: {
dblClick: function (n) {
YourScope.onEditMethod();
}
}

, onEditMethod: function () {
var treepanel = Ext.getCmp('treepanel')
, selectedNode = treepanel.getSelectionModel().getSelectedNode(); // Returns selected node

if (!YourScope.treeEditor) {
YourScope.treeEditor = new Ext.tree.TreeEditor(treepanel, {}, {
cancelOnEsc: true
, completeOnEnter: true
, selectOnFocus: true
, allowBlank: false
, listeners: {
complete: {
scope: this
, fn: YourScope.onCompleteEdit
}
}
})
}
YourScope.treeEditor.editNode = selectedNode;
YourScope.treeEditor.startEdit(selectedNode.ui.textNode);
}
, 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;
treePanel.el.unmask();
editNode.setText(newValue);

}


Any Suggestions or feedback are welcome!!!!

jignesh.vaja
8 May 2012, 10:07 PM
Hi, Sword

Thanks for the reply.
but i am still confused with your code.
you have mentioned

var treepanel = Ext.getCmp('treepanel')

So here from where treepanel component will be loaded.
&which object will be there inplace of .. YourScope. Exterior object or anything else.?

Thanks in advance.

sword-it
8 May 2012, 10:22 PM
Hi Jignesh
Your two questions are:-
1. Ext.getCmp('treepanel')
2. YourScope

Answer 1 :-
First of all, you have to give an id 'treepanel' to your treepanel. Ext.getCmp returns an existing component by id, from these you will get your treepanel by using Ext.getCmp('--Id of treepanel--'). Also for more details check the link http://docs.sencha.com/ext-js/3-4/#!/api/Ext-method-getCmp (http://docs.sencha.com/ext-js/3-4/#%21/api/Ext-method-getCmp)

Answer 2 :-
Actually, i am not sure what you are using as a parent of your treepanel, maybe it is a window or a container.
Here YourScope is the scope of your treepanel's parent.

For eg., if you are building a treepanel inside a window, then that window's scope should come in the place of 'YourScope' in my code.

I am assuming that you know the concept about scope and changing scope with ExtJs. If you are not aware check this link http://aboutfrontend.com/extjs/javascript-scope-and-extjs-scope/


Any more questions/feedback are welcome.

Have a nice day!!!

jignesh.vaja
9 May 2012, 11:10 PM
Hi,
sword

I have tried to implement your code for node name editing in tree.
I am getting the below error

treepanel is undefined for the this line code.

,selectedNode = treepanel.getSelectionModel().getSelectedNode(); // Returns selected nodeI think it is because treepanel class is not getting included here..? but i am not getting exactly

one more thing. where is treeeditor.js in secha ext structure & how can i use that as per this line

Ext.tree.TreeEditor

can you help me for this..?


Thanks..

sword-it
10 May 2012, 12:00 AM
Hi Jignesh
Use following code for edit tree node



{
xtype: 'treepanel'
, id: 'treepanel'
, autoScroll: true
, split: true
, loader: new Ext.tree.TreeLoader()
, root: new Ext.tree.AsyncTreeNode({
expanded: true
, text: 'Information'
, children: [
{
text: 'BookStore'
, id: 'book'
, expanded: true
, children: [
{
text: 'Science'
, leaf: true
},
{
text: 'Computer'
, leaf: true
}
]
}
]
})
, listeners: {
dblClick: function (n) {
YourScope.onEditItem(); //please replace YourScope according to your scope
}
}
}

, onEditItem: function () {
var treepanel = Ext.getCmp('treepanel')
, selectedNode = treepanel.getSelectionModel().getSelectedNode();
if (!YourScope.treeEditor) {
YourScope.treeEditor = new Ext.tree.TreeEditor(treepanel, {}, {
cancelOnEsc: true
, completeOnEnter: true
, selectOnFocus: true
, allowBlank: false
, listeners: {
complete: {
scope: YourScope
, fn: YourScope.onCompleteEdit
}
}
})
}
YourScope.treeEditor.editNode = selectedNode;
YourScope.treeEditor.startEdit(selectedNode.ui.textNode);
}
, onCompleteEdit: function (treeEditor, newValue, OldValue) {
var treePanel = Ext.getCmp('treepanel')
treePanel.el.mask('Saving...', 'x-mask-loading');
var editNode = treeEditor.editNode
, editNodeId = editNode.attributes.id;
treePanel.el.unmask();
editNode.setText(newValue);
}


Hope It will work for you

jignesh.vaja
11 May 2012, 12:46 AM
Hi Sword,

Thanks for support so far, i have implement the code which you suggested but still i am facing issue, now it give me javascript error as below.

Error: Ext.tree.TreeLoader is not a constructor

I guess i need to add some resource for TreeLoader but not getting any file related to it. I have upload code on my live server so you can review
http://122.170.114.165/sencha_tree/ext-4.0.7-gpl/examples/tree/treedata.htm

Thanks in advance for help.

sword-it
11 May 2012, 1:00 AM
Hi Jignesh,

i guess you are using ExtJs 4.X version....
check this....http://stackoverflow.com/questions/7370769/ext-tree-treeloader-is-not-a-constructor-error

(http://stackoverflow.com/questions/7370769/ext-tree-treeloader-is-not-a-constructor-error)Have a nice day!!!

jignesh.vaja
11 May 2012, 4:20 AM
Hi Sword,

hmmm, so do you have any complete example which have facility of editing a node?