Saki's Blog » extension

Writing a Big Application in Ext (Part 3)

Saki — Sat, 14 Mar 2009 12:53:34 +0000

Important

If you have not already done so, study Writing a Big Application in Ext (Part 1) and Writing a Big Application in Ext (Part 2)before you read this article. It would be very hard, if not impossible, to understand concepts explained here before you fully understand the first and second part.

Introduction

Helping on the forum and reading code of others that failed to extend Ext classes, revealed more errors that users, especially beginners, commonly make. Therefore, I’ve decided to start this article that will collect these errors and will explain why the errors are errors. I mean it as loosely ended as I may discover more errors and ways of avoiding them so I plan just to add them to this article, not endlessly create parts 4, 5, etc…

… continued: Most Common Sources of Troubles

Here we go:

Unnecessary Extending
Adding Objects to Prototype
Hard Coding ids

Unnecessary Extending

The main reasons for extending are:

re-usability
adding functionality
combination of them

so we extend if we need a re-usable component or we need to add a functionality (new methods) or both. If we are after re-usability the extension can be as simple as:

MyPortlet = Ext.extend(Ext.Panel, {
     anchor:'100%'
    ,draggable:true
    ,defaultType:'mygraph'
});

You see what happens? We are going to use MyPortlet many times so instead of scatter the above configuration in 10,000 lines application code 100 times, we create this simple extension and we save 297 lines of code.

The other aspect is that if we upgrade our ‘mygraph’ to ‘mygraph_new’ the only place where to change it is our extension saving us searching out code for all occurrences of ‘mygraph’ (100 times) and replacing it with ‘mygraph_new’ 100 times.

(Well, 100 is exaggerated, but you get the point, right?)

If we are after adding functionality, which can be also simple, we add some “logic”:

MyPanel = Ext.extend(Ext.Panel, {
    onRender:function() {
        MyPanel.superclass.onRender.apply(this, arguments);
        alert('Rendered');
    }
});

Here we add some logic to Panel, it does more that it did before.

There is no need to extend in all other cases.

Adding Objects to Prototype

Run this code first:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
  <title id="page-title">Extending Error: Object in prototype</title>
  <script type="text/javascript">
  Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
  Ext.onReady(function() {
    MyPanel = Ext.extend(Ext.Panel, {
         layout:'fit'
        ,panelConfig: {
            bodyBg:'red'
        }
 
        ,initComponent:function() {
            var config = {
                bodyStyle:'background-color:' + this.panelConfig.bodyBg
            }; // eo config object
 
            // apply config
            Ext.apply(this, Ext.apply(this.initialConfig, config));
 
            MyPanel.superclass.initComponent.apply(this, arguments);
        } // eo function initComponent
 
        ,applyBackground:function(color) {
            this.panelConfig.bodyBg = color;
            this.body.applyStyles({'background-color':color});
        } // eo function applyBackground
 
    }); // eo extend
 
    var p1 = new MyPanel({
         title:'Panel with Blue Background'
        ,renderTo:Ext.getBody()
        ,width:240
        ,height:160
    });
 
    p1.applyBackground('blue');
 
    var p2 = new MyPanel({
         title:'Panel with Red Background'
        ,renderTo:Ext.getBody()
        ,width:240
        ,height:160
    });
 
  });
  </script>
</head>
<body></body>
</html>

What do we expect? It is written in titles of panels: Top panel (p1) should have blue body background because we set it to it after it is created. And bottom panel (p2) should have red because we just create default MyPanel.

But it is blue too!!! Why? The reason is simple: panelConfig is object that is created during class definition and it is added to MyPanel prototype. Objects (arrays too) are accessed by reference so p1 and p2 share the same instance of panelConfig. Setting bodyBg property in applyBackground method changes this single instance of panelConfig object. So we create p2 with blue background too.

You see, here it is clearly and immediately visible that something went wrong but making this error can lead to weeks of wasted debugging time in real applications. Imagine you have a store in prototype…

Hard Coding ids

Very simple, but deadly mistake is to set ids in the extension either to the main extension object or on its items, toolbars, buttons, etc. If a hard coded ids are set we cannot create two or more instances of our extension, can we?

Loose End

That’s all for now but if I discover more errors I will add them above.

Stay tuned!

Do not forget to read Part 1 and Part 2 of this article.

Follow up: Factory Functions in Ext Extensions (Abstract Classes)

New Example

Saki — Mon, 09 Feb 2009 07:31:36 +0000

Hi,

I’ve just uploaded the example of populating a combo with data loaded from server on form load.

http://examples.extjs.eu

Enjoy!

Extension or Plugin?

Saki — Mon, 28 Apr 2008 01:05:26 +0000

Preface

I believe that many of Ext users have already thought about adding some custom functionality that is not present in core Ext Library to a class. Something that is specific to their applications or not that specific so that others could also be interested in such feature.

