1. #1
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    9
    Vote Rating
    0
    swunderlin is on a distinguished road

      0  

    Default Detect Checkbox change on ColumnNodeUI

    Detect Checkbox change on ColumnNodeUI


    Aloa. I can't figure out how to dectect the state of a checkbox in ColumnNodeUI after a click. I want to hook an event handler on the checkbox to detect if it was enabled/disabled.

    In a debugger I was searching through the passed in parameters (node, checked and this) at no avail. I don't get it.

    PHP Code:
    treepanel.on("checkchange", function(nodechecked) {
        var 
    = (node.getUI().isChecked()) ? "yes" "no";
        var 
    state this.getChecked(nullnode);
        
    alert("checked: " node " " " " typeof(node.getUI()));
    }); 
    All atempts faield to find out the current state of the checkbox in a treelist/columntree.

    node.attributes.checked is always undefined ... *shurgs*

    Any help appreciated, thanks,
    -S

  2. #2
    Ext User
    Join Date
    May 2009
    Posts
    214
    Vote Rating
    0
    Maxrunner is on a distinguished road

      0  

    Default


    I also have this exact problem, anyone fixed this?im using the treecolumn with the columnNodeUI and even when i click the checkbox it passes fro the original false value to undefined.

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    9
    Vote Rating
    0
    swunderlin is on a distinguished road

      0  

    Default


    I have fixed it in the meantime ... (credits in the file header are not correct, just pulled it from my svn repo).

    PHP Code:
    /* 
     * Ext JS Library 2.2 
     * Copyright(c) 2006-2008, Ext JS, LLC. 
     * licensing@extjs.com 
     *  
     * http://extjs.com/license 
     * 
     * @Author Ext JS Team 
     * @Author $Author: wunderlins $ 
     * @Version $Id: ColumnNodeUI.js 55 2009-05-18 14:42:30Z wunderlins $ 
     */ 
     
    Ext.tree.ColumnTree Ext.extend(Ext.tree.TreePanel, { 
        
    lines:false
        
    borderWidthExt.isBorderBox 2// the combined left/right border for each cell 
        
    cls:'x-column-tree'
         
        
    onRender : function(){ 
            
    Ext.tree.ColumnTree.superclass.onRender.apply(thisarguments); 
            
    this.headers this.body.createChild
                {
    cls:'x-tree-headers'},this.innerCt.dom); 
     
            var 
    cols this.columnsc
            var 
    totalWidth 0
     
            for(var 
    0len cols.lengthleni++){ 
                 
    cols[i]; 
                 
    totalWidth += c.width
                 
    this.headers.createChild({ 
                     
    cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''), 
                     
    cn: { 
                         
    cls:'x-tree-hd-text'
                         
    htmlc.header 
                     
    }, 
                     
    style:'width:'+(c.width-this.borderWidth)+'px;' 
                 
    }); 
            } 
            
    this.headers.createChild({cls:'x-clear'}); 
            
    // prevent floats from wrapping when clipped 
            // alert(totalWidth) 
            
    this.headers.setWidth(totalWidth); 
            
    this.innerCt.setWidth(totalWidth); 
        } 
    }); 
     
    Ext.tree.ColumnNodeUI Ext.extend(Ext.tree.TreeNodeUI, { 
        
    focusExt.emptyFn// prevent odd scrolling behavior 
     
        
    toggleCheck : function(value){ 
            var 
    cb this.checkbox.firstChild
            if(
    cb){ 
                
    cb.checked = (value === undefined ? !cb.checked value); 
                
    this.onCheckChange(); 
            } 
        }, 
     
        
    onCheckChange : function(){ 
            var 
    checked this.checkbox.firstChild.checked
             
            if (
    typeof(this.checkbox.firstChild.defaultChecked) == "undefined"
                
    this.checkbox.firstChild.defaultChecked checked
            
    this.node.attributes.checked checked
            
    this.fireEvent('checkchange'this.nodechecked); 
        }, 
     
        
    renderElements : function(natargetNodebulkRender){ 
                
    this.indentMarkup n.parentNode n.parentNode.ui.getChildIndent() : ''
     
                var 
    n.getOwnerTree(); 
                var 
    cols t.columns
                var 
    bw t.borderWidth
                var 
    cols[0]; 
                var 
    cb typeof a.checked == 'boolean'
     
                var 
    buf = [ 
                         
    '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf 'a.cls,'">'
                                
    '<div class="x-tree-col" style="width:',c.width-bw,'px;">'
                                        
    '<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">'
                                        
    '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href a.href "#",'" tabIndex="1" '
                                        
    a.hrefTarget ' target="'+a.hrefTarget+'"' ""'>'
                                        (
    typeof(a.checked) != "undefined") ? (a.checked '<input class="x-tree-node-cb" type="checkbox" checked="checked />' '<input class="x-tree-node-cb" type="checkbox" />') : ""
                                        
    '<span unselectable="on">'n.text || (c.renderer c.renderer(a[c.dataIndex], na) : a[c.dataIndex]),"</span></a>"
                                
    "</div>"]; 
                 for(var 
    1len cols.lengthleni++){ 
                         
    cols[i]; 
     
                         
    buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">'
                                                
    '<div class="x-tree-col-text">',(c.renderer c.renderer(a[c.dataIndex], na) : a[c.dataIndex]),"</div>"
                                            
    "</div>"); 
                 } 
                 
    buf.push
                        
    '<div class="x-clear"></div></div>'
                        
    '<ul class="x-tree-node-ct" style="display:none;"></ul>'
                        
    "</li>"); 
     
                if(
    bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){ 
                        
    this.wrap Ext.DomHelper.insertHtml("beforeBegin"
                                                                
    n.nextSibling.ui.getEl(), buf.join("")); 
                }else{ 
                        
    this.wrap Ext.DomHelper.insertHtml("beforeEnd"targetNodebuf.join("")); 
                } 
     
                
    this.elNode this.wrap.childNodes[0]; 
                
    this.ctNode this.wrap.childNodes[1]; 
                var 
    cs this.elNode.firstChild.childNodes
                
    this.indentNode cs[0]; 
                
    this.ecNode cs[1]; 
                
    this.iconNode cs[2]; 
                
    this.anchor cs[3]; 
                
    this.textNode cs[3].firstChild
                if(
    cb){ 
                        
    this.checkbox cs[3]; 
                        
    this.checkbox.defaultChecked this.checkbox.checked
                } 
        } 
    }); 

  4. #4
    Ext User
    Join Date
    May 2009
    Posts
    214
    Vote Rating
    0
    Maxrunner is on a distinguished road

      0  

    Default


    Does this fix que togglecheck method? does it check and uncheck the checkbox?

    i mean if you need to change the html tag checked manually?

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    9
    Vote Rating
    0
    swunderlin is on a distinguished road

      0  

    Default


    ColumnNodeUI.js does change the dom of the grid, therefore some inhertd methods fail on dom operations. If I remeber correctly I had problems with the onCheckChange() method, but as you see from the svn $Id$ timestamp in my code, it's some time ago.

    Find below a patch file (diff -Nru style) where you can examine my changes in more details.

    Kind regards,
    -S

    Index: ColumnNodeUI.js
    ===================================================================
    --- ColumnNodeUI.js (revision 8)
    +++ ColumnNodeUI.js (working copy)
    @@ -4,6 +4,10 @@
    * licensing@extjs.com
    *
    * http://extjs.com/license
    + *
    + * @Author Ext JS Team
    + * @Author $Author$
    + * @Version $Id$
    */

    Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
    @@ -33,59 +37,82 @@
    }
    this.headers.createChild({cls:'x-clear'});
    // prevent floats from wrapping when clipped
    + // alert(totalWidth)
    this.headers.setWidth(totalWidth);
    this.innerCt.setWidth(totalWidth);
    }
    });

    Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
    - focus: Ext.emptyFn, // prevent odd scrolling behavior
    + focus: Ext.emptyFn, // prevent odd scrolling behavior

    - renderElements : function(n, a, targetNode, bulkRender){
    - this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
    + toggleCheck : function(value){
    + var cb = this.checkbox.firstChild;
    + if(cb){
    + cb.checked = (value === undefined ? !cb.checked : value);
    + this.onCheckChange();
    + }
    + },

    - var t = n.getOwnerTree();
    - var cols = t.columns;
    - var bw = t.borderWidth;
    - var c = cols[0];
    + onCheckChange : function(){
    + var checked = this.checkbox.firstChild.checked;
    +
    + if (typeof(this.checkbox.firstChild.defaultChecked) == "undefined")
    + this.checkbox.firstChild.defaultChecked = checked;
    + this.node.attributes.checked = checked;
    + this.fireEvent('checkchange', this.node, checked);
    + },

    - var buf = [
    - '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
    - '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
    - '<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">',
    - '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
    - a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
    - (typeof(a.checked) != "undefined") ? (a.checked ? '<input type="checkbox" checked="checked />' : '<input type="checkbox" />') : "",
    - '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
    - "</div>"];
    - for(var i = 1, len = cols.length; i < len; i++){
    - c = cols[i];
    + renderElements : function(n, a, targetNode, bulkRender){
    + this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

    - buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
    - '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
    - "</div>");
    - }
    - buf.push(
    - '<div class="x-clear"></div></div>',
    - '<ul class="x-tree-node-ct" style="display:none;"></ul>',
    - "</li>");
    + var t = n.getOwnerTree();
    + var cols = t.columns;
    + var bw = t.borderWidth;
    + var c = cols[0];
    + var cb = typeof a.checked == 'boolean';

    - if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
    - this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
    - n.nextSibling.ui.getEl(), buf.join(""));
    - }else{
    - this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
    - }
    + var buf = [
    + '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
    + '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
    + '<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">',
    + '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
    + a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
    + (typeof(a.checked) != "undefined") ? (a.checked ? '<input class="x-tree-node-cb" type="checkbox" checked="checked />' : '<input class="x-tree-node-cb" type="checkbox" />') : "",
    + '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
    + "</div>"];
    + for(var i = 1, len = cols.length; i < len; i++){
    + c = cols[i];

    - this.elNode = this.wrap.childNodes[0];
    - this.ctNode = this.wrap.childNodes[1];
    - var cs = this.elNode.firstChild.childNodes;
    - this.indentNode = cs[0];
    - this.ecNode = cs[1];
    - this.iconNode = cs[2];
    - this.anchor = cs[3];
    - this.textNode = cs[3].firstChild;
    - }
    -});
    \ No newline at end of file
    + buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
    + '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
    + "</div>");
    + }
    + buf.push(
    + '<div class="x-clear"></div></div>',
    + '<ul class="x-tree-node-ct" style="display:none;"></ul>',
    + "</li>");
    +
    + if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
    + this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
    + n.nextSibling.ui.getEl(), buf.join(""));
    + }else{
    + this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
    + }
    +
    + this.elNode = this.wrap.childNodes[0];
    + this.ctNode = this.wrap.childNodes[1];
    + var cs = this.elNode.firstChild.childNodes;
    + this.indentNode = cs[0];
    + this.ecNode = cs[1];
    + this.iconNode = cs[2];
    + this.anchor = cs[3];
    + this.textNode = cs[3].firstChild;
    + if(cb){
    + this.checkbox = cs[3];
    + this.checkbox.defaultChecked = this.checkbox.checked;
    + }
    + }
    +});

    Property changes on: ColumnNodeUI.js
    ___________________________________________________________________
    Added: svn:keywords
    + Id Author Version
    Deleted: svn:executable
    - *

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    9
    Vote Rating
    0
    swunderlin is on a distinguished road

      0  

    Default


    ColumnNodeUI does (unfortunately) change the dom. Most methods in ColumnNodeUI are inherited from TreeNodeUI, these methods are not aware of the dom changes. My problem was solved by rewriting onCheckChange(). I am attaching a dif (-Nru style) patch file so you can see what I had to change in the DOM. FireBug and Mozillas Dom-Inspector were of great help!

    Kind regards,
    -S

    Code:
    Index: ColumnNodeUI.js
    ===================================================================
    --- ColumnNodeUI.js	(revision 8)
    +++ ColumnNodeUI.js	(working copy)
    @@ -4,6 +4,10 @@
      * licensing@extjs.com
      * 
      * http://extjs.com/license
    + *
    + * @Author Ext JS Team
    + * @Author $Author$
    + * @Version $Id$
      */
     
     Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
    @@ -33,59 +37,82 @@
             }
             this.headers.createChild({cls:'x-clear'});
             // prevent floats from wrapping when clipped
    +        // alert(totalWidth)
             this.headers.setWidth(totalWidth);
             this.innerCt.setWidth(totalWidth);
         }
     });
     
     Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
    -    focus: Ext.emptyFn, // prevent odd scrolling behavior
    +	focus: Ext.emptyFn, // prevent odd scrolling behavior
     
    -    renderElements : function(n, a, targetNode, bulkRender){
    -        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
    +	toggleCheck : function(value){
    +		var cb = this.checkbox.firstChild;
    +		if(cb){
    +			cb.checked = (value === undefined ? !cb.checked : value);
    +			this.onCheckChange();
    +		}
    +	},
     
    -        var t = n.getOwnerTree();
    -        var cols = t.columns;
    -        var bw = t.borderWidth;
    -        var c = cols[0];
    +	onCheckChange : function(){
    +		var checked = this.checkbox.firstChild.checked;
    +		
    +		if (typeof(this.checkbox.firstChild.defaultChecked) == "undefined")
    +			this.checkbox.firstChild.defaultChecked = checked;
    +		this.node.attributes.checked = checked;
    +		this.fireEvent('checkchange', this.node, checked);
    +	},
     
    -        var buf = [
    -             '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
    -                '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
    -                    '<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">',
    -                    '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
    -                    a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
    -                    (typeof(a.checked) != "undefined") ? (a.checked ? '<input type="checkbox" checked="checked />' : '<input type="checkbox" />') : "", 
    -                    '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
    -                "</div>"];
    -         for(var i = 1, len = cols.length; i < len; i++){
    -             c = cols[i];
    +	renderElements : function(n, a, targetNode, bulkRender){
    +			this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
     
    -             buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
    -                        '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
    -                      "</div>");
    -         }
    -         buf.push(
    -            '<div class="x-clear"></div></div>',
    -            '<ul class="x-tree-node-ct" style="display:none;"></ul>',
    -            "</li>");
    +			var t = n.getOwnerTree();
    +			var cols = t.columns;
    +			var bw = t.borderWidth;
    +			var c = cols[0];
    +			var cb = typeof a.checked == 'boolean';
     
    -        if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
    -            this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
    -                                n.nextSibling.ui.getEl(), buf.join(""));
    -        }else{
    -            this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
    -        }
    +			var buf = [
    +					 '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
    +							'<div class="x-tree-col" style="width:',c.width-bw,'px;">',
    +									'<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">',
    +									'<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
    +									a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
    +									(typeof(a.checked) != "undefined") ? (a.checked ? '<input class="x-tree-node-cb" type="checkbox" checked="checked />' : '<input class="x-tree-node-cb" type="checkbox" />') : "",
    +									'<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
    +							"</div>"];
    +			 for(var i = 1, len = cols.length; i < len; i++){
    +					 c = cols[i];
     
    -        this.elNode = this.wrap.childNodes[0];
    -        this.ctNode = this.wrap.childNodes[1];
    -        var cs = this.elNode.firstChild.childNodes;
    -        this.indentNode = cs[0];
    -        this.ecNode = cs[1];
    -        this.iconNode = cs[2];
    -        this.anchor = cs[3];
    -        this.textNode = cs[3].firstChild;
    -    }
    -});
    \ No newline at end of file
    +					 buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
    +											'<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
    +										"</div>");
    +			 }
    +			 buf.push(
    +					'<div class="x-clear"></div></div>',
    +					'<ul class="x-tree-node-ct" style="display:none;"></ul>',
    +					"</li>");
    +
    +			if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
    +					this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
    +															n.nextSibling.ui.getEl(), buf.join(""));
    +			}else{
    +					this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
    +			}
    +
    +			this.elNode = this.wrap.childNodes[0];
    +			this.ctNode = this.wrap.childNodes[1];
    +			var cs = this.elNode.firstChild.childNodes;
    +			this.indentNode = cs[0];
    +			this.ecNode = cs[1];
    +			this.iconNode = cs[2];
    +			this.anchor = cs[3];
    +			this.textNode = cs[3].firstChild;
    +			if(cb){
    +					this.checkbox = cs[3];
    +					this.checkbox.defaultChecked = this.checkbox.checked;
    +			}
    +	}
    +});
    
    Property changes on: ColumnNodeUI.js
    ___________________________________________________________________
    Added: svn:keywords
       + Id Author Version
    Deleted: svn:executable
       - *

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    9
    Vote Rating
    0
    swunderlin is on a distinguished road

      0  

    Default


    yes, i am not sure if this works, since my posts do not appear.

  8. #8
    Ext User
    Join Date
    May 2009
    Posts
    214
    Vote Rating
    0
    Maxrunner is on a distinguished road

      0  

    Default


    Quote Originally Posted by swunderlin View Post
    yes, i am not sure if this works, since my posts do not appear.
    well apparently the togglecheckbox wont work if the checkbox is in the second column.....if you put it in the second column you have to manually change the html checkbox status:

    Code:
    Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, { 
        lines:false, 
        borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell 
        cls:'x-column-tree', 
         
        onRender : function(){ 
            Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments); 
            this.headers = this.body.createChild( 
                {cls:'x-tree-headers'},this.innerCt.dom); 
     
            var cols = this.columns, c; 
            var totalWidth = 0; 
     
            for(var i = 0, len = cols.length; i < len; i++){ 
                 c = cols[i]; 
                 totalWidth += c.width; 
                 this.headers.createChild({ 
                     cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''), 
                     cn: { 
                         cls:'x-tree-hd-text', 
                         html: c.header 
                     }, 
                     style:'width:'+(c.width-this.borderWidth)+'px;' 
                 }); 
            } 
            this.headers.createChild({cls:'x-clear'}); 
            // prevent floats from wrapping when clipped 
            // alert(totalWidth) 
            this.headers.setWidth(totalWidth); 
            this.innerCt.setWidth(totalWidth); 
        } 
    }); 
     
    Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, { 
        focus: Ext.emptyFn, // prevent odd scrolling behavior 
     
        toggleCheck : function(value){ 
            var cb = this.checkbox.firstChild; 
            if(cb){ 
                cb.checked = (value === undefined ? !cb.checked : value); 
                this.onCheckChange(); 
            } 
        }, 
     
        onCheckChange : function(){ 
            var checked = this.checkbox.firstChild.checked; 
             
            if (typeof(this.checkbox.firstChild.defaultChecked) == "undefined") 
                this.checkbox.firstChild.defaultChecked = checked; 
            this.node.attributes.checked = checked; 
            this.fireEvent('checkchange', this.node, checked); 
        }, 
     
        renderElements : function(n, a, targetNode, bulkRender){ 
                this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : ''; 
     
                var t = n.getOwnerTree(); 
                var cols = t.columns; 
                var bw = t.borderWidth; 
                var c = cols[0]; 
                var cb = typeof a.checked == 'boolean'; 
     
                var buf = [ 
                         '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">', 
                                '<div class="x-tree-col" style="width:',c.width-bw,'px;">', 
                                        '<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">', 
                                        '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ', 
                                        a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>', 
                                       //take the checkbox to next column
                                        '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>", 
                                "</div>"]; 
                 for(var i = 1, len = cols.length; i < len; i++){ 
                         c = cols[i]; 
     
                         buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">', 
                                                '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),
     (typeof(a.checked) != "undefined") ? (a.checked ? '<input class="x-tree-node-cb" type="checkbox" checked="checked />' : '<input class="x-tree-node-cb" type="checkbox" />') : "", 
    "</div>", 
                                            "</div>"); 
                 } 
                 buf.push( 
                        '<div class="x-clear"></div></div>', 
                        '<ul class="x-tree-node-ct" style="display:none;"></ul>', 
                        "</li>"); 
     
                if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){ 
                        this.wrap = Ext.DomHelper.insertHtml("beforeBegin", 
                                                                n.nextSibling.ui.getEl(), buf.join("")); 
                }else{ 
                        this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join("")); 
                } 
     
                this.elNode = this.wrap.childNodes[0]; 
                this.ctNode = this.wrap.childNodes[1]; 
                var cs = this.elNode.firstChild.childNodes; 
                this.indentNode = cs[0]; 
                this.ecNode = cs[1]; 
                this.iconNode = cs[2]; 
                this.anchor = cs[3]; 
                this.textNode = cs[3].firstChild; 
                if(cb){ 
                        this.checkbox = cs[3]; 
                        this.checkbox.defaultChecked = this.checkbox.checked; 
                } 
        } 
    });

  9. #9
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    9
    Vote Rating
    0
    swunderlin is on a distinguished road

      0  

    Default


    I have only overridden onCheckChange() and toggleCheck() to reflect the DOM changes in ColumnNodeUI. This was for Ext 2.1/2.2 and with the above patch I was able to toggle a checkbox with javascript like this:

    Code:
    var nn = treepanel.getNodeById(checkboxnodes[i]);
    nn.getUI().toggleCheck(true);
    Reading the values worked like this:
    Code:
    var chk = treepanel.getChecked("id", treepanel.getRootNode());
    for (var i=0; i<chk.length; i++){
    	var n = treepanel.getNodeById(chk[i]); // n holds an object of this particular row
    	// n.attributes.your_column_name
    }
    This gives a list of all checked checkboxes, you can easily extract (for example) the id of a row as long as the id value is in your data model.

  10. #10
    Ext User
    Join Date
    May 2009
    Posts
    214
    Vote Rating
    0
    Maxrunner is on a distinguished road

      0  

    Default


    Quote Originally Posted by swunderlin View Post
    I have only overridden onCheckChange() and toggleCheck() to reflect the DOM changes in ColumnNodeUI. This was for Ext 2.1/2.2 and with the above patch I was able to toggle a checkbox with javascript like this:

    Code:
    var nn = treepanel.getNodeById(checkboxnodes[i]);
    nn.getUI().toggleCheck(true);
    Reading the values worked like this:
    Code:
    var chk = treepanel.getChecked("id", treepanel.getRootNode());
    for (var i=0; i<chk.length; i++){
    	var n = treepanel.getNodeById(chk[i]); // n holds an object of this particular row
    	// n.attributes.your_column_name
    }
    This gives a list of all checked checkboxes, you can easily extract (for example) the id of a row as long as the id value is in your data model.
    What i wanted to do was to expand child nodes and check them all. For some reason if i let the checkbox in the first column it will work, but not if i put it in the second column......this has to be more simple that that.....i think...

Thread Participants: 1