1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    627
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default TreeEditor plugin - until Ext releases native

    TreeEditor plugin - until Ext releases native


    In lieu of the absence of the TreeEditor from Ext 3, here is a rough substitute that extends the cell editing grid plugin.

    I have only tested for my simple use cases so please report back any issues.

    Code:
    /**
     * <p>
     * Provides edit capabilities for a tree node.
     * </p>
     * <pre><code>
       var tree = new Ext.tree.Panel({
          plugins:[{
             pluginId: 'edit-plug'
             ,ptype: 'treeediting'
          }]
          ...
       });
     * </code></pre>
     * @class Ext.ux.tree.TreeEditing
     * @extends Ext.grid.plugin.CellEditing
     * @license Licensed under the terms of the Open Source <a href="http://www.gnu.org/licenses/lgpl.html">LGPL 3.0 license</a>.  Commercial use is permitted to the extent that the code/component(s) do NOT become part of another Open Source or Commercially licensed development library or toolkit without explicit permission.
     *  
     * @version 0.1 (June 22, 2011)
     * @constructor
     * @param {Object} config 
     */
    Ext.define('Ext.ux.tree.TreeEditing', {
        alias: 'plugin.treeediting'
        ,extend: 'Ext.grid.plugin.CellEditing'
        
        
        /**
         * @override
         * @private Collects all information necessary for any subclasses to perform their editing functions.
         * @param record
         * @param columnHeader
         * @returns {Object} The editing context based upon the passed record and column
         */
        ,getEditingContext: function(record, columnHeader) {
            var me = this,
                grid = me.grid,
                store = grid.store,
                rowIdx,
                colIdx,
                view = grid.getView(),
                root = grid.getRootNode(),
                value;
    
            // If they'd passed numeric row, column indices, look them up.
            if (Ext.isNumber(record)) {
                rowIdx = record;
                record = root.getChildAt(rowIdx);
            } else {
                rowIdx = root.indexOf(record);
            }
            if (Ext.isNumber(columnHeader)) {
                colIdx = columnHeader;
                columnHeader = grid.headerCt.getHeaderAtIndex(colIdx);
            } else {
                colIdx = columnHeader.getIndex();
            }
    
            value = record.get(columnHeader.dataIndex);
            return {
                grid: grid,
                record: record,
                field: columnHeader.dataIndex,
                value: value,
                row: view.getNode(rowIdx),
                column: columnHeader,
                rowIdx: rowIdx,
                colIdx: colIdx
            };
        }
    
    });//eo class
    
    //end of file
    FYI, this requires that you define your tree columns explicitly so that you can specify an editor config. See example:
    Code:
    constructor: function(
          Ext.apply(this, {
                columns: [{
                    dataIndex: 'text'
                    ,editor: {
                        allowBlank: false
                        ,xtype: 'textfield'
                    }
                    ,flex: 1
                    ,text: 'Name'
                    ,xtype: 'treecolumn'  //REQUIRED
                }]      
         });
    }

  2. #2
    Sencha User
    Join Date
    Apr 2008
    Location
    France
    Posts
    72
    Vote Rating
    0
    eyetv is on a distinguished road

      0  

    Default


    thanks for the plugin, but I can not use

    this is my code

    Code:
    Ext.define('classes.profiler.arbreProfils', {
    	extend: 'Ext.tree.Panel',
    	alias: 'widget.arbreProfils',
    	
    	title: 'Liste',
    	autoScroll: true,
    	useArrows: true,
    	
    	
    	config:{
    		profilCourant:null
    	},
    	
    	
    	
    	initComponent: function() {
    		var me=this;
    		
    
    		
    		this.store=Ext.create('Ext.data.TreeStore',{
    			fields:['id','text','pid','idProfil','proprietaire','statut','nomProfil','table','champ'],
    	 		proxy:{
    	 			type: 'ajax',
                	url: '../../ressources/php/profiler/recup_profils.php',
                	extraParams:{idUtilisateur:'',affichageDatas:false}   
    	 		},
    	 		listeners:{
    	 			beforeload: function(store, operation){
    	 				this.getProxy().extraParams.idUtilisateur=storeUtilisateur.getAt(0).get('id');
    	 			}
    	 		},
    	 		root: {
    				text: 'Profils',
    				id: '65535'
    			}
    		}),
    		
    		this.columns=[{
                    dataIndex: 'text'
                    ,editor: {
                        allowBlank: false
                        ,xtype: 'textfield'
                    }
                    ,flex: 1
                    ,text: 'Name'
                    ,xtype: 'treecolumn'  //REQUIRED
                }],
    	
    		this.plugins=[{
            	pluginId: 'edit-plug'
             	,ptype: 'treeediting'
          	}]
    		
    		
    		this.callParent(arguments);
    	}	
    	
    });
    Error in Chrome Developer Tools : ext-all-debug.js:18764 Uncaught TypeError: Object #<Object> has no method 'init'

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    627
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    The problem is that lazy creating plugins by ptype must be done in the constructor, or the config when instantiating the object. During the initComponent, you must create the plugin yourself. Ex:
    Code:
    this.plugins = [Ext.create('Ext.ux.tree.TreeEditing')];

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    63
    Vote Rating
    0
    joelchu is on a distinguished road

      0  

    Default


    UPDATE

    PHP Code:

    Ext
    .create('Ext.tree.Panel', {
                                
    title'My Tree Grid Panel',
                                
    width'100%',
                                
    height300,
                                
    collapsibletrue,
                                
    useArrowstrue,
                                
    rootVisiblefalse,
                                
    storemyStore,
                                
    multiSelectfalse,
                                
    singleExpandfalse,
                                
    framefalse,
                                
    stripeRowsfalse,
                                
    columnsmyColumns,
                                
    forceFittrue,
                                
    selType'cellmodel',
                                
    plugins: [
                                    
    Ext.create('Ext.ux.tree.TreeEditing' , {clicksToEdit1})
                                ]
                            }); 
    It works exactly how I want it - it only expands when you click on the arrow or the cell contain the arrow - and editing happens with one click. Nice! Thanks.


    ORIGINAL QUESTION

    HI Thanks for this fantastic plugin!

    I got it to work - but there is one problem. I can only edit the child - but not the parent. because when I click the parent row (its a tree panel grid). It just open and close the children rows.

    Also how to change the click to edit (at the moment, it seems to be double click to edit).

    Is there a way to hijack the click? and limit the toggle function at certain cell? or even just the arrow symbol.

    Any idea will be great. Thanks again.
    Last edited by joelchu; 30 Jun 2011 at 12:19 PM. Reason: found the solution

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    25
    Vote Rating
    0
    akshar_jamgaonkar is on a distinguished road

      0  

    Default


    Hi i have a same problem , i have a tree panel, currently i have a pop up which gets displayed when i click tree panel row, and i can edit the tree. However i want it to be edited inline...


    I tried the code given by you.....when i do i console in ux/tree/TreeEditing.js...its shows but how do i display a Form inline....


    thanks in advance....

  6. #6
    Sencha User
    Join Date
    May 2013
    Posts
    35
    Vote Rating
    0
    jakejamessteele is an unknown quantity at this point

      0  

    Default


    Hey guys I am currently using this for my TreePanel, however I am receiving in my console when submitting the changes. However the changes seem to apply fine over rest. My other concern is that if they click the node any where during the edit process it creates an error and doesn't close the editor. Has anyone solved these issues?

    Cannot call method 'focus' of undefined

    The Fix:
    Add:

    , onEditComplete: function (ed, value, startValue) {
    var me = this,
    activeColumn = me.getActiveColumn(),
    context = me.context,
    record;


    if (activeColumn) {
    record = context.record;


    me.setActiveEditor(null);
    me.setActiveColumn(null);
    me.setActiveRecord(null);


    context.value = value;
    if (!me.validateEdit()) {
    return;
    }


    // Only update the record if the new value is different than the
    // startValue. When the view refreshes its el will gain focus
    if (!record.isEqual(value, startValue)) {
    record.set(activeColumn.dataIndex, value);
    }


    // Restore focus back to the view.
    // Use delay so that if we are completing due to tabbing, we can cancel the focus task
    //context.view.focus(false, true);
    me.fireEvent('edit', me, context);
    me.editing = false;
    }
    }


  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    627
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    @jakejamessteele
    Looks like that is a bug when using the plugin with Ext 4.2.x. I am unfortunately still stuck with 4.1.3 for the foreseeable future.