Как установить singleClickExpand на узле дерева в ExtJS 4 - PullRequest
Новая
       5

Как установить singleClickExpand на узле дерева в ExtJS 4

3 голосов
/ 16 февраля 2012

Действие по умолчанию для развертывания узла в дереве ExtJS - двойной щелчок.

До версии 4 в конфигурации TreeNode есть свойство singleClickExpand.

Как применить singleClickExpandповедение в дереве ExtJS версии 4 ??

Есть ли свойство конфигурации для этого поведения без установки прослушивателя событий ??

Спасибо.

Ответы [ 3 ]

9 голосов
/ 17 февраля 2012

Я потратил некоторое время на поиски того же самого. Я чувствую, что могу окончательно ответить на ваш вопрос ... Нет, для него нет опции конфигурации. Я должен был установить обработчик кликов. В любом случае, мне нужен был один для реализации функции листовых кликов: 

var tree = Ext.create('Ext.tree.Panel', {
    store: store,
    rootVisible: false,
    lines: false,
    useArrows: true,
    listeners: {
        itemclick: function(view, node) {
            if(node.isLeaf()) {
                // some functionality to open the leaf(document) in a tabpanel
            } else if(node.isExpanded()) {
                node.collapse();
            } else {
                node.expand();
            }
        }
    }
});
4 голосов
/ 28 августа 2012

На самом деле вы используете функцию расширения древовидной структуры.

Просто реализуйте функцию itemclick на панели дерева: 

listeners: {
    itemclick: function (treeview, record, item, index, e, eOpts) {
        treeview.expand(record);
    }
}
2 голосов
/ 16 февраля 2012

Если вы используете навигацию с помощью клавиатуры, вам, вероятно, нужно использовать событие selectionChange, чтобы охватить все сценарии, но в любом случае, в данном случае я использую подход для достижения единой цели.

определите новое событие в дереве, например, представьте, что вы определили класс, который наследуется от панели дерева, затем в "initComponent" вы создадите событие:

Ext.define ('MY.view.CheckList', { расширить: 'Ext.tree.Panel', псевдоним: 'widget.checklist', 

store: 'CheckPoints',
useArrows: true,

initComponent: function () {

    this.callParent(arguments);     
    this.on("selectionchange", this.onSelectionChange);
    this.addEvents({
        singleClick: true 
    });
},

onSelectionChange: function(model, nodes){

    [....]

    // fire statusUpdated event
    this.fireEvent("singleClick", this, model, nodes);
}

});

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

var mytree = Ext.create("MY.view.CheckList");

mytree.on ("singleClick", функция (дерево, модель, узлы) {

console.log(">>>>>>>>>>>>>>>>>>>>> EVENT TRIGGERED <<<<<<<<<<<<<<<<<<<<<<<<");
console.log( tree, model, nodes);
var currSelPath = nodes[0].getPath();

//This will expand the node at the path you just clicked
tree.expandPath(currSelPath);

});

2 вещи:

  • Вам нужно немного настроить его в соответствии с вашим сценарием кода
  • Конечно, вы могли бы просто прослушивать событие selectionChange напрямую и делать это, но я думаю, из точки зрения повторного использования кода, его чище и понятнее, и если вы добавите немного больше логики и проверок, прежде чем запустить событие " singleClick "и представьте, если у вас есть больше деревьев, которые наследуют от этого базового дерева, вам просто нужно сделать это один раз.

Я уверен, что это не самое совершенное решение, но в моем случае оно работало нормально.

НТН!

...