XTemplate custom member function?

[Ant1105]

I am looking to mimic an IM window conversation where when a new user comments, their comments are associated to a different class/color. Does anybody know of a way this can be done with XTemplate and a member function?

Essentially, when the next user is different than the previous, I would like to change the look of the bubble. Screenshot is attached to clarify. User "Paul" should be a different bubble. Thanks.

this.notesTpl = new Ext.XTemplate(
    '<tpl for=".">',
    '<div class="note-wrap">',
    '    <div class="note-author">{noteUser}<br/><span>{noteDatetime}</span></div>',
    '    <div class="note"><span class="arrow"></span><p>{note}</p></div>',
    '</div>',
    '</tpl>', {
    isNewUser: function(user){
        // change css class here to "note-wrap-alt"?
    }}
); 

[Ant1105]

Might of actually figured this out. I added some helper properties to the template. Not sure if this is the best way to do it. Here are the modifications. Suggestions?

this.notesTpl = new Ext.XTemplate(
    '<tpl for=".">',
    '<div class="{[this.getNoteClass(values.noteUser, xindex)]}">',
    '    <div class="note-author">{noteUser}<br/><span>{noteDatetime}</span></div>',
    '    <div class="note"><span class="arrow"></span><p>{note}</p></div>',
    '</div>',
    '</tpl>', {
    getNoteClass: function(user, index) {
        if (this.currentUser !== user) {
            this.currentUser = user;
            if (index !== 1) {
                this.currentClass = this.currentClass.toggle('note-wrap', 'note-wrap-alt');
            }
        }
        return this.currentClass;
    },
    currentUser: null,
    currentClass: 'note-wrap'
});

[aconran]

Ant -

Looks pretty good. This is exactly the way that member methods are intended to be used.

[Ant1105]

Cool, thanks Aaron. I did notice that the properties would not reset when using the template a second time, for example, editing an entry. This is right though because the object is created once and reused. Here is the final snippet I used to compensate for that.

this.notesTpl = new Ext.XTemplate(
    '<tpl for=".">',
    '<div class="{[this.getNoteClass(values.noteUser, xindex)]}">',
    '    <div class="note-author">{noteUser}<br/><span>{noteDatetime}</span></div>',
    '    <div class="note"><span class="arrow"></span><p>{note}</p></div>',
    '</div>',
    '</tpl>', {
    getNoteClass: function(user, index) {
        // Reset properties
        if (index == 1) {
            this.currentUser = user;
            this.currentClass = 'note-wrap';
        }
        // Determine if new user, toggle class
        if (this.currentUser !== user) {
            this.currentUser = user;
            this.currentClass = this.currentClass.toggle('note-wrap', 'note-wrap-alt');      
        }
        return this.currentClass;
    },
    currentUser: null,
    currentClass: 'note-wrap'
});