Bringing it all together: this sample combines different extensions
and custom events to implement an editable tree grid:
- 'ext-dnd5' to re-order nodes using drag-and-drop.
-
'ext-table' + 'ext-gridnav' to implement a tree grid.
Try UP / DOWN / LEFT / RIGHT, TAB,
Shift+TAB
to navigate between grid cells. Note that embedded input
controls remain functional.
-
'ext-edit': inline editing.
Try F2 to rename a node.
Ctrl+N, Ctrl+Shift+N to add nodes
(Quick-enter: add new nodes until [enter] is hit on an empty
title).
-
Extended keyboard shortcuts:
Ctrl+C, Ctrl+X, Ctrl+V for
copy/paste,
Ctrl+UP, Ctrl+DOWN,
Ctrl+LEFT, Ctrl+RIGHT
to move nodes around and change indentation.
(On macOS, add Shift to the keystrokes.)
-
3rd-party
contextmenu
for additional edit commands