Limitation of the Ext.extend functionality ?

**NepalPro** · 16 Dec 2011 1:30 AM

Limitation of the Ext.extend functionality

Ext version tested:

All

Browser versions tested against:

Any

Description:

Create a new class using Ext.extend functionality.
This class has override object namely SUB_JSON.
Setting this value uniquely upon instantiation of objects, retains only the last value that was set to it.
Not sure if this is expected/unexpected behaviour of javascript within Ext.extend

The result that was expected:

Each object should have had their own copy of the SUB_JSON object property

The result that occurs instead:

all object are having the property assigend to the last created object

Test Case:

Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Testing Bug</title>
 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../../ext-all.js"></script>
  <script>
        var MasterControlPanel = Ext.extend(Ext.Panel, {
            SUB_JSON:{
                defaultTitle: "Hello Default BASE Title"
            }
            , width : 400
            , initComponent:function(){
                MasterControlPanel.superclass.initComponent.call(this);
                alert(this.SUB_JSON.defaultTitle); //this should have ALWAYS displayed - "Hello Default BASE Title"
                
                //however on init of the second instance of MasterControlPanel object it displays the value of previous
                this.SUB_JSON.defaultTitle = this.title
            }
        });
   
        Ext.onReady(function(){
  
            alert('Creating First Panel');
            var panel1 = new MasterControlPanel({title: 'First Panel Title',renderTo: 'panelOne', html: "Panel 1"}); 
            alert('Creating  Second Panel');
            var panel2 = new MasterControlPanel({title: 'Second Panel Title',renderTo: 'panelTwo', html: "Panel 2"});
            alert('Creating  Third Panel');
            var panel3 = new MasterControlPanel({title: 'Third Panel Title',renderTo: 'panelThree',html: "Panel 2"});
            alert("Panel 1 Default Title = " + panel1.SUB_JSON.defaultTitle
              + "\n\nPanel 2 Default Title = " +  panel2.SUB_JSON.defaultTitle
              + "\n\nPanel 3 Default Title = " +  panel3.SUB_JSON.defaultTitle
             ); //All this outputs the same data i.e.: 'Third Panel Title' which should not have been the case
    
        });
    </script>
 </head>
 <body>
        <div id="panelOne" class="container"></div>
        <div id="panelTwo" class="container"></div>
        <div id="panelThree" class="container"></div>
 </body>
 </html>

**evant** · 16 Dec 2011 3:23 AM

This isn't a bug. When you use extend anything in the class definition gets copied to the class prototype. In this case, your object is shared across each instance of your class. To create a per-instance version, use:

Code:

this.foo = {};

Inside initComponent.

Limitation of the Ext.extend functionality ?

Thread Tools

Search Thread

Display

Limitation of the Ext.extend functionality ?

Limitation of the Ext.extend functionality ?

Tags for this Thread