Динамическая проблема генерации панели дерева extjs

Question

У меня есть панель дерева, для которой я динамически генерирую корневой узел на основе группы, выбранной в поле со списком. На основе выбранной группы JSON будет возвращен с сервера и после цикла через объект JSON. Я генерирую узлы панели дерева. Если выбрано «ММ», которое является родительской группой для всех других групп. Корневым узлом будет «Мобильное измерение», и все его дочерние узлы будут другими группами.

var groupKey = field.getValue(); 
var groupName = field.getRawValue(); 
var subGroupName = ''; 
var treePanel = Ext.getCmp('permissionsTreePanel'); 
var len = []; 
treePanel.setRootNode(null); 

if(newValue){ 
Ext.Ajax.request({ 
    url:'.../GetAllUserPermissions.php', 
    method:'POST', 
    params:{groups:newValue}, 
    success:function(result, request){ 
     var json = result.responseText; 
     var temp = Ext.decode(json); 
     var obj = {}; 
     var mainGroup = {}; 
     var item = {}; 
     var menu = {}; 
     var children = []; 
     var subGroups =[]; 
     var groups = ''; 
     var module = [{ 
      "text": "Administrator", 
      "leaf": true, 
      "checked": false, 
      "id":"GROUP_ADMIN", 
      "formBind": true, 
     "name":"GROUP_ADMIN"}]; 

     //Ext.Msg.alert('Message',Ext.encode(temp[groupKey])); 

     groupTree = function (group,name) { 

      for(var i=0;i<Object.keys(group).length;i++){ 
       for(var key in group[i]){ 
        for(var n=0;n<Object.keys(group[i][key]).length;n++){ 
         item = { 
          "text": group[i][key][n], 
          "checked": false, 
          "id": key+"_"+group[i][key][n], 
          "name": key+"_"+group[i][key][n], 
          "formBind":true, 
          "leaf": true 
         }; 
         children.push(item); 
        } 
        menu = {"text": key, 
         "leaf": false, 
         "id": key, 
         "children": children       
        }; 

        module.push(menu); 
        children = []; 
       } 
      } 

      obj = {"text":name, 
       "expanded": true, 
       "formBind": true, 
       "children": module 
      }; 

      module = [{ 
       "text": "Administrator", 
       "leaf": true, 
       "checked": false, 
       "id":"GROUP_ADMIN", 
       "formBind": true, 
      "name":"GROUP_ADMIN"}]; 

      return obj; 

     }; 

     if(groupKey != 'MM'){ 

      groupTree(temp[groupKey],groupName); 
      treePanel.setRootNode(obj); 

     } else { 

      treePanel.getRootNode().set("text",groupName);    

      var i = 0; 

      for(var key in temp[groupKey]){ 

       i++; 

       mainGroup = groupTree(temp[groupKey][key],key); 

       obj = {}; 

       treePanel.getRootNode().appendChild(mainGroup); 

       if(i==2){ 
        //break; 
       } 
      } 

      treePanel.getRootNode().expand(); 

      //treePanel.setRootNode(subGroups); 

      Ext.Msg.alert('Message',Ext.encode(subGroupName)); 

     } 
    }, 
    failure:function(result, request){ 
    } 
}); } else { 
Ext.Msg.alert('Message','No value is selected!'); } 

Эти группы были сформированы, но события не работают хорошо. Есть некоторые ошибки при выборе товаров и отправке событий. Щелкнув один узел, другой узел расширяется. Это неизвестное поведение вызывает проблему с панелью дерева.

Ваша помощь будет оценена!

Заранее спасибо. :)

Answer 1

У меня есть ответ. Существует проблема с идентификаторами каждого генерируемого узла. Узлы уровня модуля имеют одинаковые идентификаторы для нескольких узлов модуля. Вот почему я получил ненормальное поведение. Теперь он отлично работает после удаления идентификаторов.

var groupKey = field.getValue(), 
groupName = field.getRawValue(), 
subGroupName = '', 
treePanel = Ext.getCmp('permissionsTreePanel'), 
len = []; 

treePanel.setRootNode(null); 

if (newValue !== null) { 
Ext.Ajax.request({ 
    url: '.../SOUPAPI/user/GetAllUserPermissions.php', 
    method: 'POST', 
    params: { 
     groups: newValue 
    }, 
    success: function (result, request) { 
     var json = result.responseText, 
      temp = Ext.decode(json), 
      obj = {}, 
      mainGroup = {}, 
      item = {}, 
      menu = {}, 
      children = [], 
      subGroups = [], 
      groups = '', 
      module = [{ 
       "text": "Administrator", 
       "leaf": true, 
       "checked": false, 
       "formBind": true, 
       "name": "GROUP_ADMIN" 
      }]; 

     groupTree = function (group, name, gkey) { 

      for (var i = 0; i < Object.keys(group).length; i++) { 
       for (var key in group[i]) { 
        for (var n = 0; n < Object.keys(group[i][key]).length; n++) { 

         item = { 
          "text": (group[i][key][n]).split("_").join(" "), 
          "checked": false, 
          "id": key + "_" + group[i][key][n], 
          "name": key + "_" + group[i][key][n], 
          "formBind": true, 
          "leaf": true 
         }; 
         children.push(item); 
        } 
        menu = { 
         "text": key.substring(2), 
         "leaf": false, 
         "name": key, 
         "children": children 
        }; 

        module[0].id = gkey + "GROUP_ADMIN"; 
        module.push(menu); 
        children = []; 
        menu = {}; 

        test = module; 
       } 
      } 

      obj = { 
       "text": name, 
       "expanded": true, 
       "formBind": true, 
       "children": module 
      }; 

      module = [{ 
       "text": "Administrator", 
       "leaf": true, 
       "checked": false, 
       "formBind": true, 
       "name": "GROUP_ADMIN" 
      }]; 

      return obj; 

     }; 

     if (groupKey != 'MM') { 

      var group = groupTree(temp[groupKey], groupName, groupKey); 
      treePanel.setRootNode(obj); 

     } else { 

      var rootNode = treePanel.getRootNode(); 
      rootNode.set("text", groupName); 
      for (var key in temp[groupKey]) { 

       mainGroup = groupTree(temp[groupKey][key], key, key); 
       obj = {}; 
       rootNode.appendChild(mainGroup); 
      } 

      rootNode.cascadeBy(function() { 
       for (var l in rootNode.childNodes) { 
        rootNode.childNodes[l].collapse(); 
       } 
      }); 
      rootNode.expand(); 
     } 
    }, 
    failure: function (result, request) {} 
}); 
}