PDA

View Full Version : HtmlEditor is 'read only' until I click another field in my FormPanel.



JeanNiBee
11 Nov 2010, 11:19 AM
Hi

I'm using an HtmlEditor field in a form I'm creating and on some occaissions when I open up the form for update the HtmlEditor is readonly. I can'k click anywhere in the textarea region to make shcnages.

This goes away if I select any other widget in the form first. "Show source", a drop down which is another field in the form, click a checkbox etc etc. Any of these events allow me to edit my HTmlEditor contents.

Some code for review:


mspub.components.form.types.HtmlEditor = Ext.extend( Ext.form.HtmlEditor, {

constructor: function (config, fieldDef, isUpdate, fieldPrefix, vdocType, nodeType) {

config = config || {};

var editor = this;

// apply config options with possible overrides
config = Ext.apply({
enableColors: true,
enableAlignments: true,
fieldDef: fieldDef,
isUpdate: isUpdate,
fieldPrefix: fieldPrefix,
vdocType: vdocType,
nodetype: nodeType,
tableId: fieldPrefix + fieldDef.name + '_table',
fieldLabel: fieldDef.label || config.label || '' ,
enableSourceEdit: true,
disabled: config.disabled || false,
name: fieldPrefix + fieldDef.name,
value: (isUpdate && fieldDef.value) || config.value || '',
maskRe: config.maskRe || '',
width: config.width || 550,
height: config.height || 200,
ctCls: 'mspub-form-htmleditor',
listeners: {
initialize: function(ed){
Ext.EventManager.on(ed.getWin(), 'focus', ed.onFocus, ed);
Ext.EventManager.on(ed.getWin(), 'blur', ed.onBlur, ed);
},
focus: function(ed){
var win = editor.getWin();
win.manager.bringToFront(win)
//console.log('focus');
},
blur: function(ed){
console.log('blur');
}
}
}, config );

// super()
mspub.components.form.types.HtmlEditor.superclass.constructor.call(this, config);
}
});
Thanks.

JeanNiBee
11 Nov 2010, 1:52 PM
So I had originally tried the solutions I read on the forums and they did not seem to fix my problem but the end results was they did. My final issue was a typo in the parameter name being passed into the focus event on the Editor.

So this in fact DID work for me.

Adding these configurations to my editor component when instantiating it fixed my problems. (so far). :)

See: For more information on why.
http://www.sencha.com/forum/showthread.php?113300-Htmleditor-focus-event-%28or-lack-thereof%29



initEvents: Ext.form.Field.prototype.initEvents,
onFocus: Ext.form.Field.prototype.onFocus,
listeners: {
initialize: function(ed){
// attach focus/blur events on the IFRAME
Ext.EventManager.on(ed.getWin(), 'focus', ed.onFocus, ed);
Ext.EventManager.on(ed.getWin(), 'blur', ed.onBlur, ed);
},
focus: function(ed){
var win = ed.getWin();
win.manager.bringToFront(win)
},
blur: function(ed){
// TODO: Worry about this later.
}
}