Here's a situation that's quite unique...
A DataView linked to a store is causing me some trouble. In the XTemplate, I want to display the quantity of a specific type of JSON record. Each record has a 'type' property with a value. For example:
data: [
{ type: 'W' },
{ type: 'A' },
{ type: 'W' },
{ type: 'W' }
]
This data consists of 3 JSON objects of type 'W' and 1 JSON object of type 'A'. The count of 'W' should be shown in an HTML element with the class 'total-pending'; 'A', in an HTML element with the class 'total-approved.'
The XTemplate code snippet:
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 done some research on templates and stores, but I'm struggling to update those counts. I attempted to use a function as a callback for store.on('load', function{}) to change the content of the HTML element like Ext.get(Ext.query('span.total-pending')[0]).update(3) but it didn't work.. Any suggestions?