extjs treepanel load children without expand

Question

I use Extjs 3.4. I am working on TreePanel with checkbox solution.

What I need is: When I check father node, all childNodes also checked. It's easy, but it depends on extjs expand all childNodes.

If I do

tree.expandAll();
tree.collapseAll();

My check strategy will work, but I don't want the expand effect.

My extjs code(checkchange event) is something like the following:

var checkchange = function(node, flag) {

        if (node.hasChildNodes()) {
            node.cascade(function(node) {
                node.attributes.checked = flag;
                node.ui.checkbox.checked = flag;
                return true;
            });
        }

        var pNode = node.parentNode;
        for (; pNode != null; pNode = pNode.parentNode) {
            if (flag || tree.getChecked("checked", pNode).length - 1 == 0) {
                pNode.attributes.checked = flag;
                pNode.ui.checkbox.checked = flag;
            }
        }
    };

var tree = new Ext.tree.TreePanel({

    listeners: {
        'checkchange': checkchange
    },
})

How can I do? Thank every one for giving advice.

[ EDIT ]

I create A Demo In jsfiddle, that can be easily test.

(Since Extjs 3.4.0 cdn used by jsfiddle not work, I append another cdn extjs resource from https://cdnjs.com/libraries/extjs/3.4.1-1)

Answer 1

I am not sure whether you really want the whole tree to be loaded node by node when checking the root node. I would recommend to lazily check the child nodes when they are loaded for an already-checked parent node, by attaching to the load event. Something like this:

load:function(me, node) {
    if(node && node.attributes.checked) node.cascade(
        ... [function to check all children]
    )
}

Depending on your intentions for further processing and your tree size, this could be better than expanding the whole tree to render and check all checkboxes.

If you want the tree to be loaded directly, I would recommend to use preloadChildren:true on the TreeLoader. This is easier than a manual implementation of cascaded load.

Answer 2

I didn't really solve this problem. But I got an eclectic solution.

1. Only expand when needed

   checkchange : function(node, flag){
   
       node.cascade(function(node) {
           // when you check, first expand, then child nodes can be checked too
           if(node.expanded == false)
               node.expand(true);
           node.attributes.checked = flag;
           node.ui.checkbox.checked = flag;
           return true;
       });
       ......
   }
   

This will meet the precondition that all child nodes should have expanded. But also no need expanded when first loaded.

2. If a parent node checked when first loaded, all child nodes need to be expand

   this.treeLoader = new Ext.tree.TreeLoader({
       url : 'xxx',
       baseParams  : {
           someparam: ""
       },
       listeners : {
           'load' : function(tree,node,response) {
               var res = Ext.util.JSON.decode(response.responseText);
               if(res.success != undefined && !res.success) {
                   Ext.Msg.alert('Hint', res.message);
                   return;
               }
               node.cascade(function(node) {
                   if(node.attributes.checked == true) {
                       node.expand(true);
                   }
               });
           },
   
       }
   });
   

This two methods does solve my prolem though not very perfect.

Hope this can help others.