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?
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
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_projectsapplication (my main project)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.
tab1 (subproject)
tab2 (subproject)
...
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() { } });
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.
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.
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.htmlIs this right?
It's real a good way cause everybody can focus his part via designer.
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?
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.htmlIs this right?
My structure goes like this:WEBROOT/applicationcontrollerApplicationController.jsmodel
viewbaseuiApplicationViewport.jsApplicationViewport.jsViewport.jstab1controllerTab1Controller.jsmodel
viewbaseTab1.jsTab1.js
Viewport.jsapplication.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' } });
Code:
controllers: [ 'ApplicationController', 'Tab1.controller.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: { } },
Thanks.
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!