[2.2] Tri-state tree/Tree with themed checkbox [NEW v1.2]

[rosslai]

Dear Condor

I can't find any resourse about tri-state tree in Ext 1.1.
Could this script be used in Ext 1.1? or can you guide me to modify this script to fit in Ext 1.1?

[kwatanabe]

Is there any solution for this problem. The tri-state tree is broken unless the unopened parent functionlity is fixed.

[asyura]

if use in 3.1, the tree will not work with drapdrop, can you fix it.

[Dumas]

I would like to use that tree so that users can check what they want to copy to another destination, so it's a file tree.

Therefore I have an unwanted behaviour, because it's hard to display, I made a short screencast where you can perfectly see it:
www.screencast.com/t/NjI5NmYxZ

What would I have to adjust?

thx a lot
Roland

[Lobos]

Agree with starmage, in FireFox, drag a node then release mouse, it freezes the drag, I commented some code to fix that, it works.

 delegateUp : function(e, t) {
//  if(!this.beforeEvent(e)) {   // comment these 3 line
//   return;
//  }
  if(e.getTarget('.x-tree-checkbox', 1)) {
   this.onCheckboxUp(e, this.getNode(e));
  }
 },

This fixed my problem - I was using the drag and drop between two trees example and the tristate tree was causing a bug where you could drag and drop from one tree to antoher, but if you tried in the same tree it would freeze and not drop the item.

Maybe this fix should be added to the distro?

Thanks!

[Capt.JackSparrow]

Hi Condor,
FOA, Thanks for the wonderful extension.
I am using AsynchTristateNodeUI as below:
The problem is during render I literally need to expand and collapse nodes to make the
parent node checkboxes checked.
This severely impacts the performance, lot in IE.
Is there a clean way to load the parent node checkboxes correctly.

Bm.util.CheckTreePanel = Ext.extend(Ext.tree.TreePanel, {
    config         : {},
    chkTreeRoot    : null,
    getTreePanelRoot : function() {
        if(Ext.isEmpty(this.chkTreeRoot)) {
            var root = new Ext.tree.TreeNode({
        		children  : this.config.data
        	});
        	this.chkTreeRoot = root;
        }
    	return this.chkTreeRoot;
    },
	getTreeLoader  : function() {	    
        var treeLoader = new Ext.tree.TreeLoader({
    		preloadChildren:true,
    		baseAttrs:{
    			uiProvider:Ext.tree.AsynchTriStateNodeUI
    		}
    	}).doPreload(this.getTreePanelRoot());
    	return treeLoader;
    },    
    constructor        : function(config) {
        this.config = config;
        if(!this.isValidConfig()) {
            return;
        }
        var panelConfig = {                
            root        : this.getTreePanelRoot(),
            loader      : this.getTreeLoader(),        
            listeners   : {                    
            }
        };
        Ext.apply(panelConfig, config, this.getDefaultValues());
        panelConfig = this.addContextMenu(panelConfig);
        this.config = panelConfig;            
        Bm.util.CheckTreePanel.superclass.constructor.call(this, this.config);
    },
    
    getDefaultValues   : function() {
        var defaultValues = {
            title               : '',
            useArrows           : true,
            autoScroll          : true,
            animate             : true,
            enableDD            : false,
            containerScroll     : true,
            rootVisible         : false,
            expandRootNode      : true,
            border              : false,
            header              : false,
            enableContextMenu   : true
        };
        if(Ext.isEmpty(this.config.height)) {
            defaultValues.autoHeight = true;
        } else {
            defaultValues.height = this.config.height;
        }
          
        if(!Ext.isEmpty(this.config.width)) {
            defaultValues.width = this.config.width;
        }
        return defaultValues;
    },
    
    isValidConfig     : function() {
        //mandatory values    
        if(isInvalidValue(this.config.id, "id")) {
            return false;
        }
        if(isInvalidValue(this.config.renderTo, "renderTo")) {
            return false;
        }
        if(isInvalidValue(this.config.data, "data")) {
            return false;
        }
        return true;
    },
    
    render             : function() {
        Bm.util.CheckTreePanel.superclass.render.apply(this, arguments);      
        this.expandAll();
        Ext.each(this.getRootNode().childNodes, function(node){
            node.collapse(true);
            node.expand(false);
        });
    },
    
    getSelectedItems   : function() {
        var selNodes = this.getChecked();
        var sel = {};
        var tmp = {};
        Ext.each(selNodes, function(node){
            var nodeId = getNodeId(node);
            if(node.hasChildNodes()) {
                var parent = node.parentNode;
                if(parent) {
                    var parentNodeId = getNodeId(parent);
                    if(sel[parentNodeId] != "all"
                            && tmp[parentNodeId] != "sibling-not-all") {
                        sel[nodeId] = "all";
                        if(!Ext.isEmpty(parentNodeId)) {
                            sel[parentNodeId] = 
                                getCommaSepStr(sel[parentNodeId], nodeId);
                        }  
                    } else {
                        tmp[nodeId] = "sibling-not-all";
                    }
                } else {
                    sel[nodeId] = "";
                }
            } else {
                var parent = node.parentNode;
                if(parent) {
                    if(sel[getNodeId(parent)] != "all") {
                        if(tmp[getNodeId(parent)] != "sibling-not-all") {
                            var childId = nodeId;
                            do {
                                sel[getNodeId(parent)] = 
                                        getCommaSepStr(sel[getNodeId(parent)], childId);
                                childId = getNodeId(parent);
                                parent = parent.parentNode;
                            } while(parent && !Ext.isEmpty(getNodeId(parent)))
                            sel[nodeId] = "yes";
                        }
                    }
                }
            }
        })
        return sel;
    },
    
    addContextMenu : function(panelConfig) {
        if(panelConfig.enableContextMenu) {
            var contextMenu = {
                contextMenu: new Ext.menu.Menu({
                    items: [{
                        id: 'selectAll',
                        text: 'Select All'
                    }, {
                        id: 'deselectAll',
                        text: 'DeSelect All'
                    }, {
                        id: 'expand',
                        text: 'Expand'
                    }, {
                        id: 'collapse',
                        text: 'Collapse'
                    }, {
                        id: 'expandAll',
                        text: 'Expand All'
                    }, {
                        id: 'collapseAll',
                        text: 'Collapse All'
                    }],
                    listeners: {
                        itemclick: function(item) {
                            switch (item.id) {                                
                                case 'selectAll':
                                    var n = item.parentMenu.contextNode;
                                    toggleCheck(n, true);
                                    n.expand(true);
                                    break;
                                case 'deselectAll':
                                    var n = item.parentMenu.contextNode;
                                    toggleCheck(n, false);
                                    n.expand(true);
                                    break;
                                case 'expand':
                                    var n = item.parentMenu.contextNode;
                                    n.expand(false);
                                    break;
                                case 'collapse':
                                    var n = item.parentMenu.contextNode;
                                    n.collapse(false);
                                    break;
                                case 'expandAll':
                                    var n = item.parentMenu.contextNode;
                                    n.expand(true);
                                    break;
                                case 'collapseAll':
                                    var n = item.parentMenu.contextNode;
                                    n.collapse(true);
                                    break;
                            }
                        }
                    }
                })
            }
            var contextMenuListener = {
                contextmenu : function(node, e) {
                    if(!node.isLeaf()) {
                        node.select();
                        var c = node.getOwnerTree().contextMenu;
                        c.contextNode = node;
                        c.showAt(e.getXY());
                    }
                }
            };
            Ext.applyIf(panelConfig, contextMenu);
            Ext.applyIf(panelConfig.listeners, contextMenuListener);
        };
        return panelConfig;
    }
});

