Results 1 to 10 of 10

Thread: Multipage application structure with Sencha CMD

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    -1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      -1  

    Default

    You would need to setup some custom ant tasks. I'd stick with singlepage applications personally.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    -1
      -1  

    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
    1
      1  

    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,724
    Vote Rating
    248
      2  

    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
    Director of Engineering - 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
    1
      1  

    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,724
    Vote Rating
    248
      2  

    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
    Director of Engineering - 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
    1
      -1  

    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
    138
    Vote Rating
    4
      0  

    Default 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


  10. #10
    Sencha User
    Join Date
    Jul 2014
    Posts
    21
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by dongryphon View Post
    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.
    Hello, I am new to extjs. However i have a question about your reply. where can I set the namespace for a package?

    Here If i need to define class in common/src folder then what namespace should i use?

    Thanks for your reply.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •