Templates from an external resource as html or tpl files

[jfarribillaga]

Hi guys,

I wonder if there is any way in sencha to get html templates from a resource.
I know that I can create a class which a method which it gets by a proxy request resources from our resources directory. But what I'm wondering if we have any method from sencha templates core.

For example,

....
config: {

itemTpl: Ext.xxxx.getFromAResource(templateUrl)

}

Where this function gets the url template file as string with XTemplate variables and logic.

I think that will do the code more readable and maintainable.

Any help will be appreciated.

Cheers!

[mitchellsimoens]

There isn't anything to load it from an external resource.

I would recommend not doing it honestly, I would just define templates in a utility class and get the template from that class.

[jfarribillaga]

There isn't anything to load it from an external resource.

I would recommend not doing it honestly, I would just define templates in a utility class and get the template from that class.

Yes, but we're still having html code in a string, isn't it ?

I know that external resources could have performance issues (from the point of view of a request) but It would be helpful having it as a resource and when we deploy the app for production, the compiler tool, modify the views getting each resource content and filling the itemTpl as string.

What do you think about it?

[mitchellsimoens]

A utility class can do an Ajax request and return an object of strings that would be used for templates.

[mberrie]

We created our own small nodejs script that will take the contents of a file (the tpl file) and insert it into another file (the Ext class file) as an array with each line wrapped as string (Ext XTemplate style). The inserted location is marked with open and end tags (as js comments).

We maintain a list of template files, no auto-detection. Tpl files share the same name as the Javascript class they are used in, but with .tpl extension.

We use fs.watch to keep a task running that monitors changes to the tpl files.

Not the most elegant and sophisticated solution but it was quick to implement. Also, templates don't get changed often after an initial phase where they are created, so it's good enough (for our use-case).

Once the tpl code is inserted into the class the rest of the build process does not require any adaptions.

Can't share the code though, sorry. Just wanted to point you to a different approach that might be quicker to implement.

[bluehipy]

Why not store templates in index.html script/textarea tags?

[jfarribillaga]

We created our own small nodejs script that will take the contents of a file (the tpl file) and insert it into another file (the Ext class file) as an array with each line wrapped as string (Ext XTemplate style). The inserted location is marked with open and end tags (as js comments).

We maintain a list of template files, no auto-detection. Tpl files share the same name as the Javascript class they are used in, but with .tpl extension.

We use fs.watch to keep a task running that monitors changes to the tpl files.

Not the most elegant and sophisticated solution but it was quick to implement. Also, templates don't get changed often after an initial phase where they are created, so it's good enough (for our use-case).

Once the tpl code is inserted into the class the rest of the build process does not require any adaptions.

Can't share the code though, sorry. Just wanted to point you to a different approach that might be quicker to implement.

Hey dude, Thanks for sharing!

Practically I've implemented the same approach. I built an app build tool wich it remains watching and works (with chokidar module) with precompiled css and added a similar functionality for templates. The new templates are grouped in a new file with contents as {same_filename: "string with template content", .... }

I think that it's a and easy and good idea, because we can generate only one "templates" file when we need a build-release for production and multiple files for dev phase.

Anyway, sencha build tool is really cool, so I thought that it could have some of this template feature.

[jfarribillaga]

Why not store templates in index.html script/textarea tags?

Because, for large scale applications it could be very fuzzy. Moreover, when you deal with designers, they could cause big headaches.

Definitively, having a single file it's convenient from the point of view of optimization, but I think that build tools could be on charge of that.

[bluehipy]

Because, for large scale applications it could be very fuzzy. Moreover, when you deal with designers, they could cause big headaches.

Definitively, having a single file it's convenient from the point of view of optimization, but I think that build tools could be on charge of that.

Well then you can have a templates folder

/tpl

and inside it folders for each modules
/tpl/module1

and inside of these folders files for each XTemplate you have or need
/tpl/module1/that_list_item.tpl

containing the html snippet associated.

And you can build up a bat file that will do 2 things:
1) start an utility which will insert all these templates snippets in index.html between script tags or textarea tags with some naming rule.
2) will execute the sencha command: sencha app build production (or whaterver one would like)

Easy to maintain, version also designer safe

[jfarribillaga]

Yes! this is the idea we shared with mberrie with the difference that we use nodeJS instead a bat file.
Thanks for your thoughts!