OK, we have the idea, we know what the new code should do, we even know how to write it, but what should we write? An Extension or a Plugin?

Extensions and Plugins

The fact we are talking about them together and the fact that we can be even indecisive which one to use infers that they must have something in common. True, they have. They both add some functionality to an existing library or modify a feature of the library.

Neither extension nor plugin can exist standalone; they have to have a component, a class, they extend or plug into.

Extension

An extension (in Ext world) is a derived class in fact. Let’s imagine we have a basic class with some general methods to which we want to add some more specific methods. So, using the inheritance framework of an library or a language we create new class that contains methods of both basic class and new added methods.

We choose an existing Ext class, we extend it using Ext.extend function and the result is new class with new name. For example:

MyExtension = Ext.extend(Ext.Panel, {/* object with new properties and methods */});

Later on, when we need an object:

var myExtension = new MyExtension({/* optional configuration object */});

Plugin

Plugin does not need any exiting Ext class to exist. Although plugins often extend Ext.util.Observable it is not a must; they can be written from scratch. Sure, writing a plugin without having a target we want to plug it in has no sense so we always write plugins for an existing Ext class: panel, form, grid, data view, etc.

For example, we create plugin as:

MyPlugin = function() {/* code */};

And then we use it this way:

var myPanel = new Ext.Panel({
     plugins:[new MyPlugin({/* optional config object */})]
    ,// rest of myPanel configuration
});

Extension or Plugin?

It depends… You can often achieve same result with extension or with plugin. Sometimes it is only that programmer likes plugins more so he writes a plugin or he likes extensions more so he writes an extension. However, plugins are more suitable for adding smaller features and extensions are more suitable for adding more complex functionalities. Plugins can be easily removed from components, extensions are usually more tied to applications.

Summary

An extension is a new class with a new name, based on an existing base class and created at definition time. Extension must be instantiated as any other class to work.
Plugin plugs into an existing class, is easily removed, is defined during definition time and is initialized during base class initialization.

JavaScript Extension File Pattern

Saki — Thu, 03 Apr 2008 02:13:35 +0000

// vim: ts=4:sw=4:nu:fdc=4:nospell
/*global Ext, AnExtension */
/**
 * @class AnExtension
 * @extends Ext.Panel
 *
 * AnExtension description
 *
 * @author    Ing. Jozef Sakáloš
 * @copyright (c) 2010, by Ing. Jozef Sakáloš
 * @date      
 * 11. March 2010
 * 
 * @version   1.0
 * @revision  $Id$
 *
 * @license AnExtension.js is released under the 
 * GNU GPL 3.0
 * license. It’s free for use in GPL and GPL compatible open source software, 
 * but if you want to use the component in a commercial software (closed source),
 * you have to get a commercial license.
 */
 
// create namespace
Ext.ns('AnExtension');
 
/**
 * Creates new AnExtension
 * @constructor
 * @param {Object} config A config object
 */
AnExtension = Ext.extend(Ext.Panel, {
 
    // default config (it can be changed while instantiating)
    border:false
 
    // {{{
    // uncomment constructor if you need it, e.g. if you need listeners
//    ,constructor:function(config) {
//        // parent constructor call pre-processing - configure listeners here
//        config = config || {};
//        config.listeners = config.listeners || {};
//        Ext.applyIf(config.listeners, {
//            // add listeners config here
//        });
//
//        // call parent constructor
//        AnExtension.superclass.constructor.call(this, config);
//
//        // parent constructor call post-processing
//
//    } // eo function constructor
    // }}}
    // {{{
    ,initComponent:function() {
 
        // hard coded config (it cannot be changed while instantiating)
        // {{{
        var config = {
        }; // eo config object
 
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        // }}}
 
        // call parent
        AnExtension.superclass.initComponent.apply(this, arguments);
 
        // parent call post-processing, e.g. install event handlers
 
    } // eo function initComponent
    // }}}
    // {{{
    ,afterRender:function() {
 
        // parent call pre-processing
 
        // call parent
        AnExtension.superclass.afterRender.apply(this, arguments);
 
        // parent call post-processing, e.g. install event handlers on rendered components
 
    } // eo function afterRender
    // }}}
 
    // any other added/overriden methods
}); // eo extend
 
// register xtype
Ext.reg('anextension', AnExtension); 
 
// eof

Saki's Blog » extension

Writing a Big Application in Ext (Part 3)

Important

Introduction

… continued: Most Common Sources of Troubles

Unnecessary Extending

Adding Objects to Prototype

Hard Coding ids

Loose End

New Example

Extension or Plugin?

Preface

Extensions and Plugins

Extension

Plugin

Extension or Plugin?

Summary

Further reading

JavaScript Extension File Pattern