PDA

View Full Version : [2.0] Ext.ux.CheckColumnTreePanel



KRavEN
6 Dec 2007, 10:45 AM
Just a small addition to Jack's Ext.tree.ColumnTree from the examples that adds checkboxes to the end of the rows.
I tried to keep it consistent with the regular tree checkbox functionality.

To turn on checkboxes add a "checked:true" to the root config of the panel. For the json row data you can add "checked:true" or false to each record to set it's checked state.

Added 2 new config options: checkColHeader and checkColWidth.
checkColHeader defaults to 'Add'.
checkColWidth defaults to 35.

It should be a dropin replacement in the ColumnTree example.


Ext.ux.CheckColumnTreePanel = Ext.extend(Ext.tree.TreePanel, {
lines:false,
borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
cls:'x-column-tree',
checkColHeader:'Add',
checkColWidth:35,

onRender : function(){
Ext.ux.CheckColumnTreePanel.superclass.onRender.apply(this, arguments);
this.headers = this.body.createChild(
{cls:'x-tree-headers'},this.innerCt.dom);

var cb = typeof this.root.attributes.checked == 'boolean';

var cols = this.columns, c;
var totalWidth = 0;

if(cb)cols.push({
header:this.checkColHeader,
width:this.checkColWidth
});

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

Ext.ux.CheckColumnNodeUI = 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 = typeof t.root.attributes.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+'"' : "", '>',
'<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">',(cb&i==cols.length-1?'<input class="x-tree-node-cb" type="checkbox" '+(a.checked ? 'checked="checked" />' : '/>'):(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];
index++;
}
this.anchor = cs[3];
this.textNode = cs[3].firstChild;
}
});

KRavEN
13 Dec 2007, 10:39 AM
New version to fix a bug with getChecked();


