PDA

View Full Version : Tree.TreePanel: how can i checked nodes recursively ?



mikeschthecat
1 Nov 2009, 11:57 AM
Hi,

i would like to checked all parent nodes when i mark a folder as checked.

How can i make this ?

Here is my code, is from the TreeTest Example with little modifications.

Best Regards
Stefan



var TreeTest = function(){
// shorthand
var Tree = Ext.tree;

return {
init : function(){
// yui-ext tree
var tree = new Tree.TreePanel({
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader({dataUrl:'/admin/restore/get-nodes-from-db.php'}),
enableDD:true,
containerScroll: true,
border: false,
dropConfig: {appendOnly:true},
frame: false,

// added by Mikesch BEGIN
getTreeEl : function(){
return this.body;
},

listeners: {
'checkchange': function(node, checked){
if(checked){
// this.body.setChecked(true, true);
}
// if(checked){
// node.getUI().addClass('complete');
// }else{
// node.getUI().removeClass('complete');
// }
}
},
// added by Mikesch END
//
// added by Mikesch BEGIN
buttons: [{
text: 'Restore marked Files/Folders',
handler: function(){
var msg = '', selNodes = tree.getChecked();
Ext.each(selNodes, function(node){
if(msg.length > 0){
msg += ', ';
}
msg += node.id;
});
Ext.Msg.show({
title: 'Files/Folders to Restore',
msg: msg.length > 0 ? msg : 'No Files/Folders for Restore selected',
icon: Ext.Msg.INFO,
minWidth: 200,
buttons: Ext.Msg.OK
});
}
}]
// added by Mikesch END

});

// add a tree sorter in folder mode
new Tree.TreeSorter(tree, {folderSort:true});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'ROOT=/',
draggable:false, // disable root node dragging
id:'src'
});

tree.setRootNode(root);

// render the tree
tree.render('tree');

root.expand(false, /*no anim*/ false);

//-------------------------------------------------------------

// YUI tree
var tree2 = new Tree.TreePanel({
animate:true,
autoScroll:true,
//rootVisible: false,
loader: new Ext.tree.TreeLoader({
dataUrl:'/admin/restore/get-nodes-from-db.php',
baseParams: {lib:'yui'} // custom http params
}),
containerScroll: true,
border: false,
enableDD:true,
dropConfig: {appendOnly:true}
});

// add a tree sorter in folder mode
new Tree.TreeSorter(tree2, {folderSort:true});

// add the root node
var root2 = new Tree.AsyncTreeNode({
text: 'Restore Files',
draggable:false,
id:'yui'
});
tree2.setRootNode(root2);
tree2.render('tree2');

root2.expand(false, /*no anim*/ false);
}
};
}();

Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

mikeschthecat
1 Nov 2009, 12:14 PM
Hi,

with that modifications, only the first parent node are marked as checked,
but this seams the right way to the target :-)

I Hope anyone have a heart and can help me to find the right way for this issue.

Best Regards
Stefan

P.S.: Changes are on the listeners: checkchange



