динамическое изменение рендеринга узлов в дереве

Question

Когда я вызываю itemClick() в Ext.tree.Panel Я бы хотел отобразить некоторые произвольные узлы.

Позволяет сказать, когда я нажимаю на узле Я хочу, чтобы выделить все его дети желтый:

Simples.

Я знаю, как визуализировать нажав узел. Это просто:

itemclick: function(dv, record, item, index, e) { 

    //HTMLElement 
    item.style.color="RED"; 

Деталь просто HTMLElement, который может получить его стиль изменился.

Мне также удалось выяснить, что я могу также получить доступ к данным из магазина, как так:

itemclick: function(dv, record, item, index, e) { 

    //View --> store 
    dv.store.data.items[4] 

Элементов данных являются только Ext.data.Model объектов я думаю,. Я не могу видеть крюк, где я могу добавить стиль к элементу объектов однако :(

Я также посмотрел на делать запрос «вверх» и вызов findChild (..) на панели дерева:

itemclick: function(dv, record, item, index, e) { 


    //Ext.data.NodeInterface 
    var panel = dv.up('panel'); 
    var rn = panel.getRootNode(); 

    var r = rn.findChild("name", "MYNODE"); 

    r.data.cls = 'my_class'; 

Существует cls 'hook', где я могу установить значения классов. Однако рендеринг не кажется. Также метод findChild возвращает только одно значение, и нет findChildren (что действительно озадачивает. Почему ExtJS ommit что-то вроде этого)

Это событие callb Метод ack действительно меня озадачивает. Мне как-то нужна ссылка между элементом HTMLElement и элементами данных или хранилищем. Все эти подходы, похоже, приводят к тупику для меня.

UPDATE: В третьем примере я могу вызвать panel.getView(). Refresh(); и это обновит пользовательский интерфейс. Так что теперь единственная проблема, у меня есть это найти метод, как GetChildren (..)

Answer 1

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

var nodeRef = this.items.items[0] //this will give you the first root node. 
    var node = nodeRef.node; 
    var childrenNodes = node.childNodes; 

выше (это в приведенном выше коде относится к вашей панели дерева) даст вам непосредственные дочерние узлы. Надеюсь, это поможет вам. Также взгляните на это link с форумов sencha.

Answer 2

Я решил свою проблему, сначала получив свою панель, а затем корневой узел. Затем на моем корневом узле я вызвал функцию eachChild().

Мне нужно было передать рекурсивную функцию. Эта рекурсивная функция искала узлы, которые меня интересуют (с помощью searchTerm), а затем она может установить значение cls. В конце я запускаю panel.getView(). Refresh(),, и все это работает великолепно.

itemclick: function (dv, record, item, index, e) { 



    var panel = dv.up('panel'); 
    var rn = panel.getRootNode(); 

    var traverseTree = function (c) { 

     if (c.data.name == traverseTree.searchTerm) { 
      c.data.cls = 'myClass'; 
     }else { 
      c.data.cls = ''; 
     } 

     if (c.childNodes.length > 0) { 

      for (var i = 0; i < c.childNodes.length; i++) { 

       var node = c.childNodes[i]; 

       traverseTree(node) 
      } 
     } 
    }; 

    traverseTree.searchTerm = "StringToMatch"; 
    rn.eachChild(traverseTree, rn); 
    panel.getView().refresh();