O'Reilly logo

Ext JS 4 Web Application Development Cookbook by Stuart Ashworth, Andrew Duncan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Rich editing with an HTML field

The framework provides a lightweight text editor for use in forms. The Ext.form.field.HtmlEditor enhances the user experiences giving them the capability to:

  • Format text as bold, italics, or underlined
  • Add links to content
  • Change the font, font color, and font size
  • Create ordered and unordered lists
  • Left, center, or right align text

This recipe will explain how to use the HTML editor field in your form for a rich text editing experience.

How to do it...

  1. Initialize the QuickTipManager:
    Ext.tip.QuickTipManager.init();
  2. Create a narrow form panel and add an HtmlEditor field to the panel's items collection:
    var formPanelNarrow = Ext.create('Ext.form.Panel', { title: 'HTML Editor (narrow)', width: 350, height: 200, layout: 'fit', ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required