Augmenting a class with a plugin

A way to change the behavior of a class is by using plugins. This recipe explains the mechanics of a plugin through an example plugin that provides visual feedback that indicates when a TextField or TextArea is a required field. The feedback will consist of a small glyph on the upper-left corner of the field's input elements, as seen in the following screenshot:

How to do it...

1. 1. Define a couple of namespaces to encapsulate your plugin class:

   Ext.ns('Ext.ux', 'Ext.ux.plugins');
   

2. 2. Define the RequiredFieldGlyph plugin:

   Ext.ux.plugins.RequiredFieldGlyph = {
   init: function(field) {
   var thisXType = field.getXType();
   

3. 3. Inside the plugin's init() method, check that the host field is either a TextArea or TextField instance. Your plugin will only modify these types:

   // You only want to modify textfield fields.
   if ('textarea' != thisXType && 'textfield' != thisXType) return;
   onRender = field.onRender;
   

4. 4. Define a rendering function that will execute right after...