Getting started with Ext HtmlEditor

This is in response to the first comment I received for my previous post: All about Ext.FormPanel. My reader had requested for an example where HtmlEditor are used. And here is the response! We will learn to create forms that use the WYSIWYG editor provided by Ext.

The Basics
Ext provides developers with a good WYSIWYG editor under Ext.form.HtmlEditor. But making use of it can be bit tricky. The editor provided, is simple yet very powerful. It even has option for source editing apart from other normal options like font size, font family, colour, links etc. The library provides enough options to customize the components to user needs. Below are the important configuration options for the editor:

• createLinkText – The default text for the create link prompt.
• defaultLinkValue – The value for the create link value. By default the value is http://
• enableAlignments – Enable alignment buttons.
• enableColors – Enable foreground and highlight colour buttons.
• enableFont – Enables font selection.
• enableFontSize – Enables the option of increasing font size.
• enableFormat – Enables the formatting buttons like bold and italic.
• enableLinks – Enable links button.
• enableLists – Provides the facility to create numbered and bullet list.
• enableSourceEdit – Provide provision for source editing.
• fontFamilies – Used to specify the supported font families. This is an array of font names.

Options like enableAlignments, enableColors are boolean variables and are all set to true by default. A default for will have all the options enabled. In one way, these default values cause trouble. I will explain about the troubles soon.

Now let’s create our first HtmlEditor. Out approach will be to create a simple feedback for where will ask users to enter name, email address and suggestion. This suggestion field will be represented as a rich editor. Have a look at the code:

formObject = new Ext.form.FormPanel({applyTo:Ext.getBody(),
title:'Sample form',
bodyStyle:'padding:10px',
labelWidth:60,
items:[new Ext.form.TextField({id:'tf',
name:'uname',
inputType:'text',
fieldLabel:'Name',
allowBlank:false 
}), new Ext.form.TextField({id:'ema',  
name:'email',
inputType:'text', 
fieldLabel:'E-mail'
}), new Ext.form.HtmlEditor({id:'sug',  
name:'suggest', 
fieldLabel:'Suggestion' 
})], 
buttons:[{text:'Submit',handler:buttonHandler}]     
});

Everything looks good and planned? On execution of this code, you will get javascript errors saying tip.register is null!!

The Trouble
We just failed in creating our form. What is the solution to this error? Another problem is that I didn’t get much help from documentation either. But later I figured out the problem was because we didn’t initialize the tool tip.

What is the relation between tool tip class and our editor? A simple fact: the buttons in editor’s tool bar make use of tool tips. We need to initialize QuickTip as follows:

Ext.QuickTips.init();

First HtmlEditor
All you need to do is initialize the QuickTip and then create the form. The tool tip initialization can be done in init method of your class. Here is the final working code:

app = function() {
var formObject;

var buttonHandler = function(button,event) {
alert('You clicked the button!');
};   

return {

init:function() {

Ext.QuickTips.init();  

formObject = new Ext.form.FormPanel({applyTo:Ext.getBody(),
title:'Sample form',
bodyStyle:'padding:10px',
labelWidth:60 ,
items:[
new Ext.form.TextField({id:'tf',
name:'uname',
inputType:'text',     
fieldLabel:'Name',
allowBlank:false  
}),
new Ext.form.TextField({id:'ema',
name:'email',
inputType:'text',
fieldLabel:'E-mail'
}),                
new Ext.form.HtmlEditor({id:'sug',
name:'suggest',
fieldLabel:'Suggestion'                  
})
],
buttons:[{text:'Submit',handler:buttonHandler}]            
});
} 
};

There you go! You have your HtmlEditor and forms working smooth.

The final comments
Ext forms have lots of features and forms are important part of web application. I personally feel Ext’s documentation should provide more explanation on the form elements, submitting and load of forms.