ExtJS 5.1 - HTML Rich Text Editor

Fiddle exploring the Ext.form.field.HtmlEditor class.

HTML

<script src="https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js"></script>
<link rel="stylesheet" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all-debug.css">
<script src="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/sencha-charts-debug.js"></script>
<link rel="stylesheet" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/classic/resources/sencha-charts-all-debug.css">
<html>
<body>
<div id ="tabAction">
</div>
</div>
</body>
</html>

CSS

.x-panel-header.x-header.x-header-noborder.x-docked.x-unselectable.x-panel-header-default.x-horizontal.x-panel-header-horizontal.x-panel-header-default-horizontal.x-top.x-panel-header-top.x-panel-header-default-top.x-box-layout-ct.x-accordion-hd.x-accordion-hd-sibling-expanded {
    background-color: #D2E7F7 !important;
    font-weight: bold;
}

.x-panel-header.x-header.x-header-noborder.x-docked.x-unselectable.x-panel-header-default.x-horizontal.x-panel-header-horizontal.x-panel-header-default-horizontal.x-top.x-panel-header-top.x-panel-header-default-top.x-box-layout-ct.x-accordion-hd {
    background-color: #D2E7F7 !important;
    font-weight: bold;
}

body#ext-element-1 {
    /*background-color: #596470 !important; */
    background-image: url(http://dev.sencha.com/ext/5.1.0/examples/kitchensink/crisp-en/resources/images/square.gif) !important;
    background-repeat: repeat;
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slide-up;
    -webkit-animation-name: slide-up;
}

@-moz-keyframes slide-up {
    from {
        margin-top: 100%;
    }
    to {
        margin-top: 0%;
    }
}

@-webkit-keyframes slide-up {
    from {
        margin-top: 100%;
    }
    to {
        margin-top: 0%;
    }
}

JavaScript

Ext.onReady(function(){

	

	var form1 = new Ext.form.FormPanel({
    	frame:true,
        renderTo: 'tabAction',
        height  : 400,
        width   : 800,
        
        bodyStyle: 'padding: 5px 5px 0',
        defaults: {
            anchor: '0',
             labelStyle: 'padding-left:10px;'
        },
        items   : [ {
               layout:'column',
            items:[{

                        xtype:'textfield',
                     
                        fieldLabel: 'Action ID',
                        labelWidth: 'auto',
                        
                        name: 'id',
                        id: 'id'
                 
                },{
  xtype: 'tbspacer',
  height:10
},{
                    xtype:'combo',
                        fieldLabel: 'Accountable',
                        labelWidth: 'auto',
                        name: 'Accountable',
                        store:new Ext.data.SimpleStore({
                        	data:[
                        	      [1,'michael'],
                        	      [2,'George']
                        	      ],
                        	  
                        	      fields: ['value' ,'text']
                        	      
                        	      
                        }),
                        valueField: 'value',
                    	displayField: 'text',
                    	triggerAction: 'all',
                    	editable: false
                    
          
                }]},
             {
                xtype     : 'textfield',
                name      : 'Actionsummary',
                fieldLabel: 'Summary'
            },{
            			cls:'x-plain',
                      	hideLabel: true,
                      	   xtype:'htmleditor',
                          autoScroll:true,
                          id:'message1',
                          height:200
                          //anchor:'98%'
                 
            	
            }

        ],

    ...