Results 1 to 4 of 4

Thread: Renaming a tree node using Ext.Editor

  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    66
    Answers
    1
    Vote Rating
    1
      0  

    Default 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
    Answers
    44
    Vote Rating
    44
      0  

    Default

    You can use cell editing plugin for tree.

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    66
    Answers
    1
    Vote Rating
    1
      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
    Answers
    44
    Vote Rating
    44
      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());
            }
            }
        }
    }); 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •