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

Building an Ext JS plugin

Let us start developing an Ext JS plugin. In this section we will develop a simple SMS plugin, targeting the Ext JS textareafield component. The feature we wish to provide for the SMS functionality is that it should show the number of characters and the number of messages on the bottom of the containing field. Also, the color of the text of the message should change in order to notify the users whenever they exceed the allowed length for a message.

Here, in the following code, the SMS plugin class has been created within the Examples namespace of an Ext JS application:

Ext.define('Examples.plugin.Sms', {

  alias : 'plugin.sms',

  config : {

    perMessageLength : 160,
    defaultColor : '#000000',
    warningColor : '#ff0000'


  constructor : function(cfg) {

    Ext.apply(this, cfg);


  init : function(textField) {

    this.textField = textField;
    if (!textField.rendered) {
      textField.on('afterrender', this.handleAfterRender, this);
    else {
  handleAfterRender : function() {

      scope : this,
      change : this.handleChange

    var dom = Ext.get(this.textField.bodyEl.dom);

    Ext.DomHelper.append(dom, {
      tag : 'div',
      cls : 'plugin-sms'


  handleChange : function(field, newValue) {

    if (newValue.length > this.getPerMessageLength()) {
      field.setFieldStyle('color:' + this.getWarningColor());
    else {
      field.setFieldStyle('color:' + this.getDefaultColor());


  updateMessageInfo : function(length) {

    var tpl = ['Characters: {length}<br/>', 'Messages:{messages}'].join('');
    var text = new Ext.XTemplate(tpl);
    var messages = parseInt(length / this.getPerMessageLength());

    if ((length / this.getPerMessageLength()) - messages > 0) {

      length : length,
      messages : messages


  getInfoPanel : function() {




Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

In the preceding plugin class, you can see that within this class we have defined a "must implemented" function called init. Within the init function, we check whether the component, on which this plugin is attached, has rendered or not, and then call the handleAfterRender function whenever the rendering is. Within this function, a code is provided, such that when the change event fires off the textareafield component, the handleChange function of this class should get executed; simultaneously, create an HTML <div> element within the handleAfterRender function, where we want to show the message information regarding the characters and message counter. And the handleChange function is the handler that calculates the message length in order to show the colored, warning text, and call the updateMessageInfo function to update the message information text for the characters length and the number of messages.

Now we can easily add the following plugin to the component:

    xtype : 'textareafield',
    plugins : ['sms']

Also, we can supply configuration options when we are inserting the plugin within the plugins configuration option to override the default values, as follows:

plugins : [Ext.create('Examples.plugin.Sms', {
  perMessageLength : 20,
  defaultColor : '#0000ff',
  warningColor : "#00ff00"