CODEWITHSUNDEEP
javascriptextjsextjs4extjs4.1
cacharry
cacharry

Reputation: 115

Issues upgrading from extjs version 4.0.7 to 4.1.1

Good Afternoon!

I am trying to upgrade from version 4.0.7 to 4.1.1 (downloaded as a free 45 days trial) in order to test the version 4.1 in the application we have running at the moment and see how many changes we may need to do before the formal upgrade, the only step I did was pointing my jsp file to the new files in the head of the page as follows:

<link rel="stylesheet" href="3rdParty/ext-4.1.1a/resources/css/ext-all.css"/>

<script type="text/javascript" charset="utf-8" src="3rdParty/ext-4.1.1a/ext-all-debug.js"></script>

And in my jsp page I am doing something very simple, just creating a button, I used this code:

  <body>
            <script type="text/javascript">

                Ext.create('Ext.Button', {
                    text: 'Test window',
                    width: 75,
                    renderTo:  Ext.getBody(),
                    handler: function() {
                        alert("the button worked"");
                    }
                });
    </script> 
    </body>

but nothing is being displayed when I run this page, when I use the development tool of google chrome, the console is displaying me this message:

Uncaught TypeError: Cannot call method 'createChild' of undefined

When I debugged the code, the error appears in the file ext-all-debug.js:20687

getStyleProxy: function(cls) {
       var result = this.styleProxyEl || (Ext.AbstractComponent.prototype.styleProxyEl = Ext.resetElement.createChild({


               style: {
                   position: 'absolute',
                   top: '-10000px'
               }
           }, null, true));


       result.className = cls;
       return result;
   },

What step am I missing?, I am pretty new in extjs and as far as I understand, the upgrade from version 4.0.7 to 4.1.1 should not involve many steps different to some different ways of writing the code, can somebody help me please?

Many thanks in advance!

Upvotes: 1

Views: 942

Answers (1)

Izhaki
Izhaki

Reputation: 23586

Try to put your code inside an onReady block:

<body>
<script type="text/javascript">

    Ext.onReady( function() {            
        Ext.create('Ext.Button', {
            text: 'Test window',
            width: 75,
            renderTo:  Ext.getBody(),
            handler: function() {
                alert("the button worked");
            }
        });
    });

</script> 
</body>

Upvotes: 2

Related Questions