var TreeTest = function(){
// shorthand
var Tree = Ext.tree;

return {
init : function(){
// yui-ext tree
var tree = new Tree.TreePanel({
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader({dataUrl:'/admin/restore/get-nodes-from-db.php'}),
enableDD:true,
containerScroll: true,
border: false,
dropConfig: {appendOnly:true},
frame: false,

// added by Mikesch BEGIN
listeners: {
checkchange: function(node, checked){
//var isChecked = checked;
node.eachChild(function(currentNode){
currentNode.ui.toggleCheck(checked)
});

var similarNodes = findAllSimilarNodes(this.root, 'text',node.text);

Ext.each(similarNodes,function(n){
// must suspend event to not trigger the checkchange listners
// and going in recursion
// BUG REPORT: function go in recursion;
// seems that suspendEvents() dont stop events propagation
// FIX: ext-all-debug.js line 1795 added ret = FALSE;
n.suspendEvents();
console.log('node',n);
n.ui.toggleCheck(checked);
n.resumeEvents();
});
}
},
// added by Mikesch END
//
// added by Mikesch BEGIN
buttons: [{
text: 'Restore marked Files/Folders',
handler: function(){
var msg = '', selNodes = tree.getChecked();
Ext.each(selNodes, function(node){
if(msg.length > 0){
msg += ', ';
}
msg += node.id;
});
Ext.Msg.show({
title: 'Files/Folders to Restore',
msg: msg.length > 0 ? msg : 'No Files/Folders for Restore selected',
icon: Ext.Msg.INFO,
minWidth: 200,
buttons: Ext.Msg.OK
});
}
}]
// added by Mikesch END

});

// add a tree sorter in folder mode
new Tree.TreeSorter(tree, {folderSort:true});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'ROOT=/',
draggable:false, // disable root node dragging
id:'src'
});

tree.setRootNode(root);

// render the tree
tree.render('tree');

root.expand(false, /*no anim*/ false);

//-------------------------------------------------------------

// YUI tree
var tree2 = new Tree.TreePanel({
animate:true,
autoScroll:true,
//rootVisible: false,
loader: new Ext.tree.TreeLoader({
dataUrl:'/admin/restore/get-nodes-from-db.php',
baseParams: {lib:'yui'} // custom http params
}),
containerScroll: true,
border: false,
enableDD:true,
dropConfig: {appendOnly:true}
});

// add a tree sorter in folder mode
new Tree.TreeSorter(tree2, {folderSort:true});

// add the root node
var root2 = new Tree.AsyncTreeNode({
text: 'Restore Files',
draggable:false,
id:'yui'
});
tree2.setRootNode(root2);
tree2.render('tree2');

root2.expand(false, /*no anim*/ false);
}
};
}();

Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);

mikeschthecat
2 Nov 2009, 1:07 PM
Hi all,

here now the actual Version.

If the Nodes expanded, the childnodes in this Node are now marked as checked.

Now i will find a way to expand automaticly the checked node with all Childnodes,
then mark all ChildNodes recursively as checked. This is my Goal :-)



/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/

var TreeTest = function(){
// shorthand
var Tree = Ext.tree;

return {
init : function(){

// define the custom find function
findAllSimilarNodes=function(root,attribute,value) {
var similarNodes = Array();
root.cascade(function(currentNode){
/*
* ONLY FOR DEBUGGING
* console.log(currentNode.attributes[attribute] == value);
*/
if(currentNode.attributes[attribute] == value){
similarNodes.push(currentNode);
}
})
}

// yui-ext tree
var tree = new Tree.TreePanel({
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader({dataUrl:'/admin/restore/get-nodes-from-db.php'}),
enableDD:true,
containerScroll: true,
border: false,
dropConfig: {appendOnly:true},
frame: false,

// added by Mikesch BEGIN
listeners: {
checkchange: function(node, checked){
//var isChecked = checked;

node.eachChild(function(currentNode){
child=node.childNodes;
for(var i=0;i<child.length;i++){
currentNode.ui.toggleCheck(checked);
}
});

var similarNodes = findAllSimilarNodes(this.root,'text',node.text);

Ext.each(similarNodes,function(n){
n.suspendEvents();
n.ui.toggleCheck(checked);
n.resumeEvents();
});
}
},
// added by Mikesch END

// added by Mikesch BEGIN
buttons: [{
text: 'Restore marked Files/Folders',
handler: function(){
var msg = '', selNodes = tree.getChecked();
Ext.each(selNodes, function(node){
if(msg.length > 0){
msg += ', ';
}
msg += node.id;
});
Ext.Msg.show({
title: 'Files/Folders to Restore',
msg: msg.length > 0 ? msg : 'No Files/Folders for Restore selected',
icon: Ext.Msg.INFO,
minWidth: 200,
buttons: Ext.Msg.OK
});
}
}]
// added by Mikesch END

});

// add a tree sorter in folder mode
new Tree.TreeSorter(tree, {folderSort:true});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'ROOT=/',
draggable:false, // disable root node dragging
id:'src'
});

tree.setRootNode(root);

// render the tree
tree.render('tree');

root.expand(false, /*no anim*/ false);
}
};
}();

Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);


Best Regards
Stefan

P.S.: The second Tree (tree2) is deaktivated for the testing Phase