1. #1
    Sencha User jfarribillaga's Avatar
    Join Date
    Jul 2012
    Posts
    15
    Vote Rating
    1
    Answers
    2
    jfarribillaga is on a distinguished road

      0  

    Default Answered: Templates from an external resource as html or tpl files

    Answered: Templates from an external resource as html or tpl files


    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,

    Code:
    ....
    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!

  2. 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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    871
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User jfarribillaga's Avatar
    Join Date
    Jul 2012
    Posts
    15
    Vote Rating
    1
    Answers
    2
    jfarribillaga is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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?

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    871
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    A utility class can do an Ajax request and return an object of strings that would be used for templates.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Vote Rating
    14
    Answers
    26
    mberrie will become famous soon enough mberrie will become famous soon enough

      1  

    Default


    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.

  7. #6
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    609
    Vote Rating
    26
    Answers
    66
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


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

  8. #7
    Sencha User jfarribillaga's Avatar
    Join Date
    Jul 2012
    Posts
    15
    Vote Rating
    1
    Answers
    2
    jfarribillaga is on a distinguished road

      0  

    Default


    Quote Originally Posted by mberrie View Post
    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.

  9. #8
    Sencha User jfarribillaga's Avatar
    Join Date
    Jul 2012
    Posts
    15
    Vote Rating
    1
    Answers
    2
    jfarribillaga is on a distinguished road

      0  

    Default


    Quote Originally Posted by bluehipy View Post
    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.

  10. #9
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    609
    Vote Rating
    26
    Answers
    66
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Quote Originally Posted by jfarribillaga View Post
    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

  11. #10
    Sencha User jfarribillaga's Avatar
    Join Date
    Jul 2012
    Posts
    15
    Vote Rating
    1
    Answers
    2
    jfarribillaga is on a distinguished road

      0  

    Default


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