Extending a class

This recipe explains how to use a class extension to create a custom field. As an example, you will build a custom TextField component that provides visual feedback indicating that it 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 the namespace that you will use:

   Ext.ns('Ext.ux.form');
   

2. 2. Define the custom field as an extension of ext.form.TextField and override the onRender() method:

   Ext.ux.form.RequiredTextField = Ext.extend(Ext.form.TextField, {
   allowBlank: false,
   onRender: function(ct, position) {
   

3. 3. Within onRender() Call the onRender() method of the base class:

   Ext.ux.form.RequiredTextField.superclass.onRender.call(this, ct, position);
   

4. 4. Moving on to the custom behavior, calculate the glyph's location:

   glyphX = this.el.dom.clientLeft + this.el.dom.offsetLeft + 1;
   glyphY = this.el.dom.clientTop + this.el.dom.offsetTop + 1;
   }
   });
   

5. 5. Create...