javascript - 动态 extjs 树面板生成问题

Question

我有一个树面板，我根据在组合框中选择的组动态生成根节点。根据选择的组，一个 JSON 将从服务器返回，并在遍历 JSON 对象后返回。我正在生成树面板的节点。如果选择了“MM”，它是所有其他组的父组。根节点将是“Mobile Measurement”，其所有子节点将是其他组。

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

我得到了答案。生成的每个节点的 ID 都有问题。模块级节点对于多个模块节点具有相同的 ID。这就是为什么我有异常行为。现在删除ID后它工作正常。

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) {}
});
}