Thanks!

[maitreya.karandikar]

Condor

We are facing issues using tristate check box tree with ext-js 4.1.1.
There is no ext-base.js script . Is there an updated version to go with ext-js 4.1.1 ?

Ext 2.2 introduced a themed checkbox component, but unfortunately the new checkbox theme wasn't used for trees and fieldsets.

So I started out making a TreeNodeUI that would use checkbox images instead of checkbox inputs.
After I finished I couldn't resist making a TreeNodeUI descendant that would do what many of you have asked for: support checkboxes with a grayed/partial state and automatic cascading.

Include TreeCheckbox.css and TreeCheckbox.js to get themed checkboxes in your grid.

Include TriStateNodeUI.css and TriStateNodeUI.js and set the uiProvider to TriStateNodeUI to get automatic update of parent/child checked states.
If your tree is very large or if you are using asynchronous node loading (AsynchTreeNode) you should use AsynchTriStateNodeUI instead of TriStateNodeUI (because children that aren't loaded yet can't be checked/unchecked).

Check out example.html to see how to use the new components.

Version 1.1:
- Removed CSS margin.
- Added getChecked method to return correct checked state, even with AsynchTriStateNodeUI.
- Changed TriStateNodeUI to do a real check cascade and moved the original virtual cascading code to AsynchTriStateNodeUI, to be used when a real cascade is to slow (large tree) or impossible (asynchronous node loading).

New version 1.2:
- Fixed bug when in mixing nodes with and without checkboxes.
- Only fire checkchange if checked stated actually changed.

[buy sustanon]

J'ai juste besoin de savoir comment obtenir un site web a commencé. Je veux faire un site de fan pour un nouveau groupe. Je sais que je dois payer pour un domaine, mais je suis confus sur la façon d'acheter et construire un site web. Aidez s'il vous plaît? Merci d'avance! (: Merci à tous. (!:.