Safari (older versions) fixes.

[Alan Knowles]

I've been testing extjs (mostly form components) with Safari 2.0 on a early Intel box. These fixes solve most issues with safari and Konquerer.

* insertAdjacentHTML is pretty borked in Konquerer and Safari , the easist fix is to do


inside : Ext.DomHelper.insertHTML:
(if el.insertAdjacentHTML && Ext.isIE) {
.....
}


* string.replace() with functions is broken on older versions of safari: this is taken from the web after a bit of googling..


if (Ext.isSafari) {

// string replace is borked in safari.

(function(){
var default_replace = String.prototype.replace;
String.prototype.replace = function(search,replace){
// replace is not function
if(typeof replace != "function"){
return default_replace.apply(this,arguments)
}
var str = "" + this;
var callback = replace;
// search string is not RegExp
if(!(search instanceof RegExp)){
var idx = str.indexOf(search);
return (
idx == -1 ? str :
default_replace.apply(str,[search,callback(search, idx, str)])
)
}
var reg = search;
var result = [];
var lastidx = reg.lastIndex;
var re;
while((re = reg.exec(str)) != null){
var idx = re.index;
var args = re.concat(idx, str);
result.push(
str.slice(lastidx,idx),
callback.apply(null,args).toString()
);
if(!reg.global){
lastidx += RegExp.lastMatch.length;
break
}else{
lastidx = reg.lastIndex;
}
}
result.push(str.slice(lastidx));
return result.join("")
}
})();
}


Rendering of <buttons> with transparent is not only broken, but causes forms to be submitted when they are pressed. (Affects only older versions of Safari AFAIK)

Hence Ext.Button needs modifying to use <DIV> tags on safari:




// technically a safari / konq bug - showing buttons transparnet.
// also domquery is borked on safari..

Ext.Button.prototype.render = function(renderTo){
var btn;
if(this.hideParent){
this.parentEl = Ext.get(renderTo);
}
// alert('btnr 1');
if(!this.dhconfig){
if(!this.template){
if(!Ext.Button.buttonTemplate){
// hideous table template
Ext.Button.buttonTemplate = new Ext.Template(
'<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
'<td class="x-btn-left"><i> </i></td><td class="x-btn-center"><em>',
(Ext.isSafari ? '<div class="x-btn-text">{0}</button>' : '<button class="x-btn-text">{0}</button>'),
'</em></td><td class="x-btn-right"><i> </i></td>',
"</tr></tbody></table>");
}
this.template = Ext.Button.buttonTemplate;
}
// alert('btnr 2');
btn = this.template.append(renderTo, [this.text || ' '], true);
// alert('btnr 2a' + btn);
//Ext.DomQuery.select("div:first", btn.dom)[];
var btnEl;
if (Ext.isSafari) {
btnEl = Ext.get(btn.dom.getElementsByTagName('div')[0]);
} else {
btnEl = btn.child("button:first");
}



if(this.cls){
btn.addClass(this.cls);
}

if(this.icon){
btnEl.setStyle('background-image', 'url(' +this.icon +')');
}
if(this.tooltip){
if(typeof this.tooltip == 'object'){
Ext.QuickTips.tips(Ext.apply({
target: btnEl.id
}, this.tooltip));
} else {
btnEl.dom[this.tooltipType] = this.tooltip;
}

}

}else{

btn = Ext.DomHelper.append(Ext.get(renderTo).dom, this.dhconfig, true);
}

this.el = btn;
if(this.id){
this.el.dom.id = this.el.id = this.id;
}
if(this.menu){
this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
this.menu.on("show", this.onMenuShow, this);
this.menu.on("hide", this.onMenuHide, this);
}

btn.addClass("x-btn");
if(Ext.isIE && !Ext.isIE7){
this.autoWidth.defer(1, this);
}else{
this.autoWidth();
}
btn.on("click", this.onClick, this);
btn.on("mouseover", this.onMouseOver, this);
btn.on("mouseout", this.onMouseOut, this);
btn.on("mousedown", this.onMouseDown, this);
//btn.on("mouseup", this.onMouseUp, this);
if(this.hidden){
this.hide();
}
if(this.disabled){
this.disable();
}
Ext.ButtonToggleMgr.register(this);
if(this.pressed){
this.el.addClass("x-btn-pressed");
}
if(this.repeat){
var repeater = new Ext.util.ClickRepeater(btn,
typeof this.repeat == "object" ? this.repeat : {}
);
repeater.on("click", this.onClick, this);
}
};
// safari has to render as div

Ext.Button.prototype.setText = function(text)
{
this.text = text;
if (this.el) {
if (Ext.isSafari) {
this.el.dom.getElementsByTagName('div').innerHTML = text;
} else {
this.el.child("td.x-btn-center button.x-btn-text").update(text);
}

}
this.autoWidth();
}
// safari has to render as div

Ext.Button.prototype.focus = function()
{

if (Ext.isSafari) {
return; // cant focus on div's
} else {
this.el.child("button:first").focus();
}

}