Best practices for global definitions in MVC pattern

[John Mark]

I am new to Sencha Touch and especially to the new loading class system... so sorry if my question is too silly.

I wonder what are the best practices for the definition of global data using the new class system, the MCV pattern and a custom build (using the SDK tools).

This is my example:
I want to define a set of XTemplates to use in several views. I don't want to define these XTemplates directly in each view (but in separate javascript files).

An option could be to define the various XTemplate as global variables, in this case do I have to explicitly load the js file with this definitions in the index page (using a script tag)? Or is there another way, using the Loader component?

Another option is to create a class and define the templates as static properties of this class. I.E.
(the file GeneralTemplates.js is in the app/templates folder)

Ext.define('MyApp.templates.GeneralTemplates', {
    requires: ['Ext.XTemplate'],
    statics:{
      template1: new Ext.XTemplate(
         '<tpl for=".">', [...] '</tpl>'
      ),
      template2: new Ext.XTemplate(
         '<tpl for=".">', [...] '</tpl>'
      )

    },
});

Then in my view I can refer to a template like this:

Ext.define('MyApp.view.HomePanel' ,{
    extend: 'Ext.Panel',
    requires: ['MyApp.templates.GeneralTemplates'],
    xtype : 'homepanel',
    
    config: {
      title: 'Home',
      items: [
        {
          xtype: 'dataview',
          tpl: MyApp.templates.GeneralTemplates.template1
          [...]
        }
      ], [...]
    },    
   [...]

});

But in this case I have an error: "Cannot read property 'GeneralTemplates' of undefined"
This error is thrown before the init methods of the controllers and the launch method of the application (and before the constructor of the view) are executed. If I log the same object in one of these methods, it is correctly printed!

What do you think guys? What is the best practice to define global variables observing the MVC pattern?
Sorry again if this question is too silly.

[mitchellsimoens]

I would create a manager of some sort:

Ext.define('MyApp.util.Templates', {
    singelton : true,

    config : {
        someTpl : '......'
    },

    constructor : function(config) {
        this.initConfig(config);
        this.callParent([config]);
    }
});

Now you should be able to do:

MyApp.util.Templates.getSomeTpl()

[zozo4kin]

I tried this method, but I got an error

Uncaught TypeError: Object function () {                    
return this.constructor.apply(this, arguments);                
} has no method 'getTemplate'

MyApp.util.Templates.getTemplate() doesn't work!

[zozo4kin]

Oh...
This works:

var templates = new MyApp.util.Templates;
vat tpl = templates.getTemplate();

[John Mark]

Thanks for the tips. I did this:

1. I defined a Template class in a separate js File (app/templates/GeneralTemplates.js)

Ext.define('Templates.GeneralTemplates', {
     
    singelton : true,
    
    statics:{
       tpl1: new Ext.XTemplate( ... ),
       tpl2: new Ext.XTemplate( ... )
    } 
    constructor: function(config) {
       this.initConfig(config);
       this.callParent([config]);
    }
} 

2. In the app.js i defined a configuration for the loader and the properly required property:

Ext.Loader.setConfig({
    enabled: true,
    paths   : {
        Templates : 'app/templates'
    }
    
});

Ext.application({
    name: 'MyApp',
    requires: ['Templates.GeneralTemplates', ...],
    ...
}) 

3. I used the template this way:

Templates.GeleralTemplates.tpl1 

[mitchellsimoens]

Instead of statics, try config