[SOLVED] TreeNode checkchange IE7

[mandad]

In IE7, the checkchange event of TreeNodes with checkboxes are not properly firing correctly. The function attached to the event is just doing a test callback under ASP.net for now and it only seems to be triggered upon arbitrary changes of the checkboxes. Also, when the event is triggered the check state is lost (i.e. the box was unchecked and remains so afterward). The events appear to be triggering correctly in Firefox.

I am adding the event to the tree itself like this:

theTree.on('checkchange', TaskResult.NodeChecked);

Edit:
Upon further investigation, the behavior I am able to reproduce is that once the checkbox is clicked, I have to click again to get it to fire the event. I can click anywhere on the page except again on the same checkbox. If I do click on the same one and then somewhere else, no event is ever fired until the state of the checkbox is different than its original.

Using:
Ext 1.1 RC1
Windows XP
Internet Explorer 7.0.5730.11
ext-all-debug.js / ext-yui-adapter.js / yui-utilities.js

Damian Manda

[mystix]

please refer to http://extjs.com/forum/showthread.php?t=8887

[aconran]

I am also experiencing the same issue as posted above with Ext 1.1 stable.

[Standard info]
1. Ext version + build no. 1.1Stable
2. ext-base.js
3. windows(xp)
4. browser IE + build no. 7.0.5730.11

Here is some code demonstrating the problem... a modification of reorder.js in the examples.


function captureEvents(observable) {
Ext.util.Observable.capture(observable, function(eventName) {console.log(eventName);}, this);
}


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

var tree = new Tree.TreePanel('tree-div', {
animate:true,
loader: new Tree.TreeLoader({
dataUrl:'get-nodes.php',
baseAttrs: {checked: false}
}),
enableDD:true,
containerScroll: true
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source'
});
tree.setRootNode(root);

// render the tree
tree.render();
root.expand();
captureEvents(tree);

});


In addition, ext-all.js must be changed to ext-all-debug.js to use the console in IE.

You will note that the checkchange event is sparodic in IE but consistent in FF.

[aconran]

The Ext 1.1 standard also works in Opera 9.22.

I made the following change in initEvents of TreeNodeUI


if(this.checkbox){
var en = Ext.isIE ? 'click' : 'change';
Ext.EventManager.on(this.checkbox, en, this.onCheckChange, this);
}


I've tested this in Opera, FF and IE 7+ and it seems to work as expected.

Aaron

[mandad]

Finally got around to testing the fix and it works under my usage as well. Marking thread as solved.

[test]

how i can change initEvents of TreeNodeUI ?

sample pls

[test]

i understand.....
i must modify ext-all.js
right ?

[aconran]

I typically create a file called overrides.js and place it in my "ext/" directory with all of my overrides.

Then apply over the prototype of Ext.tree.TreeNodeUI's implementation.


Ext.apply(Ext.tree.TreeNodeUI.prototype, {
// solves cross browser issue for IE as described here:
// http://extjs.com/forum/showthread.php?t=10027
initEvents : function(){
this.node.on("move", this.onMove, this);
var E = Ext.EventManager;
var a = this.anchor;

var el = Ext.fly(a, '_treeui');

if(Ext.isOpera){ // opera render bug ignores the CSS
el.setStyle("text-decoration", "none");
}

el.on("click", this.onClick, this);
el.on("dblclick", this.onDblClick, this);

if(this.checkbox){
var en = Ext.isIE ? 'click' : 'change';
Ext.EventManager.on(this.checkbox, en, this.onCheckChange, this);
}

el.on("contextmenu", this.onContextMenu, this);

var icon = Ext.fly(this.iconNode);
icon.on("click", this.onClick, this);
icon.on("dblclick", this.onDblClick, this);
icon.on("contextmenu", this.onContextMenu, this);
E.on(this.ecNode, "click", this.ecClick, this, true);

if(this.node.disabled){
this.addClass("x-tree-node-disabled");
}
if(this.node.hidden){
this.addClass("x-tree-node-disabled");
}
var ot = this.node.getOwnerTree();
var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
if(dd && (!this.node.isRoot || ot.rootVisible)){
Ext.dd.Registry.register(this.elNode, {
node: this.node,
handles: this.getDDHandles(),
isHandle: false
});
}
}
});


Make sure that this comes after including ext-all.js.

Aaron

[test]

nice

[becomcs]

It works great! After two days, I was afraid to not beeing able to deliver a release for friday.

Thanks a lot!

[CNash44]

I am experiencing the same problem, but with an AsyncTreeNode.
Is there a similar fix for that class?

Thanks.

[aconran]

Since this was a change done in TreeNodeUI it should affect the AsyncTreeNode as well. What version of Ext are you running?