Using conditional statements in Ext.XTemplate

Posted on September 15, 2009 by Walking Tree — Leave a comment

Let’s consider a situation where you have to take decision based on some external information, which is not part of your data store.

Suppose we have an external variable which contains a value whether the resident doctor’s should be highlighted or not?

var highlightResidentDoctors= showResidentDoctorsHighLighted(userId);

Using this variable directly inside the if condition, results into invalid template and you don’t get to see anything.


this.doctorSummaryView = new Ext.DataView({
         title:'Doctor(s)',
        itemSelector: 'div.thumb-wrap',
        style:'overflow:auto',
        deferEmptyText : true,
        store: this.searchDoctorsStore,
        tpl: new Ext.XTemplate(
            '<tpl for=".">',
            '<div class="thumb-wrap"

id={doctor_id} ">',
            '<div class="thumb">',
            '</div>',
            '<div>',
            '<div>',
            '',
            '<tpl if=" highlightResidentDoctor">',
            '<img

src="images/residentDoctorMarker.PNG"/>',
            '</tpl>',
            '</div>',
            '</div>',
            '</tpl>'
        )
    });

My expectation was that I am using a variable, which is just defined in the scope above my code then it should work. However, it doesn’t. Great thing about ExtJS is that it always gives you something to work with. For example you can define your own member functions directly on the config object passed into the XTemplate constructor for more complex processing. This member function can use external variables and you can call this member function using normal function call through this scope.


this.doctorSummaryView = new Ext.DataView({
         title:'Doctor(s)',
        itemSelector: 'div.thumb-wrap',
        style:'overflow:auto',
        deferEmptyText : true,
        store: this.searchDoctorsStore,
        tpl: new Ext.XTemplate(
            '<tpl for=".">',
            '<div class="thumb-wrap"

id={doctor_id} ">',
            '<div class="thumb">',
            '</div>',
            '<div>',
            '<div>',
            '',
            '<tpl

if="this.highlightResidentDoctor()">',
            '<img

src="images/residentDoctorMarker.PNG"/>',
            '</tpl>',
            '</div>',
            '</div>',
            '</tpl>', {

                            highlightResidentDoctor:

function() {
                                                return

highlightResidentDoctors;
                                }

            }
        )
    });

If you intend to use some value from the data store and some value from the other scope or just some other pre-calculated values then you can pass some parameters to the Xtemplate member function.

Hope some of you find this example useful.