Hybrid View

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default Sencha Cmd chokes on third party class

    Sencha Cmd chokes on third party class


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

    PHP Code:
    Ext.define('MyApp.map.GeoIcon'
       {
            
    extend:L.Icon,
             ...
       } 
    where L.Icon comes from Leaflet.

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

    PHP Code:
    <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:

    PHP Code:
    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.
    Last edited by mpost; 12 Nov 2012 at 9:37 PM. Reason: fix code blocks

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    245
    Vote Rating
    22
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    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.
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    83
    Vote Rating
    3
    el.weilando is on a distinguished road

      0  

    Default


    Quote Originally Posted by themightychris View Post
    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?

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default


    Quote Originally Posted by el.weilando View Post
    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.

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    245
    Vote Rating
    22
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    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:

    Code:
    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):

    Code:
    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
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi