Question

I am trying to avoid redundacy and call a generic XTemplate to format the date and time in GMT from a timestamp.

This does not output the string i expect but just [Object object] in the UI.

SCB.RMWB.templates = {
    timeStamp: function(stamp) {
        return new Ext.XTemplate(   
            '<span class="time-frame">{[ this.dateRangeMsg(stamp) ]}</span>',   
            {
                dateRangeMsg: function(stamp) {

                    console.log('stamp', stamp);    

                    var dateTime = new Date(),
                        now = Ext.Date.format(dateTime, 'U'),           // gives us seconds since the UNIX Epoch from Ext.Date class
                        offset = Ext.Date.format(dateTime, 'Z'),        // gives us GMT offset from Ext.Date class
                        minutesAgo = (now - 300),                       // 5 minutes ago
                        hourAgo = (now - 3600),                         // one hour ago
                        msg = '';


                    if (stamp >= minutesAgo && stamp <= now) {
                        msg = 'Moments ago';
                    } else if (stamp >= hourAgo && stamp <= now){
                        msg = '1 hour ago';
                    } else {
                        msg = this.formatGMT(stamp, offset).toString();
                    }   

                    return msg;

                },
                formatGMT: function(stamp, offset){

                    var time;

                    // * 1000 gives us date string to format in Ext.Date class
                    if (offset > 0){
                        time = new Date((stamp - offset) * 1000);    
                    } else {
                        time = new Date((stamp + offset) * 1000); 
                    } 

                    return Ext.Date.format(time, 'd-M-y, H:i \\G\\M\\T');

                }                   
            }
        );
    },
    notifications: {
        flyout: function(){
            return new Ext.XTemplate(
                '<tpl for=".">',    
                    '<li id="notification-flyout-{id}">',
                        '<div class="data-details">',
                            '<p>{message}</p>',
                            '{[ this.renderTimeStamp(values.sentDate) ]}',   
                        '</div>',   
                    '</li>',   
                '</tpl>',
                {
                    renderTimeStamp: function(stamp) {
                        return SCB.RMWB.templates.timeStamp(stamp);
                    }               
                }
            );
        }
    }
};

If i keep the timestamp functions in the original template it works fine but this functionality will be used in several places in different templates so i would like something more generic i can re-use.

Answer 1

Well I have some difficulties to follow you within your code example but it should work for you when you call apply on your template instance.

In detail:

Create the template you want to reuse once within a helper-namespace. To reuse it provide a method that get’s that instance along with provided data.

var tpl = new Ext.Template('Name: {name}, Age: {age}');
tpl.apply({name: 'John', age: 25}); // returns a html string

Here a (more detailed) JSFiddle