1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
    jeanluca is on a distinguished road

      0  

    Default Answered: separate (static) HTML from your view classes

    Answered: separate (static) HTML from your view classes


    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 ?

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

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

    Code:
    Ext.Loader.setPath('My', 'app');
    
    Ext.require('My.view.templates.Intro');
    Now in your class you can use

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    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


    You can use a utility class and require it and it will be available before the classes are defined.
    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
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
    jeanluca is on a distinguished road

      0  

    Default


    So you mean something like this:

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

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

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    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


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

    Code:
    Ext.Loader.setPath('My', 'app');
    
    Ext.require('My.view.templates.Intro');
    Now in your class you can use

    Code:
    My.view.templates.Intro.getHtml();
    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
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
    jeanluca is on a distinguished road

      0  

    Default


    great, thnx a lot!!

Thread Participants: 1

Tags for this Thread