Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    66
    Vote Rating
    1
    Answers
    1
    stevanicus is an unknown quantity at this point

      0  

    Default Unanswered: Renaming a tree node using Ext.Editor

    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:
    Code:
     
    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

  2. #2
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Vote Rating
    43
    Answers
    44
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      0  

    Default

    You can use cell editing plugin for tree.

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    66
    Vote Rating
    1
    Answers
    1
    stevanicus is an unknown quantity at this point

      0  

    Default

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

    thanks

  4. #4
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Vote Rating
    43
    Answers
    44
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      1  

    Default

    Look this example:
    PHP Code:
    var store Ext.create('Ext.data.TreeStore', {
        
    root: {
            
    expandedtrue,
            
    children: [
                { 
    text"detention"leaftrue },
                { 
    text"homework"expandedtruechildren: [
                    { 
    text"book report"leaftrue },
                    { 
    text"alegrbra"leaftrue}
                ] },
                { 
    text"buy lottery tickets"leaftrue }
            ]
        }
    });

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

    var 
    editPlugin Ext.create('Ext.grid.plugin.CellEditing', {
        
    clicksToEdit1
    });

    Ext.create('Ext.tree.Panel', {
        
    title'Simple Tree',
        
    width200,
        
    height150,
        
    storestore,
        
    rootVisiblefalse,
        
    renderToExt.getBody(),
        
    plugins: [
            
    editPlugin
        
    ],
        
    columns: [{
            
    xtype'treecolumn',
            
    dataIndex'text',
            
    flex1,
            
    editor: {xtype'textfield'}
        }],
        
    viewConfig: {
            
    listeners: {
                
    beforeitemcontextmenu: function(viewrecorditemindexe)
            {
              
    e.stopEvent();
                    
    treeMenu.record record;
              
    treeMenu.showAt(e.getXY());
            }
            }
        }
    }); 

Thread Participants: 1

Tags for this Thread