PDA

View Full Version : Problems with IE8 extending Ext.Button



Edistar
2 Sep 2010, 12:00 AM
Hi, I have a problem with IE8 using this extension created by me :



Ext.namespace('Ext.ux.form');

Ext.ux.form.SubmitButton = Ext.extend(Ext.Button, {

type : 'submit',

buttonSelector : 'input:first-child',

template : new Ext.Template(
'<table id="{4}" cellspacing="0" class="x-btn {3}"><tbody class="{1}">',
'<tr><td class="x-btn-tl"><i> </i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i> </i></td></tr>',
'<tr><td class="x-btn-ml"><i> </i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><input type="{0}" class="x-btn-text" name="{6}" value="{5}"></td><td class="x-btn-mr"><i> </i></td></tr>',
'<tr><td class="x-btn-bl"><i> </i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i> </i></td></tr>',
'</tbody></table>'
),

getTemplateArgs : function() {
return [this.type, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id, this.text || ' ', this.name];
},

onRender: function(ct, position){
var btn, targs = this.getTemplateArgs();
if(position){
btn = this.template.insertBefore(position, targs, true);
}else{
btn = this.template.append(ct, targs, true);
}
/**
* An {@link Ext.Element Element} encapsulating the Button's clickable element. By default,
* this references a <button> element. Read only.
* @type Ext.Element
* @property btnEl
*/
this.btnEl = btn.child(this.buttonSelector);
this.mon(this.btnEl, {
scope: this,
focus: this.onFocus,
blur: this.onBlur
});
this.initButtonEl(btn, this.btnEl);
btn.un(this.clickEvent, this.onClick, this);
Ext.ButtonToggleMgr.register(this);
}
});
Ext.reg('submitbutton', Ext.ux.form.SubmitButton);


This should be a form submit button. It works perfectly with Mozilla Firefox but with IE8 an unknown runtime error at line 3391 in file ext-all-debug.js is fired. Can someone please help me?

Edistar
3 Sep 2010, 1:36 AM
Problem solved changing the extension method :



Ext.namespace('Ext.ux.form');
Ext.ux.form.SubmitButton = Ext.extend(Ext.Button, {

type : 'submit',

buttonSelector : 'input[value]',

getTemplateArgs : function(){
return [this.type, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id, this.text, this.name];
},

template : new Ext.Template(
'<table id="{4}" cellspacing="0" class="x-btn {3}"><tbody class="{1}">',
'<tr><td class="x-btn-tl"><i>&#160;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&#160;</i></td></tr>',
'<tr><td class="x-btn-ml"><i>&#160;</i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><input type="{0}" class="x-btn-text" name="{6}" value="{5}"></em></td><td class="x-btn-mr"><i>&#160;</i></td></tr>',
'<tr><td class="x-btn-bl"><i>&#160;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&#160;</i></td></tr>',
'</tbody></table>'),

//private
initButtonEl : function(btn, btnEl){
this.el = btn;
this.setIcon(this.icon);
//this.setText(this.text);
this.setIconClass(this.iconCls);
if(Ext.isDefined(this.tabIndex)){
btnEl.dom.tabIndex = this.tabIndex;
}
if(this.tooltip){
this.setTooltip(this.tooltip, true);
}
if(this.handleMouseEvents){
this.mon(btn, {
scope: this,
mouseover: this.onMouseOver,
mousedown: this.onMouseDown
});
//new functionality for monitoring on the document level
//this.mon(btn, 'mouseout', this.onMouseOut, this);
}
if(this.menu){
this.mon(this.menu, {
scope: this,
show: this.onMenuShow,
hide: this.onMenuHide
});
}
if(this.repeat){
var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {});
this.mon(repeater, 'click', this.onClick, this);
}
//this.mon(btn, this.clickEvent, this.onClick, this);
}


});
Ext.reg('submitbutton', Ext.ux.form.SubmitButton);


The method "setText" was the murderer! :))

mw-flow
20 Apr 2011, 12:12 PM
I had the same error message at the same line, also in IE8, but caused by something different.

I had a plain old BorderLayout, Grid in west, FormPanel in center. FormPanel uses a tbar with three buttons. As a forth component within the tbar I had a


{
id: 'progressIndicatorContainer',
hidden: true,
html: "test message",
style: {
"color": "red",
"font-weight": "bold",
"font-size": "18px",
"margin-left": "10px"
}
}

IE8 threw the mentioned error at line 3391. As soon as I either changed name of the "html" config attribute to "text" the error was gone. Same with adding "xtype: 'label'". When I add this to the config above everything works fine.

Nevermind, maybe it helps someone.