Ext.ux.CheckColumnTreePanel = Ext.extend(Ext.tree.TreePanel, {
lines:false,
borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
cls:'x-column-tree',
checkColHeader:'Add',
checkColWidth:30,

onRender : function(){
Ext.ux.CheckColumnTreePanel.superclass.onRender.apply(this, arguments);
this.headers = this.body.createChild(
{cls:'x-tree-headers'},this.innerCt.dom);

var cb = typeof this.root.attributes.checked == 'boolean';

var cols = this.columns, c;
var totalWidth = 0;

if(cb)cols.push({
header:this.checkColHeader,
width:this.checkColWidth
});

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

Ext.ux.CheckColumnNodeUI = 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 = typeof t.root.attributes.checked == 'boolean';
t.root.attributes.checked = false;


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+'"' : "", '>',
'<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">',(cb&i==cols.length-1?'<input class="x-tree-node-cb" type="checkbox" '+(a.checked ? 'checked="checked" />' : '/>'):(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];
if(cb) this.checkbox =this.elNode.childNodes[4].firstChild.firstChild;
this.anchor = cs[3];
this.textNode = cs[3].firstChild;
}
});

SilveR316
13 Dec 2007, 11:38 AM
Can you throw up a quick demo or screenshot of how it looks?

KRavEN
13 Dec 2007, 11:46 AM
Looks just like this: http://extjs.com/deploy/dev/examples/tree/column-tree.html
with a column added on the right with a checkbox for each row.

KRavEN
14 Dec 2007, 1:16 PM
New change to make the checkboxes look like the grid CheckboxSelectionModel

Ext.ux.CheckColumnTreePanel = Ext.extend(Ext.tree.TreePanel, {
lines : false,
borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border
// for each cell
cls : 'x-column-tree',
checkColHeader : 'Add',
checkColWidth : 30,

onRender : function() {
Ext.ux.CheckColumnTreePanel.superclass.onRender.apply(this,
arguments);
this.headers = this.body.createChild( {
cls : 'x-tree-headers'
}, this.innerCt.dom);

var cb = typeof this.root.attributes.checked == 'boolean';

var cols = this.columns, c;
var totalWidth = 0;

if (cb)
cols.push( {
header : this.checkColHeader,
width : this.checkColWidth
});

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

Ext.ux.CheckColumnNodeUI = 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 = typeof t.root.attributes.checked == 'boolean';
t.root.attributes.checked = false;

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 + '"'
: "",
'>',
'<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">',
(cb & i == cols.length - 1
? '<div class="x-tree-col-checker'
+ (a.checked
? ' x-tree-col-checked'
: '"> </div>')
: (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];
if (cb)
this.checkbox = this.elNode.childNodes[4].firstChild.firstChild;
this.anchor = cs[3];
this.textNode = cs[3].firstChild;
},

onClick : function(e) {
if (e.target.className == 'x-tree-col-checker') {
e.stopEvent();
var hd = Ext.fly(e.target.parentNode);
var isChecked = hd.hasClass('x-tree-col-checked');
if (isChecked) {
hd.removeClass('x-tree-col-checked');
this.node.attributes.checked = false;
this.fireEvent('checkchange', this.node, false);
} else {
hd.addClass('x-tree-col-checked');
this.node.attributes.checked = true;
this.fireEvent('checkchange', this.node, true);
}
}
if (this.dropping) {
e.stopEvent();
return;
}
if (this.fireEvent("beforeclick", this.node, e) !== false) {
var a = e.getTarget('a');
if (!this.disabled && this.node.attributes.href
&& a) {
this.fireEvent("click", this.node, e);
return;
} else if (a && e.ctrlKey) {
e.stopEvent();
}
e.preventDefault();
if (this.disabled) {
return;
}

if (this.node.attributes.singleClickExpand
&& !this.animating
&& this.node.hasChildNodes()) {
this.node.toggle();
}

this.fireEvent("click", this.node, e);
} else {
e.stopEvent();
}
}
});

and the css

.x-tree-col-text .x-tree-col-checker {
background-position: 2px 50%;
}

.x-tree-col-checker {
background-color: transparent;
background-image:
url(extjs/resources/images/default/grid/row-check-sprite.gif)
;
background-position: 2px;
background-repeat: no-repeat;
height: 18px;
width: 100%;
}

.x-tree-col .x-tree-col-checked .x-tree-col-checker {
background-position: -23px 2px;
}
Sorry about the formatting. My javascript autoformatter went crazy and I havn't fixed it yet.

tufi
17 Jan 2008, 6:38 PM
hi KRavEN,

i tried to test your code; but i get an error at line:

if(cb) this.checkbox =this.elNode.childNodes[4].firstChild.firstChild;

this.elNode.childNodes[4] is null or has no properties.

as i debugged, i found out that, this.elNode.childNodes had only the keys 0,1,2.
if i change the line to:

if(cb) this.checkbox =this.elNode.childNodes[this.elNode.childNodes.length-1].firstChild.firstChild;

i get another error:
this.checkbox has no properties (ext-all.js (line 104))

my code was:



var treeCat = new Ext.ux.CheckColumnTreePanel({
checked:true,
columns: [{
header:'Kategorie',
width:200,
dataIndex:'text'
}/*,{
header:'Online',
width:50,
dataIndex:'online'
}*/],
loader: new Ext.tree.TreeLoader(
{
dataUrl:'http://localhost:8080/test_project/getNodes',
baseParams: {
whichTree:'extracted',
onlyDirs: 'false',
onlyFiles: 'false'
},
uiProviders:{
'col': Ext.ux.CheckColumnNodeUI
}
}
),
animate:true,
enableDD:true,
containerScroll: true,
ddGroup: 'organizerDD',
rootVisible:false,
// layout
region:'east',
width:250,
split:true,
// panel
title:'Kategorien in der Datenbank',
autoScroll:true,
tbar: tb,
margins: '5 5 5 0'
});

var rootCat = new Ext.tree.AsyncTreeNode({
text: 'Extracted',
id:'root',
allowDrag:false,
checked:true,
allowDrop:true
});

treeCat.setRootNode(rootCat);


would be great, if you can take a look at that, and tell me if i did something wrong..

thx..

PS: how could i gain access to the check-event on a checkbox? (I would like to make a database update in dependence of the node-id...)

tufi
18 Jan 2008, 5:23 AM
as i just read this posting about a bug in the grid plugin (http://http://extjs.com/forum/showthread.php?p=109889#post109889) and the bug-fix (http://extjs.com/forum/showthread.php?p=108585#post108585) i found out that, also in this example double quotes are used. Can this be the reason for the error? (I did have not have the possibility to try it out until now. I will post the results, after I tried it)

ereasoning
10 Feb 2008, 1:07 AM
Hi ,
Am new to ExtJs, with the kind of feed back i would like to try this great library.
I tried the example given(http://crepitus.com/misc/ext/tree.html) with some modifications I did and I migrated it to extjs2.0,


with the example given i was able to make a simple tree with checkboxes .
i gave u the code
my webaplication Architecture like this


webapps/Example /images/default/s.gif,
/js /ext-base.js, ext-all.js, examples.js, customecheckbox.js
/html/index.html,
/jsp/GetData.jsp

This is my first page index.html


<html> <head><title> Products</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!— CSS -->
<head>
<link rel="stylesheet" type="text/css" href="../css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../css/examples.css" />

<script type="text/javascript" src="../js/ext-base.js"></script>
<script type="text/javascript" src="../js/ext-all.js"></script>
<script type="text/javascript" src="../js/examples.js"></script>
<script type="text/javascript" src="../js/customcheckbox.js"></script>
</head>
<script language=”javascript”>

Ext.BLANK_IMAGE_URL = '../images/default/s.gif';
var flag = false;
var childs = new Array();
var checks = new Array();
Ext.onReady(function(){
Var tree = new Ext.tree.TreePanel({
el:'tree-div',
autoScroll:true,
autoDestroy : true,
animate:true,
enableDD:false,
rootUIProvider: Ext.tree.CheckboxNodeUI,
containerScroll: true,
title: 'Library',
loader: new Ext.tree.CustomUITreeLoader({
dataUrl:'../jsp/GetData.jsp',
baseAttr: {
uiProvider: Ext.tree.CheckboxNodeUI
}
})

});

var root = new Ext.tree.AsyncTreeNode({
text: 'Library',
draggable: false,
id:'NA'
uiProvider: Ext.tree.CheckboxNodeUI
});

tree.setRootNode(root);
tree.render();
root.expand();
};
</script>



<body>

<div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;">
</div>

</body>
</html>

And GetData.jsp written like this:


<%= “[{ text:'.Net Books',expanded:false,'checked':false,
children:[ {text:'ASP', leaf:true,checked:false}, {text:'C#', leaf:true,checked:false} ]},
{text:'Java Books',expanded:false,'checked':false,
children:[{text:'Advanced Technologies',leaf:false,checked:false,
children:[ {text:'JSP',leaf:true,checked:false},
{text:'JDBC',leaf:true,checked:false},
{text:'Sevlets',leaf:true,checked:false} ]},
{text:'EJB',leaf:false,checked:false,
children:[ {text:'SessionBean',leaf:false,checked:false, children:[ {text:'Stateful',leaf:true},{text:'Stateless',leaf:true} ]},
{text:'EntityBean',leaf:false,checked:false,children:[{text:'CMP', leaf:true},{text:'BMP', leaf:true}]},
{text:'MessageDrivenBean',leaf:true,checked:false }
]}
]}]” %>

Javascript file: customcheckbox.js

Ext.tree.TreePanel.prototype.getChecked = function(node){
var checked = [], i;
if( typeof node == 'undefined' ) {
node = this.rootVisible ? this.getRootNode() : this.getRootNode().firstChild;
}
if( node.attributes.checked ) {
checked.push(node.id);
if( !node.isLeaf() ) {
for( i = 0; i < node.childNodes.length; i++ ) {
checked = checked.concat( this.getChecked(node.childNodes[i]) );
}
}
}
return checked;
};

Ext.tree.CustomUITreeLoader = function() {

Ext.tree.CustomUITreeLoader.superclass.constructor.apply(this, arguments);
};

Ext.extend(Ext.tree.CustomUITreeLoader, Ext.tree.TreeLoader, {
createNode : function(attr){
Ext.apply(attr, this.baseAttr || {});

if(this.applyLoader !== false){
attr.loader = this;
}

if(typeof attr.uiProvider == 'string'){
attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider);
}
return(attr.leaf ?new Ext.tree.TreeNode(attr) :new Ext.tree.AsyncTreeNode(attr));
}
});

Ext.tree.CheckboxNodeUI = function() {
Ext.tree.CheckboxNodeUI.superclass.constructor.apply(this, arguments);
};

Ext.extend(Ext.tree.CheckboxNodeUI, Ext.tree.TreeNodeUI, {
render : function(bulkRender){
var n = this.node;
var targetNode = n.parentNode ?
n.parentNode.ui.getContainer() : n.ownerTree.container.dom; if(!this.rendered){
this.rendered = true;
var a = n.attributes;

this.indentMarkup = "";
if(n.parentNode){
this.indentMarkup = n.parentNode.ui.getChildIndent();
}

// modification: added checkbox
var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', n.attributes.cls,'">',
'<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon">',
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
'<input class="l-tcb" type="checkbox" ', (a.checked ? 'checked="checked" />' : '/>'),
'<a hidefocus="on" href="',a.href ? a.href : "#",'" ',
a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
'<span unselectable="on">',n.text,"</span></a></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.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];

this.checkbox = cs[3]; // modification: inserted checkbox
this.anchor = cs[4];
this.textNode = cs[4].firstChild;
if(a.qtip){
if(this.textNode.setAttributeNS){
this.textNode.setAttributeNS("ext", "qtip", a.qtip);
if(a.qtipTitle){
this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
}
}else{
this.textNode.setAttribute("ext:qtip", a.qtip);
if(a.qtipTitle){
this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
}
}
} else if(a.qtipCfg) {
a.qtipCfg.target = Ext.id(this.textNode);
Ext.QuickTips.register(a.qtipCfg);
}

this.initEvents();

// modification: Add additional handlers here to avoid modifying Ext.tree.TreeNodeUI
Ext.fly(this.checkbox).on('click', this.check.createDelegate(this, [null]));



n.on('dblclick', function(e) {
if( this.isLeaf() ) {
this.getUI().toggleCheck();
}
});

if(!this.node.expanded){
this.updateExpandIcon();
}
}else{
if(bulkRender === true) {
targetNode.appendChild(this.wrap);
}
}
},

checked : function() {

return this.checkbox.checked;
},


check : function(state, descend, bulk) {
var n = this.node;
var tree = n.getOwnerTree();
var parentNode = n.parentNode;

if(( !n.expanded && !n.childrenRendered)|| state==false ) {
n.expand(false, false);
}else { //Modification done here , when any one of the checkbox is unchecked all of its siblings checkboxes automatically unchecked
n.collapse(false,false);
n.expanded=false;
n.childrenRendered=false;
state=false;
var cs = n.childNodes;
for(var i = 0; i < cs.length; i++) {
cs[i].getUI().check(state, true, true);
}

}


if( typeof state == 'undefined' || state === null ) {
state = this.checkbox.checked;

descend = !state;
if( state && !n.isLeaf() ) {
var cs = n.childNodes;
for(var i = 0; i < cs.length; i++) {
cs[i].getUI().check(state, true, true);
}

n.parentNode.checked = state;
}
}

else {
this.checkbox.checked = state;
}

n.attributes.checked = state;

if( descend && !n.isLeaf() ) {
var cs = n.childNodes;
for(var i = 0; i < cs.length; i++) {
cs[i].getUI().check(state, true, true);
}
}

},

toggleCheck : function(state) {
this.check(!this.checkbox.checked, state);
}


});


This is the output generated from the above code

http://crepitus.com/misc/ext/tree.html

razvanpandor
14 Apr 2008, 3:44 PM
Looks just like this: http://extjs.com/deploy/dev/examples/tree/column-tree.html
with a column added on the right with a checkbox for each row.

hey KRavEN i tryed your code and my first node doesnt get a checkbox. can you please explain to me why. and what it is to be changed so that the first node will get a checkbox too. cheers

ManuW
19 May 2008, 2:44 AM
Hey there,
when I click on a checkbox, I get an error

this.checkbox has no properties (ext-all-debug.js (line 23386))
- var checked = this.checkbox.checked;

What did I forget?

Thanks in advance.
Sincerely,
-Manuel