View Full Version : TreeEditor plugin - until Ext releases native

22 Jun 2011, 4:09 PM
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.

* <p>
* Provides edit capabilities for a tree node.
* </p>
* <pre><code>
var tree = new Ext.tree.Panel({
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,
view = grid.getView(),
root = grid.getRootNode(),

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

constructor: function(
Ext.apply(this, {
columns: [{
dataIndex: 'text'
,editor: {
allowBlank: false
,xtype: 'textfield'
,flex: 1
,text: 'Name'
,xtype: 'treecolumn' //REQUIRED

28 Jun 2011, 12:39 PM
thanks for the plugin, but I can not use

this is my code

Ext.define('classes.profiler.arbreProfils', {
extend: 'Ext.tree.Panel',
alias: 'widget.arbreProfils',

title: 'Liste',
autoScroll: true,
useArrows: true,


initComponent: function() {
var me=this;

type: 'ajax',
url: '../../ressources/php/profiler/recup_profils.php',
beforeload: function(store, operation){
root: {
text: 'Profils',
id: '65535'

dataIndex: 'text'
,editor: {
allowBlank: false
,xtype: 'textfield'
,flex: 1
,text: 'Name'
,xtype: 'treecolumn' //REQUIRED

pluginId: 'edit-plug'
,ptype: 'treeediting'



Error in Chrome Developer Tools : ext-all-debug.js:18764 Uncaught TypeError: Object #<Object> has no method 'init'

28 Jun 2011, 4:55 PM
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:

this.plugins = [Ext.create('Ext.ux.tree.TreeEditing')];

30 Jun 2011, 8:33 AM

Ext.create('Ext.tree.Panel', {
title: 'My Tree Grid Panel',
width: '100%',
height: 300,
collapsible: true,
useArrows: true,
rootVisible: false,
store: myStore,
multiSelect: false,
singleExpand: false,
frame: false,
stripeRows: false,
columns: myColumns,
forceFit: true,
selType: 'cellmodel',
plugins: [
Ext.create('Ext.ux.tree.TreeEditing' , {clicksToEdit: 1})

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.


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.

17 Sep 2012, 4:40 AM
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....

14 Aug 2013, 9:45 AM
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:

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

if (activeColumn) {
record = context.record;


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

// 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;

14 Aug 2013, 11:59 AM
(http://www.sencha.com/forum/member.php?589048-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.