1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    30
    Vote Rating
    1
    Csegota is on a distinguished road

      1  

    Default Using Sencha Cmd with existing applications

    Using Sencha Cmd with existing applications


    In regards to ExtJS 4.2.2 docs "Using Sencha Cmd with Ext JS":

    Existing Applications
    The key pieces of scaffold produced by Sencha Cmd are these:

    .sencha/ app.json build.xml index.html The first three of these can be simply copied from an application generated to a temp folder. An existing application will typically have some markup entry page and if this is not "index.html", you can add the following to your "app.json":


    { ... "indexHtmlPath": "index.php" } Naturally, the value should be whatever is correct for the application. In order for the generated build script to understand this markup file, however, the file should contain the standard boilerplate found in the generated "index.html":
    **********************************************************************************
    In regards to "The first three of these can be simply copied from an application generated to a temp folder. " is that supposed to read "copied from a generated application to an existing app folder? Or is that supposed to be read "copied from an application which was generated into a temp folder? In which case it should still say that those files generated into the temp folder then need to be copied into an existing application?

    In regards to editing the app.json file. My app.json has:

    {
    "name": "GenAppNonWS",

    "requires": [
    ],

    "id": "bdf81e7b-bc56-45f5-a46e-8bf28318b792"
    }
    What is the relevance of that id? and if I copy this exactly into an existing application is that going to cause issues? I'll have to change the name also. and the indexhtmlpath.

    Thanks in advance for the clarification.

    Christian

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    21
    Vote Rating
    2
    hlurger is on a distinguished road

      0  

    Default


    I'am also very interested in this topic.

    Until now I have always build my app with the Sencha Cmd V2.0 tools. (sencha create jsb AND sencha build)
    I'm a little bit disappointed that there is no guide how to adapt an existing MVC-structure to the new Sencha Cmd.

    Another interesting fact is, that if you go to the newes "Starting Guide" (http://docs.sencha.com/extjs/4.2.2/#...etting_started) you will still see the OLD commands!!

    For applications built on top of a dynamic server-side language like PHP, Ruby, ASP, etc., you can simply replace index.html with the actual URL of your application:

    sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3This scans your index.html file for all framework and application files that are actually used by the app, and then creates a JSB file called app.jsb3. Generating the JSB3 first gives us a chance to modify the generated app.jsb3 before building - this can be helpful if you have custom resources to copy, but in most cases we can immediately proceed to build the application with the second command:

    sencha build -p app.jsb3 -d .
    If you try to run the first command you get...

    Sencha Cmd v4.0.1.45
    [ERR] Unknown command: "create"
    The reason why I have to upgrade is this: http://www.sencha.com/forum/showthread.php?256139-ExtJS-4.2-build-with-Grid


  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    21
    Vote Rating
    2
    hlurger is on a distinguished road

      1  

    Default


    Csegota, I still don't know what the id in the app.json is good for...

    But, I got my existing app compiling with the new sencha cmd tools

    Here is the guide I was looking for:
    http://docs.sencha.com/extjs/4.2.2/#!/guide/command_app-section-existing-applications

    S
    ometimes you should just stop working I have read it yesterday again and again but eyertime I overlooked the information I was seeking for.

    My goal was, to come as close as possible to the result of the old build process (getting an app-all.js).
    The new CMD-tools also try to optimize the CSS files and the resources, but in my case I don't need all those stuff. You can skip those parts. You even don't need ruby installed to run 'sencha app build'

    Therefore I had to do following steps:
    • Follow the guide for existing application. (create temp projcet; copy .sencha, app.json, ..
    • .sencha\workspace\sencha.cfg
      • ext.dir= Tell the cmd where the SDK is
      • workspace.packages.dir=${ext.dir}/packages (We take the theme packes from ext.dir not from workspace.dir)
    • .sencha\app\sencha.cfg
    Code:
    build.classes.name=app-all.js
    build.dir=${workspace.build.dir}
    skip.page = true
    skip.js = false
    skip.resources = true
    skip.sass = true
    skip.slice = true
    skip.theme = true
    
    <!--
     * skip.page        Do not build the HTML page.
     * skip.js          Do not build the output js code file(s)
     * skip.resources   Do not copy resources to the build directory
     * skip.sass        Do not build the SASS.
     * skip.slice       Do not build the theme image slicer.
     * skip.theme       Do not build the theme images.
    
    -->
    With skipping all the parts expect (skip.js) we have forced the new sencha cmd-tools to do almost the same thing as the old on.

    In your index.html (php, aspx, ...) you still need the ext/ext-all.css, but you don't need the ext/ext.js file any longer.

    There is still one minor problem, so maybe anyone can help me with it: http://www.sencha.com/forum/showthre...pile-js-target

  4. #4
    Sencha User
    Join Date
    May 2013
    Posts
    30
    Vote Rating
    1
    Csegota is on a distinguished road

      0  

    Default


    Thanks for the reply hlurger!

    I have a couple questions for you. I believe we have a slightly different file structure. I generated a stand alone project (not in a workspace) and migrated the project into that file. I assume this would have been the same as just copying the required .sencha, app.json, build.xml, and index.html but I wasn't sure.
    Here is my file structure:
    Code:
        
    MyApp
      .sencha
        app
          sencha.cfg
        workspace
          sencha.cfg
      app
      build
      ext (some copy of the framework that is missing things like the resources folder, which I reference in my index.html, this was auto generated)
      ext.4.2.1.883 (Full copy of framework)
      app.js
      app.json
      build.xml
      login.jsp <-- (my index.html equivalent)
    • Was your project located within a Workspace? (mine is not, but it could be I suppose)
    • I do have a workspace/sencha.cfg but its contained within my app and I'm not sure if that will have an effect or not. I will try it regardless.
    • As to your step .sencha/app/app.cfg, I don't have an app.cfg. Where does this file come from? Is this a typo? I have an .sencha/app/sencha.cfg, however build.class.name="" does not exist, is it supposed to or did you add that?
    • What file are you placing the build.class.name code in?

    Thanks for your help!

    Christian

  5. #5
    Sencha User
    Join Date
    May 2013
    Posts
    30
    Vote Rating
    1
    Csegota is on a distinguished road

      0  

    Default


    Would be great to get some input here from a dev at sencha who knows the in's and out's of Sencha Cmd. A dev created walk through implementing Sencha Cmd with existing applications might be beneficial to the community as well.

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    21
    Vote Rating
    2
    hlurger is on a distinguished road

      0  

    Default


    Yes it was a typo (I have edit my previous post...)

    This slide show (Sencha Cmd Quick Start) is a good overview and helped me to better understand the whole process.

    Sencha tell us following (Slide 21):

    Change to match generated app OR Configure to match existing app
    So there is no simple way for existing apps...

    This was my file structure before
    Code:
    MyApp
        - ext-42
        - CAFM (app-folder. We had renamed it)
           -- controller
           -- model
           -- store
           -- view 
        - app.js
        - Default.aspx (We are running our app on IIS. We are using an IIS-debug flag to change between app.js (debug) oder app-all.js (production))
    Until now we had build our app with those two commands:

    Code:
    sencha create jsb -a index.html -p app.jsb3
    sencha build -p app.jsb3 -d .
    The new file structure:

    Code:
    MyApp
        - .sencha
        - ext-42
        - CAFM (app-folder. We had renamed it)
           -- controller
           -- model
           -- store
           -- view 
        - app.js
        - app.json
        - build.xml
        - 4build.html (renamed  index.html. Take it also from the temp generated project. sencha generate app MyApp/path/to/MyApp)
        - Default.aspx (We are running our app on IIS. We are using an IIS-debug flag to change between app.js (debug) oder app-all.js (production))
    On slide 24 you see the structure of the build process. build.xml imports the build-impl.xml. The build-impl-xml imports for each step a xml file (e.g. js-impl.xml)

    Code:
    <import file="${basedir}/.sencha/app/js-impl.xml"/>
        <target name="js"
                depends="init"
                description="Builds the output javascript file(s)">
            <x-ant-call unless="skip.js">
                <target name="-before-js"/>
                <target name="-js"/>
                <target name="-after-js"/>
            </x-ant-call>
        </target>
    As you can see, sencha has include variables to config the build process. In this case skip.js. If you set it to true no js file will be generated.
    Somewhere in the build process (init-impl.xml) the properties files are included (you find them under .sencha/app/).

    If you open the default.properties you will see how the property files are combined.

    Those files are used for an ext-web application (by default, if you have not changed anything in the .sencha folder)

    Code:
    - production.properties
    - build.properties
    - ext.properties
    - production.defaults.properties
    - defaults.properties
    Properties are controlled by the first file in the above list to define the value.
    At the very end of this process also the sencha.cfg is applied.

    The answer to your question: You will find 'build.classes.name=app.js' in the default.properties.
    You can override it wherever you want!

    So whatever you have changed from the default structure, you have to apply the correct config:

    In my case, I had to do additional overrides:

    Code:
    ext.dir=ext-42  (.sencha/workspace/sencha.cfg --> Path to sencha-sdk)
    app.classpath=${app.dir}/CAFM,${app.dir}/app.js  (.sencha/app/sencha.cfg --> I have renamed my app folder to CAFM)
    Very important for the new build process is the boilerplate from the index.html (Sencha cmd with existing apps)
    In my case we have an IIS-debug flag which is switching between app.js and app-all.js so I don't want to have the boilerplate in my Default.aspx.

    The default boilerplate:
    Code:
        <!-- <x-compile> -->
            <!-- <x-bootstrap> -->
                <link rel="stylesheet" href="bootstrap.css">
                <script src="ext/ext-dev.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
            <script src="app.js"></script>
        <!-- </x-compile> -->
    This is the reason why I have renamed the index.html to 4build.html. Of course you have to change the app.json ("indexHtmlPath": "4build.html").

  7. #7
    Sencha User
    Join Date
    May 2013
    Posts
    30
    Vote Rating
    1
    Csegota is on a distinguished road

      0  

    Default


    Thanks again hlurger for the great response!

    I've made significant progress!

    I currently only need to compile the .js of the application. Which is I believe what you are using Sencha Cmd for as well.
    So I did add the following to the bottom of my .sencha/app/default.properties file. (along with other build properties/changes you mentioned)
    skip.page = true
    skip.js = false
    skip.resources = true
    skip.sass = true
    skip.slice = true
    skip.theme = true

    I believe I have it all hooked up correctly and have all the properties configured. I am still receiving two errors however when I try to use the compiled java code(app-all.js).

    I'm not sure but I believe it may be related to how I have the compile boilerplate set up. My index.jsp is set up as follows:

    Code:
    <link href= ... some .css style sheets>
    <...> x5 of these .css links
     // I have left the css ( ^^ )out of the compile tags because I just want to get app-all.js working first if possible
    
    <!-- <x-compile> -->
                <!-- <x-bootstrap> -->
                //I have left out the bootstrap .js and .css because I don't see the relevance in my existing app
                <script type="text/javascript" src="/MyApp/extjs-4.2.2/ext-all.js"> //using ext-all not ext-dev
                <!-- </x-bootstrap> -->
    
                //I have two files that have been added into the framework in the ux folder
                <script type="text/javascript" src=MyApp/extjs-4.2.2/src/ux/blah.js </script>
                <...>
    
                //I have 8 other javascript includes here
                <script type="text/javascript" src=MyApp/javascript/blah.js </script>
                <...> (x8)
    
                <script type="text/javascript" src="app.js"></script>
    <!-- </x-compile> -->
    I'm not sure if this is the issue or not, but if you by chance see anything that you know isn't going to work, I would be forever in your debt.

    Other than that, I'm not quite sure why my app wont run when plug in the app-all.js in place of the app.js
    (I am renaming app-all.js to app.js to run/reference the app-all file)

    The app-all.js file does seem to be compiling. With the exception of the following two errors:
    Code:
    TypeError: r.prototype.styleHooks is not an object or null
    http://localhost:8080/MyApp/app.js //app.js error
    Line 1
    
    TypeError: Ext.fly(...).addCls is not a function
    http://localhost:8080/MyApp/extjs-4.2.2/ext-all.js //framework error
    Line 18
    Any ideas?

    Thanks again for all your input hlurger!

    Christian

  8. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    21
    Vote Rating
    2
    hlurger is on a distinguished road

      0  

    Default


    Yeah, you are right, we are both need just the .js file.

    Do I understand you correctly that the build process (with sencha app build) is working correctly and producing a .js file?

    I probably know what your problem is...

    You need only the compiled .js file (app-all.js)!!
    If you use the app-all.js just comment out the line where you include the ext-all.js file.

    For development you need:
    ext.js + app.js

    For production you need:
    app-all.js

    The new cmd-tools include all required parts from the framework plus your app in one file. If you want, you can split the framework and the app (like it was before) by modifying the js-impl.xml.

  9. #9
    Sencha User
    Join Date
    May 2013
    Posts
    30
    Vote Rating
    1
    Csegota is on a distinguished road

      0  

    Default


    Yes, my build process is outputting an app-all.js file.

    Excluding the framework and all js folders in my index.html seemed to help.I still get a "MyApp.Class is undefined" error. So something still isn't quite right.

    I included two more folders that contained extra javascript in the classpath, I'm sure this is required, but it didn't solve my problem.

    Do you use the bootstrap.js in your index.html with the app-all.js? I know it is getting updated with my build process. I'm not sure if its required in the production version or not.

    Thanks again hlurger

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    21
    Vote Rating
    2
    hlurger is on a distinguished road

      0  

    Default


    No, I don't use bootstrap.js. I'm only using app-all.js.


    Sorry man, I don't know what your problem is...
    But you can try to get an app-all.js which is not compressed (like all-classes.js). Compression should be disabled with this switch:


    Code:
    # enables / disables yui compression
    build.compression.yui=1

Thread Participants: 1

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