PDA

View Full Version : extending htmleditor



alupuli
13 Nov 2010, 5:06 PM
below code is just a sample to replicate the issue.
extending htmleditor as below to attach common event listening for all instance.
throwing error "Message: Exception thrown and not caught"





var myHtmlEditor = function (config) {
myHtmlEditor.superclass.constructor.call(this, config);
this.initEditor = function () {
myHtmlEditor.superclass.initEditor.call(this);
if (Ext.isGecko) {
Ext.EventManager.on(this.doc, 'keypress', function () {
alert('keypress')
},
this);
}
if (Ext.isIE || Ext.isWebKit || Ext.isOpera) {
Ext.EventManager.on(this.doc, 'keydown', function () {
alert('keydown')
},
this);
}
Ext.EventManager.on(this.doc, 'mousedown', function () {
alert('mousedown')
},
this);
};
}
Ext.extend(myHtmlEditor, Ext.form.HtmlEditor, {});
Ext.reg('myhtmleditor', myHtmlEditor);

Ext.onReady(function () {
var countryArr = new Array();
countryArr[0] = new Array('1', 'India');
countryArr[1] = new Array('2', 'Pakistan');
countryArr[2] = new Array('3', 'Srilanka');
countryArr[3] = new Array('4', 'Bangladesh');
countryArr[4] = new Array('5', 'US');

var expArr = new Array();
expArr[0] = new Array('1', '<1');
expArr[1] = new Array('2', '2');
expArr[2] = new Array('3', '3');
expArr[3] = new Array('4', '>3');

var formPersonal = new Ext.FormPanel({
labelWidth: 75,
// label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
title: 'Please enter following',
id: 'PersonalForm',
bodyStyle: 'padding:5px 5px 0',
defaults: {
width: 230
},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},
{
fieldLabel: 'Last Name',
name: 'last'
},
new Ext.form.Radio({
fieldLabel: 'Gender',
name: 'gender',
boxLabel: 'Female',
allowBlank: false
}), new Ext.form.Radio({
boxLabel: 'Male',
name: 'gender',
width: 190,
allowBlank: false
}), {
fieldLabel: 'Age',
name: 'age',
width: 50
},
new Ext.form.DateField({
fieldLabel: 'Date of Birth',
name: 'dob',
width: 100,
allowBlank: false
}), new Ext.form.ComboBox({
autoWidth: true,
fieldLabel: 'Nationality',
typeAhead: true,
triggerAction: 'all',
lazyRender: false,
mode: 'local',
store: new Ext.data.ArrayStore({
fields: ['Value', 'Text'],
data: countryArr
}),
valueField: 'Value',
displayField: 'Text'
}), {
xtype: 'myhtmleditor',
id: 'Hobbies',
fieldLabel: 'Brief about Hobbies',
height: 200,
width: 200,
anchor: '98%'
}],

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

var formProfessional = new Ext.FormPanel({
labelWidth: 75,
// label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
title: 'Please enter following',
bodyStyle: 'padding:5px 5px 0',
id: 'ProfessionalForm',
defaults: {
width: 230
},
items: [{
fieldLabel: 'Designation',
name: 'designation',
allowBlank: false,
xtype: 'textfield'
},
{
fieldLabel: 'Experience(in Years)',
name: 'experince',
xtype: 'combo',
width: 60,
typeAhead: true,
triggerAction: 'all',
lazyRender: false,
mode: 'local',
store: new Ext.data.ArrayStore({
fields: ['Value', 'Text'],
data: expArr
}),
valueField: 'Value',
displayField: 'Text'

},
{
xtype: 'myhtmleditor',
id: 'jobdescription',
fieldLabel: 'Job description',
height: 200,
width: 200,
anchor: '98%'
}],

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

// simple.render(document.body);
var tabs = new Ext.TabPanel({
renderTo: document.body,
width: 450,
activeTab: 0,
frame: true,
defaults: {
autoHeight: true
},
items: [{
items: [formPersonal],
title: 'Personal',
id: 'tabPersonal'
},
{
items: [formProfessional],
title: 'Professional',
id: 'tabProfessional'
}]
});

});

Animal
14 Nov 2010, 4:39 AM
I'd suggest setting breakpoints in that code and also setting it to break on errors so that you can find out what it doesn't like.

But your code also has other issues.



items: [{
items: [formPersonal],
title: 'Personal',
id: 'tabPersonal'
},
{
items: [formProfessional],
title: 'Professional',
id: 'tabProfessional'
}]


?

You make things so difficult when they are easy. That should be



items: [ formPersonal, formProfessional ],


And this is over complicating it:



var countryArr = new Array();
countryArr[0] = new Array('1', 'India');
countryArr[1] = new Array('2', 'Pakistan');
countryArr[2] = new Array('3', 'Srilanka');
countryArr[3] = new Array('4', 'Bangladesh');
countryArr[4] = new Array('5', 'US');


It should be this:



var countryArr = [
['1', 'India'],
['2', 'Pakistan'],
['3', 'Srilanka'],
['4', 'Bangladesh'],
['5', 'US']
];

alupuli
14 Nov 2010, 6:31 AM
I simplified the code...
It works fine in ext 2.3.0
This issue is with 3.0



Ext.namespace("Cyber.ui");
Cyber.ui.HtmlEditor = Ext.extend(Ext.form.HtmlEditor, {
frame: true,
initEditor: function () {
Cyber.ui.HtmlEditor.superclass.initEditor.call(this);
if (Ext.isGecko) {
Ext.EventManager.on(this.doc, 'keypress', function () {
alert('keypress')
},
this);
}
if (Ext.isIE || Ext.isWebKit || Ext.isOpera) {
alert(this);
Ext.EventManager.on(this.doc, 'keydown', function () {
alert('keydown')
},
this);
}
}
});

Ext.reg('uihtmleditor', Cyber.ui.HtmlEditor);

Ext.onReady(function () {
var formPersonal = new Ext.FormPanel({
labelWidth: 75,
// label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
title: 'Please enter following',
id: 'PersonalForm',
bodyStyle: 'padding:5px 5px 0',
defaults: {
width: 230
},
items: [{
xtype: 'uihtmleditor',
id: 'Hobbies',
fieldLabel: 'Brief about Hobbies',
height: 200,
width: 200,
anchor: '98%'
}],

buttons: [{
text: 'Save'
},
{
text: 'Cancel'
}]
});
formPersonal.render(document.body);

});

alupuli
14 Nov 2010, 6:37 AM
a small change in code made it working.


Ext.namespace("Cyber.ui");
Cyber.ui.HtmlEditor = Ext.extend(Ext.form.HtmlEditor, {
frame: true,
initEditor: function () {
Cyber.ui.HtmlEditor.superclass.initEditor.call(this);
if (Ext.isGecko) {
Ext.EventManager.on(this.getDoc(), 'keypress', function () {
alert('keypress')
},
this);
}
if (Ext.isIE || Ext.isWebKit || Ext.isOpera) {
alert(this);
Ext.EventManager.on(this.getDoc(), 'keydown', function () {
alert('keydown')
},
this);
}
}
});

alupuli
15 Nov 2010, 9:07 AM
For some reason my previous post where not approved....

reduced the code as below and got the solution...
The previous code works with Ext 2.3 and throw error in Ext 3.....

Ext.namespace("Cyber.ui");
Cyber.ui.HtmlEditor = Ext.extend(Ext.form.HtmlEditor, {
frame: true ,
initEditor: function () {
Cyber.ui.HtmlEditor.superclass.initEditor.call(this);
if (Ext.isGecko) {
Ext.EventManager.on(this.getDoc(), 'keypress', function () {
alert('keypress')
},
this);
}
if (Ext.isIE || Ext.isWebKit || Ext.isOpera) { alert(this);
Ext.EventManager.on(this.getDoc(), 'keydown', function () {
alert('keydown')
},
this);
}
}
});

Ext.reg('uihtmleditor', Cyber.ui.HtmlEditor);

Ext.onReady(function () {
var formPersonal = new Ext.FormPanel({
labelWidth: 75,
// label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
title: 'Please enter following',
id: 'PersonalForm',
bodyStyle: 'padding:5px 5px 0',
defaults: {
width: 230
},
items: [{
xtype: 'uihtmleditor',
id: 'Hobbies',
fieldLabel: 'Brief about Hobbies',
height: 200,
width: 200,
anchor: '98%'
}],

buttons: [{
text: 'Save'
},
{
text: 'Cancel'
}]
});
formPersonal.render(document.body);

});