Creating XTemplates in Grid TemplateColumn

[DrZog]

I'm inserting XTemplate definitions into the tpl config field in Designer (EXT.grid.TemplateColumn). How do you insert template member functions such as:

 '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="this.isGirl(name)">',
            '<p>Girl: {name} - {age}</p>',
        '</tpl>',
        // use opposite if statement to simulate 'else' processing:
        '<tpl if="this.isGirl(name) == false">',
            '<p>Boy: {name} - {age}</p>',
        '</tpl>',
        '<tpl if="this.isBaby(age)">',
            '<p>{name} is a baby!</p>',
        '</tpl>',
    '</tpl></p>',
    {
        // XTemplate configuration:
        compiled: true,
        disableFormats: true,
        // member functions:
        isGirl: function(name){
            return name == 'Sara Grace';
        },
        isBaby: function(age){
            return age < 1;
        }
    }

into the tpl field in Designer, without it wrapping the member functions in apostrophe's?

On the same subject, why doesn't this work?

<tpl if="diary > new Date().add(Date.DAY, 10)"><span class="column-green">{diary:date("d/m/Y")}</span></tpl>
<tpl if="diary < new Date()"><span class="column-red">{diary:date("d/m/Y")}</span></tpl>

[DrZog]

Was sure:

<tpl if="[new Date(values.diary) > new Date()]"><span class="column-red">{diary:date("d/m/Y")}</span></tpl>

was going to work but it doesn't...(always evaluates to red)

If I do this (very dirty, purists look away now):

<tpl if="alert([new Date(values.diary) < new Date()])"><span class="column-red">{diary:date("d/m/Y")}</span></tpl>

I can see that the date comparisons are working but the (false, flase, true on my data) all columns are red when it should just be the last)

[DrZog]

This works but don't know why the fm alias doesn't work:

<tpl if="diary &lt; today"><span class="column-red">{diary:date("d/m/Y")}</span></tpl>
<tpl if="diary &gt; today && diary &lt; [Ext.util.Format.date(new Date().add(Date.DAY, 10),'Y-m-d')]"><span class="column-orange">{diary:date("d/m/Y")}</span></tpl>
<tpl if="diary &gt; [Ext.util.Format.date(new Date().add(Date.DAY, 10),'Y-m-d')]"><span class="column-green">{diary:date("d/m/Y")}</span></tpl>

Damn that's a bit complicated wot

[jarrednicholls]

Yeah the last sample will work. In 3.x, escaping angle brackets within an if="" statement is necessary. I believe that's no longer necessary in 4.0.

Yeah "fm" doesn't appear to actually be included ever. Docs are outdated. The preferred way is by affixing ":<fm_func>" to the end of a variable name - however that only works for formatting variables with a reference. E.g., (new Date()):date('') wouldn't work. Might be worth posting on the forums as a feature request.

[DrZog]

Hmmm, maybe I'm missing something but how do I get something like this to work in designer then (or is it not possible?)

<tpl>
    {[this.dateTest(values)]}, 
        {    dateTest : function(diary){    
                var diaryDate,
                    doDiary = Date.parseDate(diary, 'Y-m-d'),
                    doToday = new Date();
                
                    if (doDiary <= doToday){
                        diaryDate = '<span class="column-red">'+Ext.util.Format.date(diary,'d/m/Y')+'</span>';
                    
                    } else if ((doDiary > doToday) && (doDiary <= doToday.add(Date.DAY, 10))){
                        diaryDate = '<span class="column-orange">'+Ext.util.Format.date(diary,'d/m/Y')+'</span>';
                    
                    } else if (doDiary > doToday){
                        diaryDate = '<span class="column-green">'+Ext.util.Format.date(diary,'d/m/Y')+'</span>';
                    }
                    
                return diaryDate
            }
        }     
</tpl> 

Cheers

Roland

[jarrednicholls]

This isn't possible, because the Designer won't allow you to supply a function. We're going to be doing work on Template Management that will support this handy feature of XTemplates. If you absolutely need to augment your XTemplates with instance methods, you should define and use the XTemplate in your implementation (.js) file(s) directly, and not worry about configuring it in the Designer. This will be improved for sure.

[DrZog]

OK thanks, good to know. I actually just changed the column back to a grid column in designer and then set a renderer in the implementation file....