Sencha Cmd chokes on third party class

[mpost]

I have a number of Ext classes that extend a third party component, Leaftlet map. For example:

Ext.define('MyApp.map.GeoIcon', 
   {
        extend:L.Icon,
         ...
   } 

where L.Icon comes from Leaflet.

In my HTML page, I have the following script tags:

<script src="lib/extjs/ext-debug.js"></script>
<script src="lib/leaflet/leaflet.js"></script>
<script src="app/app.js"></script> 

This app loads and works just fine. However, the "sencha compile" command is choking on these derived classes. (Compile was barfing on a particular file. I commented out all references to the Leaftlet API and the compiler proceeded to barf on the next file.) I'm using the following command line:

sencha compile -classpath=lib/extjs/src,lib/leaftlet,app page -yui -in app.html -out cmd/app.html 

How can I make sencha cmd happy in this case? I'm open to modifying the above code, but I don't see a way to either require the third party code or configure the loader to understand it.

[themightychris]

Is L.Icon an Ext class? By extending it your making the compiler figure it out. The dependency tree has to be nothing but Ext classes.

I keep all references to 3rd-party libraries wrapped in closures, so they are not evaluated with Ext.define() but later on when the class wrapping them is constructed or first used. Then just make sure the 3rd party scripts are included before you use it, or concat'd at the beginning or end of your compiled script.

[el.weilando]

I keep all references to 3rd-party libraries wrapped in closures, so they are not evaluated with Ext.define() but later on when the class wrapping them is constructed or first used. Then just make sure the 3rd party scripts are included before you use it, or concat'd at the beginning or end of your compiled script.

I have exactly the same problem.

Can you tell us a little bit more about your workaround, please?
How wrap you the references in closures and how do you construct them later?

[mpost]

Can you tell us a little bit more about your workaround, please?
How wrap you the references in closures and how do you construct them later?

More information would definitely be helpful and appreciated.

[themightychris]

What I mean is that if you want to make use of L.Icon, it can't be in a context that gets evaluated when Ext.define is called like it is in your example, where it is evaluated as soon as the file is parsed and passed to Ext.define:

Ext.define('MyApp.map.GeoIcon', {
        extend:L.Icon,
         ...
   }
);

Aside from it not being possible to extend a non-ext class, if you did need to reference something external as a config option (common when passing a google maps LatLng object for a map center), you must set the option in initComponent (or constructor if the class isn't a component):

Ext.define('MyApp.map.GeoIcon', {
    extend: 'Ext.Component'

    ,initComponent: function() {
        this.html = '<img src="'+L.Icon+'">';
        this.callParent();
    }
});

Visually, you want to make sure that all references to the external library (L.* in this example) is within a function() { ... } definition so that it won't be evaluated while Ext.define() is being called. The framework needs to be able to call all your Ext.define()s serially when it creates the optimized build and you cannot load any non-ext code in the middle, so your Ext.define's must all be able to be evaluated with your external library being loaded either before Ext entirely or after the app's requirements are all loaded but onReady hasn't fired yet