Book Image

Ext JS 4 Plugin and Extension Development

By : Abdullah Al Mohammad
Book Image

Ext JS 4 Plugin and Extension Development

By: Abdullah Al Mohammad

Overview of this book

Ext JS is a pure JavaScript application framework for building interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. Ext JS 4 Plugin and Extension Development is a practical, step-by-step tutorial which guides you to learn and develop ExtJS plugins and extensions. There are a lot of examples with explanations and plenty of code provided to make it easier and quicker to pick up. Starting with the fundamentals, this book introduces some of the ExtJS library and community provided plugins and extensions and finishes with several hands-on, real world development examples. You will get a clear concept of ExtJS plugins and extensions and learn how to use them. You will also learn how to develop an ExtJS plugin and extension by going through several examples with code and screenshots. Ext JS 4 Plugin and Extension Development book will provide you with the knowledge to develop ExtJS plugins and extensions using real-life examples.
Table of Contents (16 chapters)
Ext JS 4 Plugin and Extension Development
About the Author
About the Reviewers

Choosing the best option

When we need to enhance or change the functionality of an existing Ext JS component, we have several ways to do that, each of which has both advantages and disadvantages.

Let us assume we need to develop an SMS text field having a simple functionality of changing the text color to red whenever the text length exceeds the allocated length for a message; this way the user can see that they are typing more than one message. Now, this functionality can be implemented in three different ways in Ext JS, which is discussed in the following sections.

By configuring an existing class

We can choose to apply configuration to the existing classes. For example, we can create a text field by providing the required SMS functionality as a configuration within the listener's configuration, or we can provide event handlers after the text field is instantiated with the on method.

This is the easiest option when the same functionality is used only at a few places. But as soon as the functionality is repeated at several places or in several situations, code duplication may arise.

By creating a subclass or an extension

By creating an extension, we can easily solve the problem as discussed in the previous section. So, if we create an extension for the SMS text field by extending the Ext JS text field, we can use this extension at as many places as we need, and can also create other extensions by using this extension. So, the code is centralized for this extension, and changing one place can reflect in all the places where this extension is used.

But there is a problem: when the same functionality is needed for SMS in other subclasses of Ext JS text fields such as Ext JS text area field, we can't use the developed SMS text field extension to take advantage of the SMS functionality. Also, assume a situation where there are two subclasses of a base class, each of which provides their own facility, and we want to use both the features on a single class, then it is not possible in this implementation.

By creating a plugin

By creating a plugin, we can gain the maximum re-use of a code. As a plugin for one class, it is usable by the subclasses of that class, and also, we have the flexibility to use multiple plugins in a single component. This is the reason why if we create a plugin for the SMS functionality we can use the SMS plugin both in the text field and in the text area field. Also, we can use other plugins, including this SMS plugin, in the class.