PDA

View Full Version : Renaming a tree node using Ext.Editor



stevanicus
9 Jul 2012, 3:41 AM
I'm having trouble displaying the correct value inside the textfield when editting a tree node.

Case: Right click a node -> select 'rename' from the contextmenu and start the editor

Inside my controller:


renameNode:function(view, record, item, index, e, eOpts){
console.info("a->>>", Ext.fly(view.getSelectionModel().getSelection()));
console.info("b->>>>>", view, record, item, index, e, eOpts);
var that = this;

if(!this.treeEditor){

var cfg = {
shadow: false,
completeOnEnter: true,
cancelOnEsc: true,
updateEl: true,
ignoreNoChange: true
}, height = 20;


this.treeEditor = Ext.create('Ext.Editor', Ext.apply({
autoSize: {
width: 'field'
},
height: height,
offsets: [0, (Ext.isIEQuirks ? 0 : 2)],
listeners: {
complete: {
scope: that,
fn: that.renameNodeCompleted
}
},
field: {
width: 100,
name: 'labelfield',
allowBlank: false,
xtype: 'textfield',
selectOnFocus: true
}
}, cfg));
}
this.treeEditor.startEdit(item);
},

renameNodeCompleted:function(treeEditor, newValue, oldValue){
console.info("renaming complete");
}

The thing is that the textfield displays correctly where the node was but the value of the textfield is not just the title of the selected node but with all the html tags aswell

<td>..title..</td>

Thank you in advance

redraid
9 Jul 2012, 4:08 AM
You can use cell editing plugin (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.CellEditing) for tree.

stevanicus
9 Jul 2012, 4:23 AM
Thanks for your reply... how do I use that for when using a context menu rather than 'clicksToEdit'

thanks

redraid
9 Jul 2012, 6:58 AM
Look this example:

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});

var treeMenu = Ext.create('Ext.menu.Menu', {
items: [{
text: 'Edit',
handler: function () {
if (treeMenu.record) {
editPlugin.startEdit(treeMenu.record, 0);
}
}
}]
});

var editPlugin = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});

Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
plugins: [
editPlugin
],
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
editor: {xtype: 'textfield'}
}],
viewConfig: {
listeners: {
beforeitemcontextmenu: function(view, record, item, index, e)
{
e.stopEvent();
treeMenu.record = record;
treeMenu.showAt(e.getXY());
}
}
}
});