Renaming a tree node using Ext.Editor

[stevanicus]

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]

You can use cell editing plugin for tree.

[stevanicus]

Thanks for your reply... how do I use that for when using a context menu rather than 'clicksToEdit'

thanks

[redraid]

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());
        }
        }
    }
});