Using conditional statements in Ext.XTemplate


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.

Tagged with: , , ,
Posted in Sencha ExtJS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: