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

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:





touch (sencha library here)


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:

* 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 :((

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:


20 Jan 2012, 8:06 AM

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?


// 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?

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?