Ext.js редактируемые узлы

Question

Возможно ли сделать TreeNodes (т.е. папки) редактируемыми пользователем? Я вижу, что в классе TreeNode есть опция с именем editable, но я не могу заставить ее работать или найти примеры ее использования.

Другой мой квест - разместить поле ввода в узлах, чтобы пользователь мог вводить числа для каждого элемента. Как мне это сделать?

Answer 1

Добавление new Ext.tree.TreeEditor(yourTree); будет достаточно, чтобы сделать дерево редактируемым.

Но вы можете определить гораздо больше, используя два других параметра контуров:

var te = new Ext.tree.TreeEditor(tree, new Ext.form.NumberField({
    allowBlank: false,
    blankText: 'A number is required'
}), {
    editDelay: 100,
    revertInvalid: false
});

te.on("complete", function(node) {
    alert(node.startValue + ' -> ' + node.editNode.text);
});

Там я использовал NumberField, чтобы вы могли вводить там только цифры.

И вы можете ограничить издание, используя editable свойство каждого TreeNode (да, тот, который вы упомянули), или с помощью beforestartedit Событие TreeEditor:

te.on('beforestartedit', function(ed, boundEl, value) {
    if (ed.editNode.leaf)
      return false;
});

На http://jsbin.com/ExtJS-TreeEditor/2 вас есть живой пример, который я сделал на основе примера Sencha Checkbox TreePanel, отличие в том, что вы можете редактировать узлы папок на моем примере.

Просто выберите папку и затем снова щелкните по этой папке, редактор (NumberField) должен появиться над именем папки.