1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    0
    badtaste is on a distinguished road

      0  

    Default Multipage application structure with Sencha CMD

    Multipage application structure with Sencha CMD


    Hello, I am quite confused and missing a good example. How to generate multipage application stucture. Not multiapplication!

    It seem the workspace is what is needed
    http://docs.sencha.com/extjs/4.2.2/#...mand_workspace
    But here it looks like description of two application (Extjs and Touch) with two namespaces that share some code
    Code:
    sencha generate workspace /path/to/workspace
    Then you can create one page with
    Code:
    sencha  -sdk /path/to/sdk-extjs generate app MyApp /path/to/myApp

    But how to generate second and other pages. I would expect to use just one namespace for pages. There is some example here

    http://localhost/dev/extjs/ext-4.2.1...mand_app_multi

    But it is quite against the first link because there is note "consider applications that do not have a workspace" Why there is example for multiple page application with no workspace and instead low-level commands are used?

    And how to make a build?

    Can someone help? Thanks.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You would need to setup some custom ant tasks. I'd stick with singlepage applications personally.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    0
    badtaste is on a distinguished road

      0  

    Default


    Thanks for tip, it is not perfect but I have already sticked with one page app. BT

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Location
    Cochin
    Posts
    14
    Vote Rating
    0
    Vishnu C is on a distinguished road

      0  

    Default


    Hey all
    I really need to generate multi page app. Can any one help me how to configure it on ant or sencha CMD

  5. #5
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,512
    Vote Rating
    176
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of

      1  

    Default


    I think terminology is against us here, but to Cmd a page is an "application". A "workspace" is a container for apps (really pages), packages and frameworks.

    This collection is more often what developers view as their "application", but I will refrain from using that term here to avoid further confusing the matter.

    So, generating the workspace is step 1.
    Code:
    sencha generate workspace --ext ws
    The --ext switch is new to Cmd 5+ and uses the "ext" package from the Cmd Package repo. It will download the file just once and store it locally for future use.

    Alternatively, you can use the "--sdk" switch if you already have the SDK you want downloaded (perhaps Sencha Touch or Ext JS pre-5):

    Code:
    sencha --sdk /path/to/ext51 generate workspace ws
    Now with that workspace, if we make it the current directory, we can generate multiple applications:

    Code:
    cd ws
    sencha generate app --ext App1 apps/app1
    sencha generate app --ext App2 apps/app2
    The best way to share code between these applications is via a package.

    Code:
    sencha generate package common
    At the end of the above, we should have:
    Code:
    ws/
        ext/
            src/
            ...
        packages/
            common/
                resources/
                sass/
                src/
                package.json
        apps/
            app1/
                ...
                app.json
            app2/
                ...
                app.json
    In each "app.json" file, add this:

    Code:
        "requires": [
            "common"
        ]
    Now any code you write in the "common" package will be available in all applications. Each application is still built individually:

    Code:
    cd apps/app1
    sencha app build
    cd ../app2
    sencha app build
    Or a shortcut:

    Code:
    sencha --cwd apps/app1 app build
    sencha --cwd apps/app2 app build
    The "--cwd" switch tells Cmd to use a different "current working directory" than your shell / terminal.

    Hope that helps. If you have more specific questions, feel free to ask.
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Location
    Cochin
    Posts
    14
    Vote Rating
    0
    Vishnu C is on a distinguished road

      0  

    Default


    dongryphon, Thanks for your reply, I have one more doubt. inside
    packages/ common/src/



    How I can write the code? Is it simply a Ext js Class or. is there any architecture to arrange the code. Can please suggest best way.

  7. #7
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,512
    Vote Rating
    176
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of

      1  

    Default


    Yes, the code inside the "src" folder of packages is the same as in the "app" folder of apps: just Ext.define calls to define your classes.

    I would recommend giving apps and packages their own top-level namespace or they could share a top-level namespace and have their own second level namespace.

    Option #1 (Top-level namespaces):
    Code:
    App1.view.Foo
    App2.view.Bar
    Common.view.Baz
    Option #2 (Shared top-level namespace):
    Code:
    Acme.app1.view.Foo
    Acme.app2.view.Bar
    Acme.common.view.Baz
    Either way you go with namespaces, the files on disk would be about the same:

    Code:
       apps/
          app1/
             app/
                view/
                   Foo.js
    
          app2/
             app/
                view/
                   Bar.js
    
          packages/
             common/
                src/
                   view/
                      Baz.js
    If you are writing Sass code, you'll want to set the "sass namespace" in the JSON files. Be sure these are in the appropriate files:

    apps/app1/app.json
    Code:
       "sass": {
          "namespace": "App1" // or "Acme.app1" if you go with Option #2
       }
    apps/app2/app.json
    Code:
       "sass": {
          "namespace": "App2" // or "Acme.app2" if you go with Option #2
       }
    packages/common/package.json
    Code:
       "sass": {
          "namespace": "Common" // or "Acme.common" if you go with Option #2
       }
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  8. #8
    Sencha User
    Join Date
    Aug 2012
    Location
    Cochin
    Posts
    14
    Vote Rating
    0
    Vishnu C is on a distinguished road

      0  

    Default


    Quote Originally Posted by dongryphon View Post
    Yes, the code inside the "src" folder of packages is the same as in the "app" folder of apps: just Ext.define calls to define your classes.

    I would recommend giving apps and packages their own top-level namespace or they could share a top-level namespace and have their own second level namespace.

    Option #1 (Top-level namespaces):
    Code:
    App1.view.Foo
    App2.view.Bar
    Common.view.Baz
    Option #2 (Shared top-level namespace):
    Code:
    Acme.app1.view.Foo
    Acme.app2.view.Bar
    Acme.common.view.Baz
    Either way you go with namespaces, the files on disk would be about the same:

    Code:
       apps/
          app1/
             app/
                view/
                   Foo.js
    
          app2/
             app/
                view/
                   Bar.js
    
          packages/
             common/
                src/
                   view/
                      Baz.js
    If you are writing Sass code, you'll want to set the "sass namespace" in the JSON files. Be sure these are in the appropriate files:

    apps/app1/app.json
    Code:
       "sass": {
          "namespace": "App1" // or "Acme.app1" if you go with Option #2
       }
    apps/app2/app.json
    Code:
       "sass": {
          "namespace": "App2" // or "Acme.app2" if you go with Option #2
       }
    packages/common/package.json
    Code:
       "sass": {
          "namespace": "Common" // or "Acme.common" if you go with Option #2
       }
    Thanks for your reply.

  9. #9
    Sencha Premium Member
    Join Date
    Jul 2009
    Posts
    117
    Vote Rating
    0
    JacobGu is on a distinguished road

      0  

    Default Second-level namespace for app

    Second-level namespace for app


    So if I'd like to use second-level namespaces for my apps (e.g., MyCompany.myapp1, MyCompany.myapp2, etc.), what do I use for the Ext.application config name? The Sencha docs say:
    name : String
    The name of the Application. This should be a single word without spaces or periods because it is used as the Application's global namespace. All classes in your application should be namespaced under the Application's name - for example if your application name is 'MyApp', your classes should be named 'MyApp.model.User', 'MyApp.controller.Users', 'MyApp.view.Main' etc