Adding indexOf and remove to Array.prototype breaks IE7

[Animal]

Ext.applyIf(Array.prototype, {
indexOf : function(o){
for (var i = 0, len = this.length; i < len; i++){
if(this[i] == o) return i;
}
return -1;
},

remove : function(o){
var index = this.indexOf(o);
if(index != -1){
this.splice(index, 1);
}
}
});


These two are included in the as the first two elements. So looping through the array from 0 to myArray.length iterates through these. This breaks DomHelper:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/brokenarray.jpg

It passes a function in, and createHTML attempts to access the "tag" property!

[jack.slocum]

It's something else Animal. Although those appear on the "children" object (array) they are not included in array operations (such as slice, splice, length, etc). Array only manipulates numeric keys.

[Animal]

Well that's weird. :?

I can't see what's wrong. The example is from that "from markup" TableGrid I sent you. It's the template for the grid wrapper box that is being processed. Have you tried that in IE7?

[jack.slocum]

It's the old extra comma bug. :)


this.gridWrap = Ext.DomHelper.insertBefore(this.table, {
tag: "div",
cls: "x-box-blue",
children: [
{tag: "div", cls: "x-box-tl", children: [
{tag: "div", cls: "x-box-tr", children: [
{tag: "div", cls: "x-box-tc" }
]}
]},
{tag: "div", cls: "x-box-ml", children: [
{tag: "div", cls: "x-box-mr", children: [
{tag: "div", cls: "x-box-mc", children: [
{tag: "h3", style: "margin-bottom:5px",
html: caption ? caption.innerHTML : (this.title || "Grid")},
{tag:"div", cls: "x-table-grid-container"}
]}
]}, <--- EXTRA COMMA
]},
{tag: "div", cls: "x-box-bl", children: [
{tag: "div", cls: "x-box-br", children: [
{tag: "div", cls: "x-box-bc" }
]}
]}
]
}, true);

Just so you know, there is a function on Element (not sure if it's in the current rev or new?) called boxWrap(cls) that does this for you.

e.g.

var box = el.boxWrap('x-box');