PDA

View Full Version : questions regarding TreePanel with CheckBoxes



adhoul
28 Jun 2010, 11:49 PM
Hello,

Starting from the ExtJs example at the page http://www.sencha.com/deploy/dev/examples/tree/check-tree.html where a TreePanel has checkboxes,

I want to Override the TreePanel, and add the same behaviour as the one mentioned in the above example, for all TreePanels

the problem is that on the example where the listeners and the handlers are being implemented



listeners: {
'checkchange': function(node, checked){
if(checked){
node.getUI().addClass('complete');
}else{
node.getUI().removeClass('complete');
}
}
},

buttons: [{
text: 'Get Completed Tasks',
handler: function(){
var msg = '', selNodes = tree.getChecked();
Ext.each(selNodes, function(node){
if(msg.length > 0){
msg += ', ';
}
msg += node.text;
});
Ext.Msg.show({
title: 'Completed Tasks',
msg: msg.length > 0 ? msg : 'None',
icon: Ext.Msg.INFO,
minWidth: 200,
buttons: Ext.Msg.OK
});
}
}]
});


the Tree is being created and being given to a variable (var tree) thus everything is referenced as tree.getChecked() etc..

But when I Override it, this.getChecked does not work, as it says "this.getChecked is not a function".. so the question is how can i reference the TreePanel if this does not work and i can not define it in a var?

thank you in advance

Animal
28 Jun 2010, 11:56 PM
Show code.

adhoul
29 Jun 2010, 1:04 AM
there is not much code to show, as the code i've used comes from the example i've mentioned above.

the problem i have is that in this example (as you can see if you can follow the link) it defines the tree as

var tree = new Ext.tree.TreePanel whereas if one overrides the TreePanel theres is no direct way to refer to the TreePanel itself, as the operator "this" does not work, so I was wondering what I should add to refer to the Overriden TreePanel.

Hope I've made my self a bit more clear

thanks again animal

Animal
29 Jun 2010, 1:06 AM
I've seen the example code, and that doesn't help me help you.

If you won't show your code that doesn't work, we just cannot help.

adhoul
29 Jun 2010, 1:45 AM
there you go. i know i'm doing quite a lot of things wrong, don't know how to fix it



Ext.override(Ext.tree.TreePanel, {
maxWidth : 600,
useArrows : true,
autoScroll : true,
animate : true,
enableDD : true,
containerScroll : true,
buttonAlign : 'left',
rootVisible : true,
frame : false,
border : false,
nodeType : 'async',
dataUrl : 'AltDocTreePanel.json',
text : 'Document Types',
root : {
nodeType : 'async',
text : 'WTF',
children : json
},
listeners : {
'checkchange' : function(node, checked) {
if (checked) {
node.getUI().addClass('complete');
} else {
node.getUI().removeClass('complete');
}
}
},
buttons : [ {
text : 'Preview',
handler : function() {
var msg = '', selNodes = this.getChecked();
Ext.each(selNodes, function(node) {
if (msg.length > 0) {
msg += ', ';
}
msg += node.text;
});
Ext.Msg.show( {
title : 'Completed Tasks',
msg : msg.length > 0 ? msg : 'None',
icon : Ext.Msg.INFO,
minWidth : 200,
buttons : Ext.Msg.OK
});
}
}, {
text : 'Clear',
handler : function() {
var selNodes = this.getChecked();
Ext.each(selNodes, function(node) {
node.getUI().toggleCheck(false);
});
}
}, {
text : 'Enable',
handler : function() {
var selNodes = this.getChecked();
Ext.each(selNodes, function(node) {
node.enable();
});
}
}, {
text : 'Disable',
handler : function() {
var selNodes = this.getChecked();
Ext.each(selNodes, function(node) {
node.disable();
});
}
} ],
checkchange : function(node, checked) {
if (checked) {
this.node.getUI().addClass('selected');
} else {
this.node.getUI().removeClass('selected');
}
}
});

Animal
29 Jun 2010, 1:56 AM
"this" in the Button handler function is pointing at the Button.

You will have to use



handler : function() {
var tree = this.ownerCt.ownerCt; // up to Toolbar, then Panel.
msg = '',
selNodes = tree.getChecked();
Ext.each(selNodes, function(node) {
if (msg.length > 0) {
msg += ', ';
}
msg += node.text;
});
Ext.Msg.show( {
title : 'Completed Tasks',
msg : msg.length > 0 ? msg : 'None',
icon : Ext.Msg.INFO,
minWidth : 200,
buttons : Ext.Msg.OK
});
}

adhoul
29 Jun 2010, 2:07 AM
awesome animal thanks for your fast replies it works cheers