1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    CA
    Posts
    47
    Vote Rating
    0
    Ant1105 is on a distinguished road

      0  

    Question XTemplate custom member function?

    XTemplate custom member function?


    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.

    PHP Code:
    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"?
        
    }}
    ); 
    Attached Images

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Location
    CA
    Posts
    47
    Vote Rating
    0
    Ant1105 is on a distinguished road

      0  

    Default Possible solution

    Possible solution


    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?

    Code:
    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'
    });

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,087
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Ant -

    Looks pretty good. This is exactly the way that member methods are intended to be used.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Location
    CA
    Posts
    47
    Vote Rating
    0
    Ant1105 is on a distinguished road

      0  

    Default


    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.

    PHP Code:
    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(userindex) {
            
    // 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;
        },
        
    currentUsernull,
        
    currentClass'note-wrap'
    }); 

Thread Participants: 1