How to structure (my) mobile website?

[RandomString]

Hello,
I'm new to Sencha Touch and am creating mobile version of my website. I need to know what is the best way to structure a mobile application and to use namespaces.
My current website is structured like this:
/home
/markets
/markets/market
/login
/profile
and so on. Each folder has some subfolders.
I checked a lot of tutorials and videos on how to create applications but everytime it was an one-purpose application (display a map, manage contacts and such) so it was easy to structure models, views and controllers in one folder. But since my webpage has a lot of pages ("purposes") (home, markets, profile, etc.) I would like to keep them in separate folders and namespaces but under one folder (/mobile) and one namespace (MyApp).
So I decided that each of this pages should be a separate "sencha application".
For now I have covered just one page (markets) so my structure is like this:
/mobile
/mobile/assets
/mobile/markets (and here is recommended sencha structure (app/models, app/views, etc),
and namespace is MyApp (so I have MyApp.views.SomeList etc).
But I would like to have:

each page (markets, login, etc) has its own folder (/mobile/markets, /mobile/login, etc) with its own index.jsp page and its own app folder (with Sencha-recommended structure (views, controllers, models). (This is because I don't want to load all the JS when user is just on one page. Pages will be linked together.) And,
all pages have same "root" namespace (MyApp) but their own "sub"namespace (so I can have MyApp.markets.views.MarketsList, MyApp.login.views.LoginForm, etc).
Is this a good approach? If so, how to achieve this (especially the namespace think)?
I'm not a native english speaker so excuse me if I don't express myself correctly or in a strange way. I hope you understand.
Thanks a lot

[mitchellsimoens]

First off... your namespace and file structure should match 100% (case-sensitive). Namespacing is a very important part of application development and code organization, one most people overlook.

I usually hold everything in the app folder. You then have two ways to separate your code, this is my preferred way:

You still should have the four folders:

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

(I don't like ST1's suggested plural) Then if you have different features of your app then create another level, like say you have users and emails

app/
--controller/
----user/
----email/
--model/
----user/
----email/
--store/
----user/
----email/
--view/
----user/
----email/

You can see how this can organize your code. Or you can do it this way but I'm not a fan of it:

app/
--user/
----controller/
----model/
----store/
----view/
--email/
----controller/
----model/
----store/
----view/

This follows MVC like patterns but you don't really have to use the architecture, this is just for code organization and namespacing. Ultimately it is up to you how you want to organize your code.

[RandomString]

Thank you for your response :). I made some additional research and coding and I think it's clear to me now. I will use this structure:

mobile/
--assets/
----sencha/
--user/
----controllers/
----models/
----stores/
----views/
--email/
----controllers/
----models/
----stores/
----views/

Just a curious question about your way of doing this. How do you manage your namespace? Because you wrote that namespace and file structure should match 100% and you use singular instead of default plural when naming your M, V, C and S folders. Do you override Ext.Application.constructor or do you call Ext.ns('defining.your.namespace') when starting every application?

Thank you again :)