Dynamic extjs tree panel generation issue

Question

I have a tree panel for which i am dynamically generating the root node based on a group selected in a combo box. Based on the group selected a JSON will be returned from the server and after looping through the JSON object. I am generating the nodes of tree panel.If 'MM' is selected which is a parent group to all other groups. The root node will be 'Mobile Measurement' and all its child nodes will be other groups.

enter image description here

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!'); }

The groups are been generated but the events are not working well. There are some bugs with item select and event dispatch. By clicking one node the other node is getting expanded. These unknown behavior causing a problem with tree panel.

Your help would be appreciated!

Thanks in advance. :)

Anand Singh · Accepted Answer · 2013-09-20T13:23:42.573

I got the answer. There is a problem with IDs of each node being generated. The module level nodes are having same IDs for multiple module nodes. That's why i got the abnormal behavior. Now it is working fine after removing the IDs.

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

Dynamic extjs tree panel generation issue

1 Answers1