separate (static) HTML from your view classes

[jeanluca]

Hi

I was wondering if there is a good way to have your (static) HTML separated from your view classes.
For example, for dynamic HTML you can put this in a XTemplate class and put all these classes in their own directory (inside the view directory). But how to do this with static HTML, the XTemplate sounds like overkill ?

Ext.define('My.view.Panel', {
    extend: 'Ext.Pabel',

    config: {
        items: [ { html: '<div>Hello</div>' },
                    { html: '<div>Hello again</div>' } ]
    }

});

Furthermore, I do see some opportunities for inheritance here too!

Thanks
Luca

[mitchellsimoens]

You can use a utility class and require it and it will be available before the classes are defined.

[jeanluca]

So you mean something like this:

Ext.define('My.view.templates.Intro', {
    statics: {
          html: '<div>hello</div>'
    }
}) ;

And use it like

Ext.define('My.view.Panel', {
     extend: 'Ext.Panel', 
     require: ['My.view.templates.Intro'],

    config: {
         items: [ { html: My.view.template.Intro.html } ]
    }
}) ;

But maybe it would be better to create one utility class for all static html. But how/where would you initilize this (I'm using the MVC application structure)?

Cheers
Luca

[mitchellsimoens]

Ext.define('My.view.templates.Intro', {
    singleton : true,

    config : {
          html : '<div>hello</div>'
    },

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

In app.js:

Ext.Loader.setPath('My', 'app');

Ext.require('My.view.templates.Intro');

Now in your class you can use

My.view.templates.Intro.getHtml();

[jeanluca]

great, thnx a lot!!