PDA

View Full Version : how to structure a non MVC style Ext.Application project with namespaces etc?



whiplash
20 Jan 2012, 5:00 AM
Hi Guys.

I've been working on a project and I do have a fair bit of functionality implemented so far. Although, I know my app structure is not right at all. But at the minute I'm happy enough that it works, however, I would really like to understand how the Namespaces work.

I decided to take a step back and create a new application with the following structure:


mobileFun

app

app.js
routes.js

lib

touch (sencha library here)

index.html


You can see below the app.js file where I create a new Ext.Application and name it as 'app'

I have done this by following the sencha docs:
http://docs.sencha.com/touch/1-1/#!/api/Ext.Application



/*
* Instantiating a new application automatically creates a global variable using the configured name property
* and sets up namespaces for views, stores, models and controllers within the app
*
* //this code is run internally automatically when creating the app
* Ext.ns('MyApp', 'MyApp.views', 'MyApp.stores', 'MyApp.models', 'MyApp.controllers');
*/

new Ext.Application({
name: 'app',

profiles: {
phone: function() {
return Ext.is.Phone;
},
tabletPortrait: function() {
return Ext.is.Tablet && Ext.orientation == 'portrait';
},
tabletLandscape: function() {
return Ext.is.Tablet && Ext.orientation == 'landscape';
}
},
useHistory: true, // true sets up Ext.History support

launch: function() { // Launch function only expected to be run once!
this.viewport = new Ext.Panel({
fullscreen: true,

id: 'mainPanel',
layout: 'card',
cardAnimation: 'slide',
items: [
{
html: 'Welcome to My App!'
}
]
});
}
});


If I am NOT following the MVC approach then how and where do I place/seperate the rest of the application files that will make up the views (UI) any stores used etc?

I would really appreciate some guidance on this as I cant find anything beyond this point on the internet and my brain is a bit confused at the minute lol.


Many thanks

Whiplash :((

mitchellsimoens
20 Jan 2012, 7:39 AM
In ST1, you can place your files wherever you want as long as you include them in your index.html I personally put them in the app folder:

app
--controller
--model
--store
--view

whiplash
20 Jan 2012, 8:06 AM
Ok

so it can have the same file structure as the MVC approach :)

Good stuff.

Just one last silly question please Mitchell if you dont mind ...

Q ... how do you seperate code using namespaces?
Q ... how do you add code from the seperate folders to the items of the viewport?



Ext.ns('someNamespaceName');

// Say for example that this contains an Ext.List
// How do I add this list to the viewport with the card layout which is in the launch function mentioned above?

whiplash
9 Feb 2012, 7:03 AM
Coming back to this thread ...




new Ext.Application({
name: 'App'
});



I have this structure on my main js file.

If I wanted to include additional code for a seperate module then ... how can I access the 'App' from the new js file ....

I have created the objects as
App.views.groupsList = new Ext.List({}) so each object the views, stores etc on inspection.

but how can I make a second js file continue on with this approach?