Writing a Big Application in Ext (Part 3)

14. March 2009 – 14:53

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:

  1. Unnecessary Extending
  2. Adding Objects to Prototype
  3. 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:

1
2
3
4
5
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”:

1
2
3
4
5
6
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)


StumbleUpon Toolbar
  1. 21 Responses to “Writing a Big Application in Ext (Part 3)”

  2. hi saki, very good info you have here, i been using your model for extending, i had a problem with ids on a extension of a formpanel when i used vtypes on some fields that this panel had i was trying to validate a password verification, what i did to solve it was asign the ids dinamicly when the panel was created i don´t know if it was correct but it work, maybe you can do something similar to share.
    Another thing that I been dealing a lot is the scope on the extension maybe you can talk i little about this. thanks a lot for such good information, :)

    By manduks on Mar 19, 2009

  3. Assigning dynamic id is fine as long as you can ensure they are unique on the html page.

    What scope issues do you have in mind?

    By Saki on Mar 19, 2009

  4. Excellent post. Your examples and extensions are always top notch. Thanks!

    By Jason Boxman on Apr 3, 2009

  5. You’re welcome; I’m glad they help.

    By Saki on Apr 4, 2009

  6. Saki,

    First thanks for all of your efforts and patience to educate all of us. One point I’m confused on here is that in part 1 you advocate creating extensions for each application component but in part 3 you are tackling “over use of extensions”. Maybe I’m missing the point, but if I’m creating non-reusable, but self contained modular components within my application like a specific implementation of a grid or a tree, should I not be creating that as an extension as I thought your were saying in part 1?

    By Charles Ginzel on Apr 5, 2009

  7. Maybe it’s not formulated exactly but if you do not plan to reuse a component you do not need to extend. However, if it better suits to your app, programming practices, file organization, etc, you can extend if you want if you do it properly and w/o mistakes.

    By Saki on Apr 6, 2009

  8. the red/blue issue: i miss an example how to save the color not in a single instance variable!?

    By arno.nyhm on Apr 7, 2009

  9. If you move panelConfig to initComponent then it is not in prototype and it will work.

    By Saki on Apr 7, 2009

  10. Hi,Thanks for the article.I appreciate your help always.
    I have 20-25 grids in my app.all with different fields in store and different column headers in column model and also different context menus.I am using EditorGridPanel for some and just GridPanel for others.
    Do you think extension of grid panel is needed here ,can it help in avoiding to write 25 column models and store.and provide a generic way to enter store and context menus and column headers?

    By Ash on Apr 9, 2009

  11. Post please your question to forum and PM me the link to it. I guess many others can face the same problem so better would be to answer there.

    By Saki on Apr 10, 2009

  12. I\’m curious, why is initComponent not documented in the Ext API reference? It seems like it appears in quite a few examples but isn\’t officially a public API.

    By Jon on Aug 18, 2009

  13. Hi. Thank you for your articles.
    Can you tell how to destroy ext components correctly? I have faced with a lot of memory leaks.

    Thanks.

    P.S. Sorry for my English.

    By Yura on Nov 25, 2009

  14. Hi Saki,
    Thanks for sharing the nice techniques on ExtJS. I have just started working on this nice framework. I am trying to use it in my new application, which has lot of main and sub modules. When I am surfing for some design concepts I came across think link: http://www.sencha.com/forum/archive/index.php/t-71873.html

    Where you mentioned that, \

    By Jaya on Sep 15, 2010

  15. Hi Saki,
    Thanks for sharing the nice techniques on ExtJS. As part of my new App design concepts I came across the link: http://www.sencha.com/forum/archive/index.php/t-71873.html
    Where you mentioned that \’Have you seen my examples? They\’re tree on the left and ifram in the center.\’
    If possible, can you please share/point me to sample code to implement the same.

    By Jaya on Sep 15, 2010

  16. Just dig into http://examples.extjs.eu

    By Saki on Sep 16, 2010

  17. - When the person exhales that vapor, only odorless vapor is expelled.
    Get the same amount of nicotine as a regular cigarette.

    Actually it is the lightest of it’s type I’ve tried.

    By Fake Cigarettes To Quit Smoking on Jan 14, 2014

  18. christian louboutin pome lady peep 150mm escarpin ouvert pas cher escarpins louboutin mal aux pieds escarpins noirs louboutin pas cher chaussure solde femme christian louboutin femme escarpin lucifier bow 45mm destockage chaussures chaussures femmes pas cher christian louboutin femme yo yo lady glitter 85mm louboutins vero cuoio louboutin london escarpins louboutin ronron chaussures christian chaussures a talon pas cher chaussure homme ville escarpin turquoise louboutin soldes chaussures louboutin christian louboutin escarpins site de chaussures en ligne chaussures soldes femme vrai louboutin pas cher louboutins destockage louboutins uk escarpin soldes louboutins 8 inch louboutins pas chère christian louboutin a paris chaussure style louboutin site de la mairie christian louboutin bottines chelitta 85mm chaussures louboutin homme pas cher louboutins vente priv??e louboutins knock off shoes soldes louboutin 2012 imitation de chaussure louboutin christian louboutin contrefa?on magasin d chaussure louboutins monaco christian louboutin boutique louboutin mall chaussures louboutin ? lille ballerines femme escarpins louboutin pigalle chaussures pas chere louboutins espadrilles chaussure homme mode louboutin femme compensé collection louboutin louboutin soldes 2013 escarpins a talons chaussures louboutin en promo louboutin prix paire magasins de chaussures louboutin bottes alta ariella rayures de python chaussures christian louboutin femme chaussures louboutins pas cher christian louboutin homme online louboutins taille 40 christian louboutin sandale balota 150mm louboutins 85 louboutin homme semelle rouge louboutin homme collection printemps site de la mairie louboutins nails lou boutin france louboutin femme site officiel maloles chaussures christian louboutin botte cuissardes franges christian louboutin pas cher arnaque louboutins knock off shoes christian louboutin shoes online christian louboutin entreprise chaussures louboutin toulouse chaussures timberland chaussure louboutin taille 41 christian louboutin escarpin love me louboutin homme 43 chaussure louboutin a bruxelles chaussures italiennes femme.

    By christian louboutin 68 rue du faubourg st honor?? camper chaussures soldes on Jan 29, 2014

  19. The very first thing to consider during this order
    is that it will be easier for a person to conserve energy blinds for air
    conditioning.

    By woodshuttersguide.sosblogs.com on Mar 4, 2014

  20. I was layed off and can not locate a task due to the fact no one wants to employ a person having a university education unless you progress from this state does not mean I can not use the system when my household actually desires it.
    Cheap authentic louis vuitton handbags outlet barrel of bargains http://www.web-hosting-report.com/louis-vuitton-handbags/

    By Cheap authentic louis vuitton handbags outlet barrel of bargains on Mar 14, 2014

  21. Woah! I’m really digging the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s very difficult to get that
    “perfect balance” between user friendliness and visual appearance.
    I must say that you’ve done a very good job with this. In addition,
    the blog loads super quick for me on Chrome. Exceptional Blog!

    By films de cul on Mar 14, 2014

  22. Hello there! Do you know if they make any plugins to help with
    SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very
    good results. If you know of any please share. Kudos!

    By mobile games on Apr 14, 2014

Post a Comment