Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    14
    Vote Rating
    0
    NepalPro is on a distinguished road

      0  

    Exclamation Limitation of the Ext.extend functionality ?

    Limitation of the Ext.extend functionality ?


    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>
    Last edited by NepalPro; 16 Dec 2011 at 1:55 AM. Reason: To put it in correct format

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,049
    Vote Rating
    657
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1

Tags for this Thread