1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    27
    Vote Rating
    0
    melmac is on a distinguished road

      0  

    Default Answered: Escaping Xtemplate characters

    Answered: Escaping Xtemplate characters


    Good day all,

    I'm currently working with XTemplates to create a html page where the first apply creates the layout, and the second apply applies the data.

    In this scenario there are 2 objects;

    a layout object

    Code:
     
           var formLayout = {    
                id: 'Form layout',
                items:[
                {
                    label: 'First',
                    name: 'first'
                    
                },
                {
                    label: 'Second',
                    name: 'second'            
                }]                    
            };
    and a data object

    Code:
         
       var data = { 
               id: 'This is a Test',
                first: 'This is first data', 
                second: 'This is second data'
            };
    The layout object is applied to an XTemplate first and the data second. My issue is with escaping characters. I am able to successfully apply the data using \{{data}\} in the template. I know that after the first apply this creates e.g. {first} or {second} for when the data is applied.

    My problem is I haven't worked out is how to preserve a property on the first apply. I would like to preserve the id property so that after first apply it is still {id}. Is there a way to do this?

    As you may have noticed both objects have an id property. I would like to apply the the data: id to a header tag.

    I've included the code below. Any help would be most appreciated.

    Code:
    <html><head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.2a/resources/css/ext-all-gray.css">
        <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all-debug.js"></script>
        <script type="text/javascript"> 
    
    
        Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
     
        // Main application entry point
        Ext.onReady(function() 
        {
            var data = {    
                id: 'This is a Test',
                first: 'This is first data', 
                second: 'This is second data'
            };
    
            var formLayout = {
                id: 'Form layout',
                items:[{
                    label: 'First',
                    name: 'first'                
                },{
                    label: 'Second',
                    name: 'second'            
                }]                    
            };            
    
            var form = new Ext.XTemplate(
                '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
                '<html>',
                    '<head>',
                        '<meta http-equiv="Content-Type" content="text-html; charset=utf-8" />',                    
                        '<title>{id}</title>',
                    '</head>',
                    '<body>',
    <!-- I would like to escape this so it after first apply it becomes {id} -->
                        '</h4>{{id}}</h4>',
                        '<tpl for="items">',
                            '<div>',
                                '<p>{label} : \{{name}\}</p>',                            
                            '</div>',
                        '</tpl>',        
                    '</body>',
                '</html>'                
            ).apply(formLayout);
    
            var html = Ext.create('Ext.XTemplate', form).apply(data);            
            var win = window.open('');
            win.document.write(html);
        });
    
        </script>
    </head>
    <body></body>
    </html>

  2. I would merge the data and layout together but first renaming the id property on one fo them and then apply to the template.

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


    I would merge the data and layout together but first renaming the id property on one fo them and then apply to the template.
    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
    Jul 2010
    Posts
    27
    Vote Rating
    0
    melmac is on a distinguished road

      0  

    Default


    Thanks for the reply Mitchell. I was beginning to think that way. But to satisfy my curiosity is there no way to preserve characters?

Thread Participants: 1