Results 1 to 5 of 5

Thread: separate (static) HTML from your view classes

  1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    You can use a utility class and require it and it will be available before the classes are defined.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
      0  

    Default

    great, thnx a lot!!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •