1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    56
    Vote Rating
    0
    phpfreak is on a distinguished road

      0  

    Default expand children of a checked parent node in tree

    expand children of a checked parent node in tree


    Hi all.

    Im fighting with this since friday and i have to finally ask some help on this issue.

    I have a (check) tree .
    each parent node has children
    when selecting a child a inputbox appears next to the child.

    []austria
    -austria [inputbox if checked]
    -andorra [inputbox if checked]
    []andorra
    -austria [....]
    -andorra []

    so i have modified the template in checktree.js a bit.
    Now when i load the tree and try to expand the selected parentnodes.
    i get an error , either el is undefined , or targetnode is undefined.
    I can get them to expand all , but i cannot manage to just expand the checked parentnodes.

    I have here a copy and paste example.
    I think it either has to do with the code i modified in checktree.js

    or i am just calling it wrong , but i have tried all.

    thanks in advance
    Code:
    <html>
    <head>
      <title></title>
      
    	<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
       <!-- GC -->
    	
     	<!-- LIBS -->
     	<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
     	<!-- ENDLIBS -->
     
        <script type="text/javascript" src="ext-all-debug.js"></script>
    	 <script type="text/javascript" src="checktree.js"></script>
    	<style>
    		.x-tree-checkbox {
    	background:url('resources/images/default/form/checkbox.gif') no-repeat 0 0;
    	height:13px;
    	width:13px;
    	margin:0 1px;
    	vertical-align:middle;
    }
    .x-tree-checkbox-over .x-tree-checkbox {
    	background-position:-13px 0;
    }
    .x-tree-checkbox-down .x-tree-checkbox {
    	background-position:-26px 0;
    }
    .x-tree-node-disabled .x-tree-checkbox {
    	background-position:-39px 0;
    }
    .x-tree-node-checked {
    	background-position:0 -13px;
    	
    }
    .x-tree-checkbox x-tree-node-checked span
    {
    	text-decoration:underline;
    }
    .x-tree-checkbox-over .x-tree-node-checked {
    	background-position:-13px -13px;
    }
    .x-tree-checkbox-down .x-tree-node-checked {
    	background-position:-26px -13px;
    }
    .x-tree-node-disabled .x-tree-node-checked {
    	background-position:-39px -13px;
    }
    .x-tree-node-grayed {
    	background-position:0 -26px;
    }
    .x-tree-checkbox-over .x-tree-node-grayed {
    	background-position:-13px -26px;
    }
    .x-tree-checkbox-down .x-tree-node-grayed {
    	background-position:-26px -26px;
    }
    .x-tree-node-disabled .x-tree-node-grayed {
    	background-position:-39px -26px;
    }
    		.tree-ct {
    	float:left;
    	margin:20px 10px 10px 10px;
    }
    #ct2 {margin-left:40px;}
    	</style>
    
    	
    	<script>
    		Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
    
    		Ext.onReady(function(){
    /*
    var wizard_billing_types = new Ext.data.JsonStore({
        url: 'json_billing_types.php',
       	autoLoad: false ,
    	fields: [ 
    {name: 'ID'},
    {name: 'NAME', type: 'string'}
    ]
    
    });
    
    wizard_billing_types.load();
    wizard_billing_types.on('load',function()
    {
    });
    	*/
    var t2 = new Ext.ux.tree.CheckTreePanel({ 
    renderTo:'ct2' ,
    
    title:'CheckTreePanel - default behavior' 
    ,id:'t2' 
    ,width:500 
    ,height:450 
    ,autoScroll:true 
    ,rootVisible:false 
    //,expandOnCheck :true
    ,root:{ 
    nodeType:'async' 
    ,id:'id' 
    ,text:'root' 
    ,expanded:true
    ,uiProvider:false 
    } 
    ,loader:{ 
    url:'process-request.php' 
    ,baseParams:{ 
    cmd:'getTree' 
    ,treeTable:'tree' 
    ,treeID:1 ,
     preloadChildren:true
    } 
    } 
    ,tools:[{ 
    id:'refresh' 
    ,qtip:'Reload Tree' 
    ,handler:function() { 
    t2.getRootNode().reload(); 
    } 
    }] ,
    buttons : [{
    	text: 'Save',
    	scope: this,
    
    	handler: function(){
    		var lol = Ext.getCmp('t2').getValue();// number , node1, node2 ,number
    		
    		 if (lol != "")
    		{		
    		
    		
    		var arr = new String(lol).split(",");
    		var values = new Array();
    		
    		for (var i = 0; i <= arr.length; i++) {
    			if (arr[i] != undefined && arr[i] != "") {
    				if (arr[i].indexOf('ynode') == -1) {
    				
    					var rootnode = arr[i];
    					values[rootnode] = [];// root
    				//var rootnode = arr[i];
    				
    				}
    				else {
    					if (Ext.getCmp('t2').getNodeById(arr[i]).attributes.checked) {
    						if (rootnode != "" && arr[i] != "") {
    							values[rootnode].push(rootnode + '|' + Ext.getCmp('t2').getNodeById(arr[i]).attributes.cid + '|' + document.getElementById('routing_cost_' + arr[i] + '[]').value);
    						}
    					}
    				}
    				
    			}
    		}
    		// done
    		// cheking values
    		
    	//	return false;
    		
    		
    		
    		
    		Ext.Ajax.request({
                                   url: 'process-request.php',
                                   success: function()
    							                       { 
                      	                                 Ext.Msg.alert('Status', 'Countries activated!',
    							                          function(btn, text) 
    													   {
    				                                         if (btn == 'ok'){
    		                                              t2.getRootNode().reload();                   }
    			                                            });
                                                        },
                                  failure: function(action)
    							  { 
                                   if(action.failureType == 'server'){ 
                                    obj = Ext.util.JSON.decode(action.response.responseText); 
                                    Ext.Msg.alert('Data adding has Failed!', obj.errors.reason); 
                                    }else{ 
                                    Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
                                    } 
                                 //saveSuppliers.getForm().reset(); 
                                 } ,
       waitTitle:'Connecting', 
                            waitMsg:'Sending data...',
       headers: {
           'my-header': 'foo'
       },
       params: { 'cmd': 'update', 'string[]': Ext.getCmp('t2').getValue() ,'values[]': values,'pid':1}
       });
       }
    }
    }]
    }); 
    
    t2.on('checkchange', function(node) {
       ab(node);
    });
    
    
    
    
    function ab(node)
    {
    	//alert(node.attributes.checked);
    	if (node.leaf && document.getElementById(node.id) ) {
    		
    	//	document.getElementById(node.id).style.display = (document.getElementById(node.id).style.display == 'none') ? 'block' : 'none';
    		document.getElementById(node.id).style.visibility = (node.attributes.checked) ? 'visible' : 'hidden';
    	
    	
    	
    	}
    }
    
    t2.on('load', function(node) {
    	var i=0;
    	while( i < node.childNodes.length) {
    		if (node.childNodes[i].attributes.checked) {
    			//alert(node.childNodes[i] + '' + node.childNodes[i].text + ' is checked');
    			//node.childNodes[i].toggle();
    			//node.childNodes[i].expand(true);
    //t2.root.expand(true);
    //node.childNodes[i].expand();
    		}
    		i++;
    		//node.expandChildNodes();
    		//t2.getRootNode().expandChildNodes();
    	}
        }); 
    	
    function likethis(node)
    {
    	var i=0;
    	while( i < node.childNodes.length) {
    		if (node.childNodes[i].attributes.checked) {
    			//alert(node.childNodes[i] + '' + node.childNodes[i].text + ' is checked');
    			//node.childNodes[i].toggle();
    			//node.childNodes[i].expand(true);
    this.root.expand(true);
    //node.childNodes[i].expand();
    		}
    		i++;
    		//node.expandChildNodes();
    		//t2.getRootNode().expandChildNodes();
    	}
    }	
    });
    
    	</script>
    </head>
    <body>
    <div id="ct2"></div>
    </body>
    </html>

    and the checktree.js
    i modified the var buf which holds the template code only.
    Code:
    /**
     * @author twinners
     */
    Ext.ns('Ext.ux.tree'); 
      
    // {{{ 
    /** 
    * Creates new CheckTreePanel 
    * @constructor 
    * @param {Object} config The configuration object 
    */ 
    Ext.ux.tree.CheckTreePanel = Ext.extend(Ext.tree.TreePanel, { 
      
    // {{{ 
    // default config 
    /** 
    * @cfg {String} bubbleCheck 
    * Check/uncheck also parent nodes. Valid values: none, checked, unchecked, all. Defaults to 'checked'. 
    */ 
    bubbleCheck:'checked' 
      
    /** 
    * @cfg {String} cascadeCheck 
    * Check/uncheck also child nodes. Valid values: none, checked, unchecked, all. Defaults to 'unchecked'. 
    */ 
    ,cascadeCheck:'unchecked' 
      
    /** 
    * @cfg {Boolean} deepestOnly 
    * Set this to true for getValue to return only deepest checked node ids. Defaults to false. 
    */ 
    ,deepestOnly:false 
      
    /** 
    * @cfg {Boolean} expandOnCheck 
    * Expand the node on check if true. Defaults to true; 
    */ 
    ,expandOnCheck:true 
      
    /** 
    * @cfg {Boolean/Object} filter 
    * Set it to false to not create tree filter or set a custom filter. Defaults to true. 
    */ 
    ,filter:true 
      
    /** 
    * @cfg {String} separator 
    * Separator for convertValue function. Defaults to ',' (comma). 
    */ 
    ,separator:',' 
      
    /** 
    * @cfg {String} cls 
    * Class to add to CheckTreePanel. A suitable css file must be included. Defaults to 'ux-checktree'. 
    */ 
    ,cls:'ux-checktree' 
      
    /** 
    * @cfg {Object} baseAttrs 
    * baseAttrs for loader. Defaults to {} (empty object). 
    */ 
    ,baseAttrs:{} 
    // }}} 
    // {{{ 
    ,initComponent:function() { 
      
    // use our event model 
    this.eventModel = new Ext.ux.tree.CheckTreeEventModel(this); 
      
    // call parent initComponent 
    Ext.ux.tree.CheckTreePanel.superclass.initComponent.apply(this, arguments); 
      
    // pass this.baseAttrs and uiProvider down the line 
    var baseAttrs = Ext.apply({uiProvider:Ext.ux.tree.CheckTreeNodeUI}, this.baseAttrs); 
    Ext.applyIf(this.loader, {baseAttrs:baseAttrs, preloadChildren:true}); 
      
    // make sure that nodes are deeply preloaded 
    if(true === this.loader.preloadChildren) { 
    this.loader.on('load', function(loader, node) { 
    node.cascade(function(n) { 
    loader.doPreload(n); 
    n.loaded = true; 
    }); 
    }); 
    } 
      
    // create tree filter 
    if(true === this.filter) { 
    var Filter = Ext.ux.tree.TreeFilterX ? Ext.ux.tree.TreeFilterX : Ext.tree.TreeFilter; 
    this.filter = new Filter(this, {autoClear:true}); 
    } 
      
    } // eo function initComponent 
    // }}} 
    // {{{ 
    /* 
    * get "value" (array of checked nodes ids) 
    * @return {Array} Array of chcecked nodes ids 
    */ 
    ,getValue:function() { 
    var a = []; 
    this.root.cascade(function(n) { 
    if(true === n.attributes.checked) { 
    if(false === this.deepestOnly || !this.isChildChecked(n)) { 
    a.push(n.id); 
    } 
    } 
    }, this); 
    return a; 
    } // eo function getValue 
    // {{{ 
    /** 
    * Helper function for getValue 
    * @param {Ext.tree.TreeNode} node 
    * @return {Boolean} true if node has a child checked, false otherwise 
    * @private 
    */ 
    ,isChildChecked:function(node) { 
    var checked = false; 
    Ext.each(node.childNodes, function(child) { 
    if(child.attributes.checked) { 
    checked = true; 
    } 
    }); 
    return checked; 
    } // eo function isChildChecked 
    // }}} 
    // }}} 
    // {{{ 
    /* 
    * clears "value", unchecks all nodes 
    * @return {Ext.ux.tree.CheckTreePanel} this 
    */ 
    ,clearValue:function() { 
    this.root.cascade(function(n) { 
    var ui = n.getUI(); 
    if(ui && ui.setChecked) { 
    ui.setChecked(false); 
    } 
    }); 
    this.value = []; 
    return this; 
    } // eo function clearValue 
    // }}} 
    // {{{ 
    /* 
    * converts passed value to array 
    * @param {Mixed} val variable number of arguments, e.g. convertValue('1,8,7', 3, [9,4]) 
    * @return {Array} converted value 
    */ 
    ,convertValue:function(val) { 
    // init return array 
    var a = []; 
      
    // calls itself recursively if necessary 
    if(1 < arguments.length) { 
    for(var i = 0; i < arguments.length; i++) { 
    a.push(this.convertValue(arguments[i])); 
    } 
    } 
      
    // nothing to do for arrays 
    else if(Ext.isArray(val)) { 
    a = val; 
    } 
      
    // just push numbers 
    else if('number' === typeof val) { 
    a.push(val); 
    } 
      
    // split strings 
    else if('string' === typeof val) { 
    a = val.split(this.separator); 
    } 
      
    return a; 
    } // eo function convertValue 
    // }}} 
    // {{{ 
    /* 
    * Set nodes checked/unchecked 
    * @param {Mixed} val variable number of arguments, e.g. setValue('1,8,7', 3, [9,4]) 
    * @return {Array} value. Array of checked nodes 
    */ 
    ,setValue:function(val) { 
      
    // uncheck all first 
    this.clearValue(); 
      
    // process arguments 
    this.value = this.convertValue.apply(this, arguments); 
      
    // check nodes 
    Ext.each(this.value, function(id) { 
    var n = this.getNodeById(id); 
    if(n) { 
    var ui = n.getUI(); 
    if(ui && ui.setChecked) { 
    ui.setChecked(true); 
      
    // expand checked nodes 
    if(true === this.expandOnCheck) { 
    n.bubbleExpand(); 
    } 
    } 
    } 
    }, this); 
      
    return this.value; 
    } // eo function setValue 
    // }}} 
    // {{{ 
    /* 
    * arbitrary attribute of checked nodes (text by default) is joined and separated with this.separator 
    * @param {String} attr Attribute to serialize 
    * @return {String} serialized attr of checked nodes 
    */ 
    ,serialize:function(attr) { 
    attr = attr || 'text'; 
    var a = []; 
    this.root.cascade(function(n) { 
    if(true === n.attributes.checked) { 
    if(false === this.deepestOnly || !this.isChildChecked(n)) { 
    a.push(n[attr]); 
    } 
    } 
    }, this); 
    return a.join(this.separator + ' '); 
    } // eo function serialize 
    // }}} 
    // {{{ 
    /* 
    * alias for serialize function 
    * @param {String} attr Attribute to serialize 
    * @return {String} serialized attr of checked nodes 
    */ 
    ,getText:function(attr) { 
    return this.serialize(attr); 
    } // eo function getText 
    // }}} 
    // {{{ 
    /** 
    * Creates hidden field if we're running in form for BasicForm::getValues to work 
    * @private 
    */ 
    ,onRender:function() { 
    Ext.ux.tree.CheckTreePanel.superclass.onRender.apply(this, arguments); 
    if(true === this.isFormField) { 
    this.hiddenField = this.body.createChild({ 
    tag:'input', type:'hidden', name:this.name || this.id 
    }, undefined, true); 
    } 
    } // eo function onRender 
    // }}} 
    // {{{ 
    /** 
    * Updates hidden field if one exists on checkchange 
    * @private 
    */ 
    ,updateHidden:function() { 
    if(this.hiddenField) { 
    this.hiddenField.value = this.getValue().join(this.separator); 
    } 
    } // eo function updateHidden 
    // }}} 
      
    // form field compatibility methods 
    // todo: They could be made much more clever 
    ,clearInvalid:Ext.emptyFn 
    ,markInvalid:Ext.emptyFn 
    ,validate:function() { 
    return true; 
    } 
    ,isValid:function() { 
    return true; 
    } 
    ,getName:function() { 
    return this.name || this.id || ''; 
    } 
      
    }) // eo extend 
      
    Ext.reg('checktreepanel', Ext.ux.tree.CheckTreePanel); 
    // }}} 
    // {{{ 
    /** 
    * @private 
    * @ignore 
    */ 
    Ext.override(Ext.tree.TreeNode, { 
    /** 
    * Expands all parent nodes of this node 
    * @private 
    */ 
    bubbleExpand:function() { 
    var root = this.getOwnerTree().root; 
    var branch = []; 
    var p = this; 
    while(p !== root) { 
    p = p.parentNode; 
    branch.push(p); 
    } 
    branch.reverse(); 
    Ext.each(branch, function(n) { 
    n.expand(false, false); 
    }); 
    } 
    }); 
    // }}} 
    // {{{ 
    /** 
    * @class Ext.ux.tree.CheckTreeNodeUI 
    * @extends Ext.tree.TreeNodeUI 
    * 
    * Adds checkbox to the tree node UI. This class is not intended 
    * to be instantiated explicitly; it is used internally in CheckTreePanel. 
    * 
    * @author Ing. Jozef Sakáloš 
    * @copyright (c) 2009, by Ing. Jozef Sakáloš 
    * @version 1.0 
    * @date 9. January 2009 
    * 
    * @license Ext.ux.tree.CheckTreeNodeUI is licensed under the terms of 
    * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent 
    * that the code/component(s) do NOT become part of another Open Source or Commercially 
    * licensed development library or toolkit without explicit permission. 
    * 
    * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html" 
    * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p> 
    * 
    * @donate 
    * <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"> 
    * <input type="hidden" name="cmd" value="_s-xclick"> 
    * <input type="hidden" name="hosted_button_id" value="3430419"> 
    * <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif" 
    * border="0" name="submit" alt="PayPal - The safer, easier way to pay online."> 
    * <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
    * </form> 
    */ 
    /** 
    * @constructor 
    * @Creates new CheckTreeNodeUI 
    * @param {Ext.tree.TreeNode} node Node to create the UI for 
    */ 
    Ext.ux.tree.CheckTreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, { 
      
    // {{{ 
    /** 
    * This is slightly adjusted original renderElements method 
    * @private 
    */ 
    renderElements:function(n, a, targetNode, bulkRender){ 
      
    this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() :''; 
    var checked = n.attributes.checked; 
    var href = a.href ? a.href : Ext.isGecko ? "" :"#"; 
    // lets say i create a in combo here
    
    
    
    var buf = [ 
    '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">' 
    ,'<span class="x-tree-node-indent">',this.indentMarkup,"</span>" 
    ,'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />' 
    ,'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" :""),(a.iconCls ? " "+a.iconCls :""),'" unselectable="on" />' 
    ,'<img src="'+this.emptyIcon+'" class="x-tree-checkbox'+(true === checked ? ' x-tree-node-checked' :'')+'" />' 
    ,'<a  hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ' 
    ,a.hrefTarget ? ' target="'+a.hrefTarget+'"' :"", '><span unselectable="on">',n.text,"</span>"+(n.leaf === true ? '<span  style="vertical-align:top;visibility:'+(true === checked ? ' visible' :'hidden')+';display:inline;margin-left:30px;margin:0px;right:0px;" id="'+n.id+'">Routing cost: <input type="text" id="routing_cost_'+n.id+'[]" name="routing_cost_'+n.id+'[]" style="width:50px;margin:0px;padding:0px;" value="'+(checked == true ? n.attributes.routecost : '')+'"/></span>' : '' ) +"</a></div>" 
    ,'<ul class="x-tree-node-ct" style="display:none;"></ul>' 
    ,"</li>" 
    ].join(''); 
    
    var nel; 
    if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){ 
    this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf); 
    }else{ 
    this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf); 
    } 
    this.elNode = this.wrap.childNodes[0]; 
    this.ctNode = this.wrap.childNodes[1]; 
    var cs = this.elNode.childNodes; 
    this.indentNode = cs[0]; 
    this.ecNode = cs[1]; 
    this.iconNode = cs[2]; 
    this.checkbox = cs[3]; 
    this.cbEl = Ext.get(this.checkbox); 
    this.anchor = cs[4]; 
    this.textNode = cs[4].firstChild; 
    } // eo function renderElements 
    // }}} 
    // {{{ 
    /** 
    * Sets iconCls 
    * @param {String} iconCls 
    * @private 
    */ 
    ,setIconCls:function(iconCls) { 
    Ext.fly(this.iconNode).set({cls:'x-tree-node-icon ' + iconCls}); 
    } // eo function setIconCls 
    // }}} 
    // {{{ 
    /** 
    * @return {Boolean} true if the node is checked, false otherwise 
    * @private 
    */ 
    ,isChecked:function() { 
    return this.node.attributes.checked === true; 
    } // eo function isChecked 
    // }}} 
    // {{{ 
    /** 
    * Called when check changes 
    * @private 
    */ 
    ,onCheckChange:function() { 
    var checked = this.isChecked(); 
    var tree = this.node.getOwnerTree(); 
    var bubble = tree.bubbleCheck; 
    var cascade = tree.cascadeCheck; 
      
    if('all' === bubble || (checked && 'checked' === bubble) || (!checked && 'unchecked' === bubble)) { 
    this.updateParent(checked); 
    } 
    if('all' === cascade || (checked && 'checked' === cascade) || (!checked && 'unchecked' === cascade)) { 
    this.updateChildren(checked); 
    } 
      
    tree.updateHidden(); 
    this.fireEvent('checkchange', this.node, checked); 
    } // eo function onCheckChange 
    // }}} 
    // {{{ 
    /** 
    * Sets node UI checked/unchecked 
    * @param {Boolean} checked true to set node checked, false to uncheck 
    * @return {Boolean} checked 
    */ 
    ,setChecked:function(checked) { 
    checked = true === checked ? checked : false; 
    var cb = this.cbEl || false; 
    if(cb) { 
    true === checked ? cb.addClass('x-tree-node-checked') : cb.removeClass('x-tree-node-checked'); 
    } 
    this.node.attributes.checked = checked; 
    this.onCheckChange(); 
    return checked; 
    } // eo function setChecked 
    // }}} 
    // {{{ 
    /** 
    * Toggles check 
    * @return {Boolean} value after toggle 
    */ 
    ,toggleCheck:function() { 
    var checked = !this.isChecked(); 
    this.setChecked(checked); 
    return checked; 
    } // eo function toggleCheck 
    // }}} 
    // {{{ 
    /** 
    * Sets parents checked/unchecked. Used if bubbleCheck is not 'none' 
    * @param {Boolean} checked 
    * @private 
    */ 
    ,updateParent:function(checked) { 
    var p = this.node.parentNode; 
    var ui = p ? p.getUI() : false; 
      
    if(ui && ui.setChecked) { 
    ui.setChecked(checked); 
    } 
    } // eo function updateParent 
    // }}} 
    // {{{ 
    /** 
    * Sets children checked/unchecked. Used if cascadeCheck is not 'none' 
    * @param {Boolean} checked 
    * @private 
    */ 
    ,updateChildren:function(checked) { 
    this.node.eachChild(function(n) { 
    var ui = n.getUI(); 
    if(ui && ui.setChecked) { 
    ui.setChecked(checked); 
    } 
    }); 
    } // eo function updateChildren 
    // }}} 
    // {{{ 
    /** 
    * Checkbox click event handler 
    * @private 
    */ 
    ,onCheckboxClick:function() { 
    if(!this.disabled) { 
    this.toggleCheck(); 
    } 
    } // eo function onCheckboxClick 
    // }}} 
    // {{{ 
    /** 
    * Checkbox over event handler 
    * @private 
    */ 
    ,onCheckboxOver:function() { 
    this.addClass('x-tree-checkbox-over'); 
    } // eo function onCheckboxOver 
    // }}} 
    // {{{ 
    /** 
    * Checkbox out event handler 
    * @private 
    */ 
    ,onCheckboxOut:function() { 
    this.removeClass('x-tree-checkbox-over'); 
    } // eo function onCheckboxOut 
    // }}} 
    // {{{ 
    /** 
    * Mouse down on checkbox event handler 
    * @private 
    */ 
    ,onCheckboxDown:function() { 
    this.addClass('x-tree-checkbox-down'); 
    } // eo function onCheckboxDown 
    // }}} 
    // {{{ 
    /** 
    * Mouse up on checkbox event handler 
    * @private 
    */ 
    ,onCheckboxUp:function() { 
    this.removeClass('x-tree-checkbox-down'); 
    } // eo function onCheckboxUp 
    // }}} 
      
    }); // eo extend 
    // }}} 
    // {{{ 
    /** 
    * @class Ext.ux.tree.CheckTreeEventModel 
    * @extends Ext.tree.TreeEventModel 
    * 
    * Tree event model suitable for use with CheckTreePanel. 
    * This class is not intended to be instantiated explicitly by a user 
    * but it is used internally by CheckTreePanel. 
    * 
    * @author Ing. Jozef Sakáloš 
    * @copyright (c) 2009, by Ing. Jozef Sakáloš 
    * @version 1.0 
    * @date 9. January 2009 
    * 
    * @license Ext.ux.tree.CheckTreeEventModel is licensed under the terms of 
    * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent 
    * that the code/component(s) do NOT become part of another Open Source or Commercially 
    * licensed development library or toolkit without explicit permission. 
    * 
    * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html" 
    * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p> 
    * 
    * @donate 
    * <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"> 
    * <input type="hidden" name="cmd" value="_s-xclick"> 
    * <input type="hidden" name="hosted_button_id" value="3430419"> 
    * <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif" 
    * border="0" name="submit" alt="PayPal - The safer, easier way to pay online."> 
    * <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
    * </form> 
    */ 
    /** 
    * Create new CheckTreeEventModel 
    * @constructor 
    * @param {Ext.ux.tree.CheckTreePanel} tree The tree to apply this event model to 
    */ 
    Ext.ux.tree.CheckTreeEventModel = Ext.extend(Ext.tree.TreeEventModel, { 
    initEvents:function(){ 
    var el = this.tree.getTreeEl(); 
    el.on('click', this.delegateClick, this); 
    if(this.tree.trackMouseOver !== false){ 
    el.on('mouseover', this.delegateOver, this); 
    el.on('mouseout', this.delegateOut, this); 
    } 
    el.on('mousedown', this.delegateDown, this); 
    el.on('mouseup', this.delegateUp, this); 
    el.on('dblclick', this.delegateDblClick, this); 
    el.on('contextmenu', this.delegateContextMenu, this); 
    } 
    ,delegateOver:function(e, t){ 
    if(!this.beforeEvent(e)){ 
    return; 
    } 
    if(this.lastEcOver){ 
    this.onIconOut(e, this.lastEcOver); 
    delete this.lastEcOver; 
    } 
    if(this.lastCbOver){ 
    this.onCheckboxOut(e, this.lastCbOver); 
    delete this.lastCbOver; 
    } 
    if(e.getTarget('.x-tree-ec-icon', 1)){ 
    this.lastEcOver = this.getNode(e); 
    this.onIconOver(e, this.lastEcOver); 
    } 
    else if(e.getTarget('.x-tree-checkbox', 1)){ 
    this.lastCbOver = this.getNode(e); 
    this.onCheckboxOver(e, this.lastCbOver); 
    } 
    if(t = this.getNodeTarget(e)){ 
    this.onNodeOver(e, this.getNode(e)); 
    } 
    } 
    ,delegateOut:function(e, t){ 
    if(!this.beforeEvent(e)){ 
    return; 
    } 
    if(e.getTarget('.x-tree-ec-icon', 1)){ 
    var n = this.getNode(e); 
    this.onIconOut(e, n); 
    if(n == this.lastEcOver){ 
    delete this.lastEcOver; 
    } 
    } 
    else if(e.getTarget('.x-tree-checkbox', 1)){ 
    var n = this.getNode(e); 
    this.onCheckboxOut(e, n); 
    if(n == this.lastCbOver){ 
    delete this.lastCbOver; 
    } 
    } 
    if((t = this.getNodeTarget(e)) && !e.within(t, true)){ 
    this.onNodeOut(e, this.getNode(e)); 
    } 
    } 
    ,delegateDown:function(e, t){ 
    if(!this.beforeEvent(e)){ 
    return; 
    } 
    if(e.getTarget('.x-tree-checkbox', 1)){ 
    this.onCheckboxDown(e, this.getNode(e)); 
    } 
    } 
    ,delegateUp:function(e, t){ 
    if(!this.beforeEvent(e)){ 
    return; 
    } 
    if(e.getTarget('.x-tree-checkbox', 1)){ 
    this.onCheckboxUp(e, this.getNode(e)); 
    } 
    } 
    ,delegateOut:function(e, t){ 
    if(!this.beforeEvent(e)){ 
    return; 
    } 
    if(e.getTarget('.x-tree-ec-icon', 1)){ 
    var n = this.getNode(e); 
    this.onIconOut(e, n); 
    if(n == this.lastEcOver){ 
    delete this.lastEcOver; 
    } 
    } 
    else if(e.getTarget('.x-tree-checkbox', 1)){ 
    var n = this.getNode(e); 
    this.onCheckboxOut(e, n); 
    if(n == this.lastCbOver){ 
    delete this.lastCbOver; 
    } 
    } 
    if((t = this.getNodeTarget(e)) && !e.within(t, true)){ 
    this.onNodeOut(e, this.getNode(e)); 
    } 
    } 
    ,delegateClick:function(e, t){ 
    if(!this.beforeEvent(e)){ 
    return; 
    } 
    if(e.getTarget('.x-tree-checkbox', 1)){ 
    this.onCheckboxClick(e, this.getNode(e)); 
    } 
    else if(e.getTarget('.x-tree-ec-icon', 1)){ 
    this.onIconClick(e, this.getNode(e)); 
    } 
    else if(this.getNodeTarget(e)){ 
    this.onNodeClick(e, this.getNode(e)); 
    } 
    } 
    ,onCheckboxClick:function(e, node){ 
    node.ui.onCheckboxClick(); 
    } 
    ,onCheckboxOver:function(e, node){ 
    node.ui.onCheckboxOver(); 
    } 
    ,onCheckboxOut:function(e, node){ 
    node.ui.onCheckboxOut(); 
    } 
    ,onCheckboxDown:function(e, node){ 
    node.ui.onCheckboxDown(); 
    } 
    ,onCheckboxUp:function(e, node){ 
    node.ui.onCheckboxUp(); 
    } 
    }); // eo extend 
    // }}} 
      
    // eof

  2. #2
    Sencha User
    Join Date
    Jun 2009
    Posts
    56
    Vote Rating
    0
    phpfreak is on a distinguished road

      0  

    Default resuming the load event

    resuming the load event


    So to resume the above i want to expand the checked parentnodes ( because it means there are selected children).

    so in my load event i can see through the alert it is recognizing fine the checked nodes.
    i just can seem to expand them!!!!
    it drives me nuts!!
    Code:
    t2.on('load', function(node) {
        var i=0;
        while( i < node.childNodes.length) {
            if (node.childNodes[i].attributes.checked) {
                //alert(node.childNodes[i] + '' + node.childNodes[i].text + ' is checked');
            //node.childNodes[i].expand(true);
                               node.expand(true);// is the only that works but expands all
            }
            i++;
     
        }
        });

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    56
    Vote Rating
    0
    phpfreak is on a distinguished road

      0  

    Default solved

    solved


    I managed to solution it by passing to the checked nodes as attribute expanded = true.

    24 hours to be able to expand some nodes : -)

    sick:-)