It is regarded as best practice to create each of your components as extensions of Ext JS' own components and store them in separate files. This approach aids code reuse, helps organize your code and makes maintenance a much easier task. In this recipe, we will discuss how to go about extending an Ext JS component to create a pre-configured class and then configuring it to make our own custom component.
We will define an extension of the Ext.panel.Panel class to create a simple display panel.
Define a new class under the
Cookbooknamespace, which extends theExt.panel.Panelclass:Ext.define('Cookbook.DisplayPanel', { extend: 'Ext.panel.Panel' });Override the
Ext.panel.Panel's initComponentmethod and call the parent class'initComponentmethod:Ext.define('Cookbook.DisplayPanel', { extend: 'Ext.panel.Panel', initComponent: function(){ // call the extended class' initComponent method this.callParent(arguments); } });Add our own component configuration to the
initComponentmethod by applying it to the class itself:initComponent: function(){ // apply our configuration to the class Ext.apply(this, { title: 'Display Panel', html: 'Display some information here!', width: 200, height: 200, renderTo: Ext.getBody() }); // call the extended class' initComponent method this.callParent(arguments); }Create an instance of our preconfigured class and show it:
var displayPanel = Ext.create('Cookbook.DisplayPanel'); displayPanel.show();
Our first step creates our new class definition and tells the framework to give our new class all the functionality that the Ext.panel.Panel has, through the use of the extend config option.
We then introduce an override for the initComponent method, which is used by each component to add its own configuration and perform any actions that are needed to set the component up. In order to ensure that this component behaves as it should, we call the parent class' initComponent method (in this case, Ext.panel.Panel) using the callParent method.
Next, we give our new class the configuration we want. We do this by using the Ext.apply method, which merges our configuration object into the class itself.
We are now able to instantiate our new class using its defined name and it will automatically be configured with all the properties we applied in the initComponent method. This means we can create a DisplayPanel anywhere in our code and only have to define it once.
We can take this idea further by integrating our own functionality into an extended component by overriding its functions. We are going to create a custom TextField that includes some information text below the field to help the user complete the form field correctly:
First we create our basic structure for extending the
Ext.form.field.Textcomponent:Ext.define('Cookbook.InfoTextField', { extend: 'Ext.form.field.Text' });Next, we override the
onRenderfunction, which is used to render the component to the page. In our override, we immediately call the parent'sonRendermethod, so the field is fully rendered before our code is executed. We then use theExt.core.DomHelperclass to insert a newdivelement, after the textfield, containing the value from the component'sinfoTextproperty:Ext.define('Cookbook.InfoTextField', { extend: 'Ext.form.field.Text', onRender: function(){ this.callParent(arguments); // insert our Info Text element Ext.core.DomHelper.append(this.getEl(), '<div>' + this.infoText + '</div>'); } }, function(){ console.log('Cookbook.InfoTextField defined!'); });We can now create our new
InfoTextFieldclass wherever we like and display any value that we would like using theinfoTextconfig option, like this:var infoTextField = Ext.create('Cookbook.InfoTextField', { renderTo: Ext.getBody(), fieldLabel: 'Username', infoText: 'Your Username must be at least 6 characters long.' }); infoTextField.show();
Creating custom classes with the new Ext JS class system for an explanation on creating classes and their structure.
We extend classes throughout this book, however, if you would like to see it in action we suggest you take a look at Modeling a data object, in Chapter 7, Working with the Ext JS Data Package.
The next recipe covers overriding in more detail.