• Sign In
  1. Messages

Ext.define not available?

LabKey Support Forum (Inactive)

View Message

view list print
Ext.define not available? Leo Dashevskiy  2012-09-11 11:07
Status: Closed
 
Hello!

Within my module I have


 the "begin.html" file with the following:


<script type='text/javascript'>    LABKEY.requiresExt4ClientAPI(); </script>
...
<script type='text/javascript'>
    LABKEY.requiresScript(
            [
...
                'FlowGraph.js'])
</script>



and then the "FlowGraph.js" file with the following:


Ext.define('LABKEY.ext.FlowGraph', {

    extend : 'Ext.panel.Panel',

    constructor : function(config) {
...
    this.callParent([config]);
    }
});


I get the error:

Uncaught TypeError: Object #<Object> has no method 'define' FlowGraph.js:9
(anonymous function)


and in the console Ext in actuality does not have the 'define' method (though Ext4 does), but it is being used elsewhere all over the place -- what am I not doing right and how to fix that?

Thanks.
-Leo
 
 
Nick Kerr responded:  2012-09-11 11:25
Hey Leo, are you trying to use Ext 3 or 4 to define the new class? If Ext 4 I'd recommend the following:

<script type="text/javascript">
    LABKEY.requiresExt4Sandbox(true);
</script>
<script type="text/javascript">
    LABKEY.requiresExt4ClientAPI();
    LABKEY.requiresScript('FlowGraph.js');
</script>

<!-- inside of FlowGraph.js -->
Ext4.define('LABKEY.ext.FlowGraph', {...});

<!-- In begin.html -->
<script type="text/javascript">
    Ext4.onReady(function() {

        var flowGraph = Ext4.create('LABKEY.ext.FlowGraph', {...});
    
    });
</script>
 
Leo Dashevskiy responded:  2012-09-11 12:12
Hey, Nick!

I am overwhelmingly using Ext3 (but I do use Ext4 on one instance, that is why I'm loading it also), so for the above I am trying to use Ext3, which gets loaded automatically, right?

I just showed that I'm also loading Ext4 for my needs, since it seems to me that there is a mix up or something, because I don't see Ext.define but do see Ext4.define.

So seems like I'm doing pretty much the same as you are suggesting, but with Ext(3), and it's not working for me...
 
Leo Dashevskiy responded:  2012-09-11 12:31
So I was using DataViewsPanel.js as inspiration and it is using Ext4.

When I removed the Ext4 loading (first <script> block above) all together - still Ext does not have "define" defined, though the docs for Ext 3.4 have it: http://docs.sencha.com/ext-js/3-4/#!/api/Ext-method-define

Did you guys "customize" your Ext(3) by trimming and removing certain things?

Though, yet another site says that the way to extend classes in Ext3 is not through Ext.define, but through Ext.extend, then I'm not sure, whey Ext.define is present in the docs.

I'm confused. Can anyone shed any light on this?

Is there a good example within Labkey of extending a class in Ext(3)?

Thanks.
 
Nick Kerr responded:  2012-09-11 12:51
Hi Leo,

I think this is a mistake in their docs. Ext.define is not present in Ext 3 and the method we have always used for defining new classes in Ext 3 is to use Ext.extend.

Here is a Sencha Blog post discussing some of the differences in Ext 3 & 4 class systems.

http://www.sencha.com/blog/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/

We do not remove or trim any methods from Ext.

Thanks,
Nick
 
Leo Dashevskiy responded:  2012-09-12 11:02
Resolved: seems like typo in Ext 3 docs indeed.