PDA

View Full Version : [FIXED-1090]HTMLEditor initComponent does not call superclass initComponent



mattgoldspink
1 Jul 2010, 4:50 AM
Ext version tested:

Ext 3.2.2


Adapter used:

jquery


css used:

only default ext-all.css




Browser versions tested against:

Chrome 4
IE7
FF3 (firebug 1.3.0.10 installed)


Operating System:

WinXP Pro


Description:

I've added a Ext.override to all Ext.form.Field classes but for some reason it was not being called for a HTMLEditor I had. On debugging I found that the initComponent function in HTMLEditor does not call initComponent on the superclass and hence my interceptor to the parent breaks.


Test Case:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker = _gat._getTracker("UA-1396058-1");pageTracker._initData();pageTracker._trackPageview();} catch(err) {}</script>
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript" src="states.js"></script>
<script type="text/javascript">
Ext.onReady(function(){

Ext.override(Ext.form.Field, {
initComponent: Ext.form.Field.prototype.initComponent.createSequence(function() {
alert(this.name);
})
});

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();
bd.createChild({tag: 'h2', html: 'Form'});

var top = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Multi Column, Nested Layouts and Anchoring',
bodyStyle:'padding:5px 5px 0',
width: 600,
items: [{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
}]
}]
},{
xtype:'htmleditor',
id:'bio',
name: 'htmleditor',
fieldLabel:'Biography',
height:200,
anchor:'98%'
}],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

top.render(document.body);
});

</script>
<link rel="stylesheet" type="text/css" href="forms.css"/>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css"/>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<p>
There should be an Alert for each field
</p>
</body>
</html>



Steps to reproduce the problem:

See above code. Essentially adding:
Ext.override(Ext.form.Field, {
initComponent: Ext.form.Field.prototype.initComponent.createSequence(function() {
alert(this.name);
})
}); and a HTMLEditor to a form is all you need


The result that was expected:

I expect my function to be called for all fields created in the form


The result that occurs instead:

the function is called for every type of Field except the Ext.form.HTMLEditor


Debugging already done:

Looking at the code I can see HTMLEditor is defined as

initComponent : function(){
this.addEvents(

'initialize',

'activate',

'beforesync',

'beforepush',

'sync',

'push',

'editmodechange'
);
},



Possible fix:

The fix should be to do:


initComponent : function(){
this.addEvents(

'initialize',

'activate',

'beforesync',

'beforepush',

'sync',

'push',

'editmodechange'
);
Ext.form.HTMLEditor.superclass.initComponent.call(this);
},