Results 1 to 2 of 2

Thread: Limitation of the Ext.extend functionality ?

    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
    Vote Rating

    Exclamation Limitation of the Ext.extend functionality ?

    Limitation of the Ext.extend functionality

    Ext version tested:
    • All

    Browser versions tested against:
    • Any

    • 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:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
     <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>
            var MasterControlPanel = Ext.extend(Ext.Panel, {
                    defaultTitle: "Hello Default BASE Title"
                , width : 400
                , initComponent:function(){
                    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
                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
            <div id="panelOne" class="container"></div>
            <div id="panelTwo" class="container"></div>
            <div id="panelThree" class="container"></div>
    Last edited by NepalPro; 16 Dec 2011 at 1:55 AM. Reason: To put it in correct format

  2. #2
    Sencha User evant's Avatar
    Join Date
    Apr 2007
    Sydney, Australia
    Vote Rating


    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: = {};
    Inside initComponent.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts