PDA

View Full Version : Tree rowEditing or cellEditing



slemmon
22 Jan 2012, 4:12 PM
There's not a rowEditing or cellEditing plugin for treePanel is there?

Was hoping one of the existing framework plugins for grids would work for a treegrid, but they don't seem to out of the box.

jay@moduscreate.com
22 Jan 2012, 7:26 PM
I know that Grgur, co-author of Ext JS 4 in action has written a plugin for this:




Ext.define('TreeCellEditing', {
alias: 'plugin.treecellediting',
extend: 'Ext.grid.plugin.CellEditing', #1

init: function(tree) {
var treecolumn = tree.headerCt.down('treecolumn');
treecolumn.editor = treecolumn.editor || {xtype: 'textfield'}; #2

this.callParent(arguments);
},

getEditingContext: function(record, columnHeader) {
var me = this,
grid = me.grid,
store = grid.store,
rowIdx,
colIdx,
view = grid.getView(),
root = grid.getRootNode(),
value;

if (Ext.isNumber(record)) {
rowIdx = record;
//record = store.getAt(rowIdx);
record = root.getChildAt(rowIdx); #3
} else {
//rowIdx = store.indexOf(record);
rowIdx = root.indexOf(record); #4
}
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
};
}
});


Example context menu handler:



var onEdit = function(button, node) {
var menu = button.up(), #1
node = node || menu.treeNode, #2
view = menu.treeView,
tree = view.ownerCt,
selMdl = view.getSelectionModel(),
colHdr = tree.headerCt.getHeaderAtIndex(0);

if (selMdl.getCurrentPosition) { #3
pos = selMdl.getCurrentPosition();
colHdr = tree.headerCt.getHeaderAtIndex(pos.column);
}
treeEditor.startEdit(node, colHdr); #4
};

slemmon
23 Jan 2012, 5:47 AM
Excellent. Thx. When is Ext 4 in Action out for sale?