Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Nov 2009
    Location
    London
    Posts
    49
    Vote Rating
    6
    mattgoldspink is on a distinguished road

      0  

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

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


    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;

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

Similar Threads

  1. Ext.tree: reset Treeloader & render Tree without pageref
    By oxi in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 23 Jan 2010, 12:15 AM
  2. {ISSUE} - open tree using key rigth render problem in a item selected
    By diegolovison in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 29 Oct 2009, 9:11 AM
  3. set href property in ColumnNodeUI object in tree column
    By davidzenou in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 16 Aug 2009, 7:17 PM
  4. Disabled checkboxes in Ext.tree
    By spiderweb in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 7 Aug 2009, 4:31 AM
  5. [SOLVED] Checkboxes will not show in my Tree (Ext 2.2)
    By skaue in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 12 Sep 2008, 1:06 AM

Thread Participants: 1