CODEWITHSUNDEEP
javascriptjsonextjs
Android Noob
Android Noob

Reputation: 3341

ExtJS 4.2.1 - Updating XTemplate after store load

I have a bit of a weird situation...

I have a DataView that's backed by a store. However, in the XTemplate, I'm trying to show the quantity of a certain type of JSON record. Each record has a property value pair that denotes its type. For example:

data: [
 { type: 'W' },
 { type: 'A' },
 { type: 'W' },
 { type: 'W' }
]

So there are 3 JSON objects of 'W' and 1 JSON object of type 'A'. The number of 'W' should be displayed in the HTML element with the class 'total-pending'; 'A', in the HTML element with the class 'total-approved.'

My XTemplate:

tpl: Ext.create('Ext.XTemplate', 
        '<div style="text-align:center">Leave Requests</div>',
        '<table cellpadding="0" class="table-wrap">',
            '<tr>',
                '<td class="x-leave-request approved"><span class="total-approved">0</span>Approved</td>',
                '<td class="x-leave-request pending"><span class="total-pending">0</span>Pending</td>'denied">0</span>Denied</td>',
            '</tr>',
        '</table>'
    )

I've read a bit about templates and stores, but I can't seem to figure out how to update those numbers. I tried to add a function callback to store.on('load', function{}) to change the HTML element via Ext.get(Ext.query('span.total-pending')[0]).update(3) but it had no effect.. Any ideas?

Upvotes: 0

Views: 1031

Answers (2)

Android Noob
Android Noob

Reputation: 3341

I solved it using the hint that Oguz gave. What I ended up doing was creating an Ext.util.Hashmap instance, whose pairs were status type and total (e.g. <'W', 10>). Then I called:

<tpl for=".">
 {[this.updateStatusTotal(values.type)]}
</tpl>

...

updateStatusTotal : function(type) {
 var me = this,
     map = me.map,
     total = map.get(type);

 map.put(type, ++total);
}

then later in the code where the <td> elements are, I call:

{[this.getStatusTotal('W')]}

Done :)

Upvotes: 1

Oğuz &#199;elikdemir
Oğuz &#199;elikdemir

Reputation: 4980

I am not sure will help your request but try and share result with us.

Try to make a function to count total values of W and A then call appropiate function inside the XTemplate via this.function()

tpl: Ext.create('Ext.XTemplate', 
    '<div style="text-align:center">Leave Requests</div>',
    '<table cellpadding="0" class="table-wrap">',
        '<tr>',
            '<td class="x-leave-request approved"><span class="total-approved">{totalw:this.getTotalw()}</span>Approved</td>',
            '<td class="x-leave-request pending"><span class="total-pending">{totala:this.getTotala()}</span>Pending</td>'denied">0</span>Denied</td>',
        '</tr>',
    '</table>'
)

Upvotes: 1

Related Questions