Title:
TreeEditor causes JS error in IE8 after start of edit
Steps to reproduce:- Open testcase
- Double click on ExtJs node
Problem description:
IE7: Nothing will happen. No action, no error message.
IE8 beta 2: Javascript error message "Type mismatch" will appear.
There is problem in code in Ext.tree.TreeEditor:
Code:
node.ui.getEl().scrollIntoView(this.tree.body);
Method scrollIntoView is defined in ExtJs as method of Element object and also in Internet Explorer as DOM element method.
This code causes call of DOM element method, and pass to this method parameter this.tree.body, but IE method expects boolean.
I suppose that some type control is added into IE8 - it throws JavaScript error in IE, but this code propably dont' work in any browser.
Solution is simple:
Code:
Ext.fly(node.ui.getEl()).scrollIntoView(this.tree.body);
Testcase:
Code:
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
autoScroll:true,
renderTo: Ext.getBody(),
containerScroll: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
text: 'My Favorite Frameworks',
draggable:false,
id:'source',
children: [
{"text" : "ExtJs", "id" : 100, "leaf" : true}
]
})
});
tree.getRootNode().expand();
var treeEditor = new Ext.tree.TreeEditor(tree, {
cancelOnEsc: true,
completeOnEnter: true
});
});
Ext version: Ext 2.2.0
Adapter: ext-base.js
System: Windows XP
Browser: IE7, IE8
Workaround (patch):
Code:
Ext.override(Ext.tree.TreeEditor, {
triggerEdit: function(node, defer){
this.completeEdit();
if (node.attributes.editable !== false) {
this.editNode = node;
debugger;
if (this.tree.autoScroll) {
Ext.fly(node.ui.getEl()).scrollIntoView(this.tree.body);
}
this.autoEditTimer = this.startEdit.defer(this.editDelay, this, [node.ui.textNode, node.text]);
return false;
}
}
});