ExtJS5—Codemirror Integration

Being one of the leading frameworks for RIA, I was expecting ExtJS 5 to have an inbuilt code editor. There are some add-ons available for ExtJS3 and ExtJS4 by extending the form field base so that they can make it in par with form. But it is more restricted using in that way. We need to compromise with the layout if you are not using it on any other component. Instead we can use a simple hack to make it work seamlessly on any ExtJS components.

Since code mirror requires div or textarea, we can make use of ExtJS' 'box' to get handle of div. Next level complexity comes with form support and layouting. Here is the idea

• Create a custom component by extending container of panel(As per requirement)
• Use codemirror's configs as configs of custom component
• Add following components as items
• box : Since it provides a div, we can use it to render code mirror component
• field: Add this item to your custom component and make it hidden. Replicate all the changes/actions on this field component whenever there are changes/actions on the codemirror. 
• Initialize codemiror field 'afterrender' of custom component with the configs that are defined on it. 

ExtJS form comes with the additional properties like dirty change, load/get/update Record features  so that we can load the model into the form and work with it. Whenever we add our custom component to form, form will be able to identify the field item which is the part of our custom component. Since ExtJS form fires every action on our field, we can get the handle form actions. 

Layout Support

Since it is our custom component, we don't need to worry much. 

Code mirror has a pre-configured height(300) in its css and there is a method to set custom height and width. We can pass these values as configs to our custom component and call setSize method of codemirror.