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:-)

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi