PDA

View Full Version : [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:


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


/*!
* 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.