1. #1
    Sencha User
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    132
    Vote Rating
    2
    billtricarico is on a distinguished road

      0  

    Default Designer-Built Application With Multiple Namespaces

    Designer-Built Application With Multiple Namespaces


    Hello,

    I am building an application that will have multiple tabs on the main viewport. What I would like to do is break each tab into its own namespace, to make it easier for parallel development of the UI. My thought was to create a folder for each namespace and create a new Designer project in each folder, where each folder is a tab on the application. There would be another 'application' folder that would be the main Viewport/TabPanel project that binds it all together.

    Each Designer project would have a different namespace and would deploy the same developer's local working directory on their application server for development purposes.

    One of my questions is....how can I configure the main 'application' project to reference the other namespaces?

    The other question is....Is this a good way to structure the application, or is there a better way?

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    77
    Vote Rating
    2
    yAdEs is on a distinguished road

      0  

    Default


    I have the same problem, cause I need to combin 3 apps into one.If I do it in the nomoral way, we can't rebuild the app with Designer, so I choose to organize my folder like this:
    MyFolder
    app1(Controllers,Models,Stores,Views folders),
    app2(Controllers,Models,Stores,Views folders),
    app3(Controllers,Models,Stores,Views folders),
    data,
    extjs,
    app.js,
    index.html

  3. #3
    Sencha User
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    132
    Vote Rating
    2
    billtricarico is on a distinguished road

      0  

    Default


    Hi yAdEs,

    This is what I have done and it seems to work:

    1) I create all my Designer projects in a flat folder structure:
    /my_projects
    application (my main project)
    tab1 (subproject)
    tab2 (subproject)
    ...
    2) Each of my projects' deploy folder is the same, the web root. This will create a folder for each designer project in the web root.
    3) First I created a skeleton application project with a simple Controller with a TabPanel render event, an ApplicationViewport View with a TabPanel inner view and deployed it to the web root. This created my "application' folder and designer.js/designer.html files.
    4) Since Designer overwrites designer.js and designer.html, i backed them up to appliation.js and application.html
    5) I then built a Panel in my tab1 project (this will be a tab on the main TabPanel), along with controllers/views/model/stores/etc just for this Panel. Deploying this project creates my tab1 folder in the web root and overwrites designer.js and designer.html.
    6) Now I edit application.js, adding the paths and tab1's controller:

    Code:
    Ext.Loader.setConfig({
        enabled: true,
        paths:{
            'tab1':'../tab1'
        }
    });
    
    
    Ext.application({
        views: [
            'ApplicationViewport'
        ],
    
    
        appFolder: 'application',
    
    
        autoCreateViewport: true,
    
    
        name: 'Application',
    
    
        controllers: [
            'ApplicationController',
            'tab1.controller.Tab1Controller'
        ],
    
    
        launch: function() {
    
    
        }
    });
    In the ApplicationViewport Controller's TabPanel render event, I add this code:

    Code:
    abstractcomponent.add(Ext.create('tab1.view.Tab1'));


    to add the subproject's tab to the main project's TabPanel.

    When I point the browser to application.html, it loads the main application and loads both controllers.

    I don't know if this is the Sencha way to do it, but it works for me, and it allows multiple developers to work on the UI in different Designer projects without stepping over each other.

    Thanks.

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    77
    Vote Rating
    2
    yAdEs is on a distinguished road

      0  

    Default


    I guess this is exactly the right way to structure multi-app folder, mitchellsimoens said all controllers should load upfront, so that's not a problem to put all controllers in your app.js file. But can u give me an example? I'm trying it in the same way, but I haven't figure it out.

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    77
    Vote Rating
    2
    yAdEs is on a distinguished road

      0  

    Default


    And as u said, every "tab1" folder and "tab2" folder will have folders and files like this:
    Application-
    app-
    controller,
    model,
    store,
    view,
    designer.js,
    designer.html,
    tab1-
    app-
    controller,
    model,
    store,
    view,
    designer.js,
    designer.html,
    tab2-
    app-
    controller,
    model,
    store,
    view,
    designer.js,
    designer.html
    Is this right?

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    77
    Vote Rating
    2
    yAdEs is on a distinguished road

      0  

    Default


    It's real a good way cause everybody can focus his part via designer.

  7. #7
    Sencha User
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    132
    Vote Rating
    2
    billtricarico is on a distinguished road

      0  

    Default


    Yes it accomplishes two things: it allows parallel UI development and it prevents it from being one huge project, which can really slow down development because the Designer can become very slow.

    Did you get a sample app up and running with this new folder structure?

  8. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    77
    Vote Rating
    2
    yAdEs is on a distinguished road

      0  

    Default


    Well, I misunderstood your meaning, your file structure should look like this:
    And as u said, every "tab1" folder and "tab2" folder will have folders and files like this:
    Application-
    app-
    controller,
    model,
    store,
    view,
    tab1-
    controller,
    model,
    store,
    view,
    tab2-
    controller,
    model,
    store,
    view,
    designer.js,
    designer.html
    Is this right?

  9. #9
    Sencha User
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    132
    Vote Rating
    2
    billtricarico is on a distinguished road

      0  

    Default


    My structure goes like this:
    WEBROOT/
    application
    controller
    ApplicationController.js
    model
    view
    base
    ui
    ApplicationViewport.js
    ApplicationViewport.js
    Viewport.js
    tab1
    controller
    Tab1Controller.js
    model
    view
    base
    Tab1.js
    Tab1.js
    Viewport.js
    application.html
    application.js
    designer.html
    designer.js



    Things to note:

    1) All Designer projects deploy to the web root.
    2) I created application.js and application.html to be the true ExtJS entry points, since the Designer overwrites designer.js and designer.html on deploy.
    3) I add the paths config to Ext.Loader in application.js to include the Tab1 folder path:
    Code:
    Ext.Loader.setConfig({
        enabled: true,
        paths:{
            'Tab1':'../tab1'
        }
    });
    4) I also add the Tab1Controller:
    Code:
        controllers: [
            'ApplicationController',
            'Tab1.controller.Tab1Controller'
        ],
    5) I also added the models/views/stores in application.js as opposed to the Tab1Controller:

    Code:
        models: [
            'Tab1.model.MyTreeModel'
        ],
    
    
        stores:[
            'Tab1.store.MyTreeStore'
        ],
    
    
        view:[
            'Tab1.view.Tab1'
        ],

    6) Here is the last part. Since the launch point is application.js, ExtJS still thinks we are in the 'application' namespace. You have to fully qualify all models/view/stores in Tab1 to be visible in the application. For example, I have a TreePanel in my Tab1, so to reference the store for it, I have to use:
    Code:
                            {
                                xtype: 'treepanel',
                                title: 'Some Tree',
                                store: 'Tab1.store.MyTreeStore',
                                rootVisible: false,
                                flex: 1,
                                viewConfig: {
    
    
                                }
                            },
    The problem is that the view keeps getting overridden on each deploy. So you'll have to back up this file or just remember to constantly update the store/model/view references. I hope Sencha has a fix for this soon, as it really slows down UI development in teams of more than one.

    Thanks.


  10. #10
    Sencha User
    Join Date
    Nov 2011
    Posts
    77
    Vote Rating
    2
    yAdEs is on a distinguished road

      0  

    Default


    Hey billtricarico, actual I find a much better and easier way to organize the folder!
    In the Designer, if you change the userClassName attribute to carStore.XXX, it will automatically create a "carStore" sub folder in "controller" and controller "base" folder, and what you need to do, is letting everybody change their names for Controller, Model, Store, View classes, and combin them together or just save to the same folder! It's so easy!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar