javascript - ExtJS 4.2.1-存储加载后更新XTemplate

我有点奇怪的情况...

我有一个由商店支持的DataView。但是，在XTemplate中，我试图显示某种类型的JSON记录的数量。每个记录都有一个表示其类型的属性值对。例如：

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

因此，存在3个“ W”的JSON对象和1个“ A”类型的JSON对象。 “ W”的数字应在HTML元素中显示为“ total-pending”类； HTML元素中的类“ total-approved”中的“ A”。

我的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>'
    )

我已经阅读了一些有关模板和存储的信息，但似乎无法弄清楚如何更新这些数字。我尝试向store.on（'load'，function {}）添加一个函数回调，以通过Ext.get（Ext.query（'span.total-pending'）[0]）。update（3）更改HTML元素。 ），但没有效果。有什么想法吗？

最佳答案

我不确定会不会帮助您，但请尝试与我们分享结果。

尝试使一个函数计算W和A的总值，然后通过this.function()在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">{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>'
)

关于javascript - ExtJS 4.2.1-存储加载后更新XTemplate，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20895528/