Building preconfigured classes

Preconfigured classes are extensions of the Ext classes with built-in configuration options. This pattern allows you to set up your components to perform specific tasks, without having to pass configuration options through the configuration object.

In this recipe, you will build two portlets; instances of the Panel class, preconfigured with fixed dimensions, a choice of tools, and event handlers. The two portlets can be seen below:

How to do it...

1. 1. Create a naming container for your code and define the Portlet class as an extension of the Ext.Panel class:

   Ext.ns('Dashboard');
   Dashboard.Portlet = Ext.extend(Ext.Panel, {
   

2. 2. Preconfigure the portlet. All instances of this class will use these settings by default:

   initComponent: function() {
   Ext.apply(this, {
   anchor: '100%',
   frame: true,
   collapsible: true,
   draggable: true,
   height: 150, // Default height and widths.
   width: 200,
   tools: [{
   id: 'gear',
   handler: function() {
   // Put common handler code here.
   Ext.Msg.alert...