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,168
    Vote Rating
    119
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."