Ext JS' functionality can be easily extended and modified by attaching plugins to components. Plugins allow us to create reusable code that will modify or add to a component's look and behavior during or after its instantiation.
The Ext JS community is prolific in their creation of plugins to extend the framework and there are some excellent contributions with both open source and commercial licenses. You can browse through the available plugins (and submit your own!) on the Sencha forums or on the Sencha marketplace (http://market.sencha.com/).
In this recipe, we are going to create a plugin called Ext.ux.ReadOnlyField
that can be attached to text fields. This will allow them to be switched between a read-only mode, which hides the input field, and an edit mode. The plugin will create a new DIV
element as part of the field and show and hide it when the mode is changed.
The following screenshot shows the plugin in action with the left image showing the text...