PDA

View Full Version : XTemplate custom member function?



Ant1105
29 Apr 2009, 12:06 PM
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
29 Apr 2009, 1:07 PM
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
30 Apr 2009, 9:20 AM
Ant -

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

Ant1105
30 Apr 2009, 9:35 AM
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'
});