Start Building Professional
Web Apps Today

Combo speed problems in IE6

I am currently evaluating some of your components and encountered a problem in the combo code (v1.3):

In IE6 only, if you create a combo with say 5000 entries, the mouse selection (mouseover) and mouse click events can take several seconds. Waiting 5-10 seconds between each mouse movement and click is obviously unusable.

I narrowed it down to a problem in IE6 that has to do with looping through many childNodes in a dom. So in order to skip the looping code, I wrote a patch that stores the position of the node in the array instead (code included below). Please comment on this patch and let me know if I did anything wrong, and whether you will be using this in the next version...


dhtmlXCombo.prototype.addOption = function(options) {
if (!arguments[0].length || typeof(arguments[0])!="object")
args = [arguments];
else
args = options;

this.render(false);
for (var i=0; i<args.length; i++) {
var attr = args[i];
if (attr.length){
attr.pos = (this.optionsArr.length+i);
attr.value = attr[0]||"";
attr.text = attr[1]||"";
attr.css = attr[2]||"";
}
this._addOption(attr);
}
this.render(true);
}
dhtmlXCombo_defaultOption.prototype.setValue = function(attr) {
this.pos=attr.pos;
this.value = attr.value||"";
this.text = attr.text||"";
this.css = attr.css||"";
this.content=null;
}
dhtmlXCombo_defaultOption.prototype.render = function() {
if (!this.content){
this.content=document.createElement("DIV");
this.content._pos=this.pos;
this.content._self = this;

this.content.style.cssText='width:100%; overflow:hidden;'+this.css;
if (_isOpera || _isKHTML ) this.content.style.padding="2px 0px 2px 0px";
this.content.innerHTML=this.text;
this._ctext=_isIE?this.content.innerText:this.content.textContent;
}
return this.content;
}
dhtmlXCombo.prototype._selectOption = function(e) {
(e||event).cancelBubble = true;
var node=(_isIE?event.srcElement:e.target);
var that=this.combo;
while (!node._self) {
node = node.parentNode;
if (!node)
return;
}

var i=node._pos;
that.selectOption(i,false,true);
that.closeAll();
that.callEvent("onBlur",[])
that._activeMode=false;
}
dhtmlXCombo.prototype._listOver = function(e) {
e = e||event;
e.cancelBubble = true;
var node = (_isIE?event.srcElement:e.target);
var that = this.combo;
if ( node.parentNode == that.DOMlist ) {
if(that._selOption) that._selOption.deselect();
            if(that._tempSel) that._tempSel.deselect();

var i=node._pos;
var z=that.optionsArr[node._pos];
that._tempSel=z;
that._tempSel.select();

            if ((that._autoxml)&&((i+1)==that._lastLength))
    that._fetchOptions(i+1,that._lasttext||"");
}

}

The changes in code, which you have introduced, doesn't cause any negative side effect.

The only issue - they are will work only with static list, in case if you will delete some option from the list - all indexes need to be recalculated, except of that - all other must work correctly. 
( because of such limitation I don't think that we will include similar updates in main codebase ) 

By the way, for such big datasets, you can use dyn. loading mode, which will provide much more better performance. 
http://dhtmlx.com/docs/products/dhtmlxCombo/samples/filtering/100000/