[OPEN-1326] Ext.ux.tree.ColumnNodeUI does not render checkboxes

**mattgoldspink** · 13 Oct 2010 7:57 AM

Ext version tested:

Ext 3.3.0
Ext 3.2.2

Adapter used:

ext

css used:

only default ext-all.css

Browser versions tested against:

IE8
FF3.6
Chrome 5

Operating System:

WinXP Pro

Description:

The ColumnNodeUI does not render a checkbox if the tree data contains checked property. Removing the ColumnNodeUI will render the checkbox but not the fields in the correct columns

Test Case:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta content="text/html; charset=UTF-8" http-equiv="content-type"/> 
    <title>Ext.ux.tree.ColumnTree</title> 
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> 
    <script type="text/javascript" src="adapter/ext/ext-base-debug.js"></script> 
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript" src="ux/ColumnNodeUI.js"></script>
    <link rel="stylesheet" type="text/css" href="ux/css/ColumnNodeUI.css" />
    <script type="text/javascript" charset="utf-8"> 
        Ext.onReady(function(){ 
            new Ext.ux.tree.ColumnTree({
                checkModel:        'multiple',
                rootVisible:       false,
                onlyLeafCheckable: false,
                tools: [],
                columns: [
                 { header: '', width: 200, dataIndex: 'text'},
                 { header: 'Time', width: 200, dataIndex: 'time', renderer: Ext.util.Format.numberRenderer('0000.00h')}
                ],
                root: {
                  text: 'Root',
                  children: [{
                    text: 'To Do', 
                    cls: 'folder',
                    time: 100,
                    uiProvider: Ext.ux.tree.ColumnNodeUI,
                    children: [{
                        text: 'Go jogging',
                        time: 100,
                        leaf: true,
                        uiProvider: Ext.ux.tree.ColumnNodeUI,
                        checked: false
                    },{
                        text: 'Take a nap',
                        time: 100,
                        leaf: true,
                        uiProvider: Ext.ux.tree.ColumnNodeUI,
                        checked: false
                    },{
                        text: 'Climb Everest',
                        time: 100,
                        leaf: true,
                        uiProvider: Ext.ux.tree.ColumnNodeUI,
                        checked: false
                    }]
                }]
                }
            }).render('tree');        
        });
    
    </script> 
</head> 
<body> 
  <div id='tree'></div> 
</body> 
</html>

Steps to reproduce the problem:

See above example and expand the root node

The result that was expected:

Checkbox should appear next to all leaf nodes

The result that occurs instead:

No checkboxes are rendered

Debugging already done:

See fix below

Possible fix:
Here is a modified version of the ColumnNodeUI.js file which works:

Code:

/*!
 * Ext JS Library 3.3.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux.tree');

/**
 * @class Ext.ux.tree.ColumnTree
 * @extends Ext.tree.TreePanel
 *
 * @xtype columntree
 */
Ext.ux.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.header.createChild({cls:'x-tree-headers'});

        var cols = this.columns, c;
        var totalWidth = 0;
        var scrollOffset = 19; // similar to Ext.grid.GridView default

        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
        this.headers.setWidth(totalWidth+scrollOffset);
        this.innerCt.setWidth(totalWidth);
    }
});

Ext.reg('columntree', Ext.ux.tree.ColumnTree);

//backwards compat
Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;


/**
 * @class Ext.ux.tree.ColumnNodeUI
 * @extends Ext.tree.TreeNodeUI
 */
Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
    focus: Ext.emptyFn, // prevent odd scrolling behavior

    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 = Ext.isBoolean(a.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">',
                    cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
                    '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
                    a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
                    '<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]),"</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];

        var index = 3;
        if(cb){
            this.checkbox = cs[3];
            // fix for IE6
            this.checkbox.defaultChecked = this.checkbox.checked;
            index++;
        }
        this.anchor = cs[index];
        this.textNode = cs[index].firstChild;
    }
});

//backwards compat
Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;

**Condor** · 13 Oct 2010 8:04 AM

Probably more a feature request than a bug and also reported before, but I'll leave the post up, because it includes the suggested fix.

[OPEN-1326] Ext.ux.tree.ColumnNodeUI does not render checkboxes

Thread Tools

Search Thread

Display

[OPEN-1326] Ext.ux.tree.ColumnNodeUI does not render checkboxes

[OPEN-1326] Ext.ux.tree.ColumnNodeUI does not render checkboxes

Similar Threads

Ext.tree: reset Treeloader & render Tree without pageref

{ISSUE} - open tree using key rigth render problem in a item selected

set href property in ColumnNodeUI object in tree column

Disabled checkboxes in Ext.tree

[SOLVED] Checkboxes will not show in my Tree (Ext 2.2)