PDA

View Full Version : Tree - Edit item - how?



timTaylor
30 Mar 2012, 1:28 AM
Hi there,

is it right, that in EXTv3 it was possible to edit tree items simple with Ext.tree.TreePanel and in EXTv4 it's not possible?

I've tryed mankz's cell-editing plugin
http://www.sencha.com/forum/showthread.php?136671-OPEN-EXTJSIV-2539-4.0.2-TreeGrid-CellEditing-broken

(http://www.sencha.com/forum/showthread.php?136671-OPEN-EXTJSIV-2539-4.0.2-TreeGrid-CellEditing-broken)but still nothing happens if i click on an item.

implemented like this:



Ext.define("Sch.plugin.TreeCellEditing", {
extend: "Ext.grid.plugin.CellEditing",
// ...
});


var cellEditing = Ext.create('Sch.plugin.TreeCellEditing', {
clicksToEdit: 1
});


_this._treePanel = Ext.create('Ext.tree.Panel', {
id: 'usersTreePanel',
store: this._store,
rootVisible: false,
dockedItems: [moduleToolbar],
plugins: [cellEditing],
// ...

mitchellsimoens
30 Mar 2012, 9:02 AM
If you use a tree grid you can. The issue is it needs to get the editor config on the column. I used the treegrid.html as an example adding the plugin and adding editor config to the task column.

timTaylor
30 Mar 2012, 12:53 PM
thanks, i'll try your hint tomorrow.
i guess treegrid.html is found in the download package?

timTaylor
30 Mar 2012, 11:22 PM
Now I've added the CellEditing plugin to the example 'treegrid' as you suggested.



var tCellEdit = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2 // works, the error only appears by clicking two times
});

var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,

plugins: [tCellEdit], // <- added the cell editor plugin

columns: [
{
xtype: 'treecolumn',
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'task',

editor: { // <- added the cell editor config for this column
xtype: 'textfield',
allowBlank: false,
selectOnFocus: true
},
listeners: {
'beforeedit': function (e) // <- isn't triggered
{
console.log('beforeedit');
}
}
// end of my modifications
}, {
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'Duration',
flex: 1,
sortable: true,
dataIndex: 'duration',
align: 'center',
//add in the custom tpl for the rows
tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
formatHours: function (v)
{
if (v < 1)
{
return Math.round(v * 60) + ' mins';
}
else if (Math.floor(v) !== v)
{
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
}
else
{
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
}, {
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true
}]
});


Now, on double clicking an item I get the following error:
Uncaught TypeError: Object [object Object] has no method 'indexOf'
Ext.define.getEditingContextext-all-debug.js:83094
Ext.define.startEditext-all-debug.js:83204
Ext.define.startEditByClickext-all-debug.js:83060
fireext-all-debug.js:10658
Ext.define.continueFireEventext-all-debug.js:13854
Ext.define.fireEventext-all-debug.js:13834
Ext.define.processItemEventext-all-debug.js:78562
Ext.define.processUIEventext-all-debug.js:69472
Base.callParentext-all-debug.js:2891
Ext.define.processUIEventext-all-debug.js:91301
Ext.define.handleEventext-all-debug.js:69413
(anonymous function)
wrap


please, help me again :">