Question

我有点奇怪的情况......

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

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

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

我的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]）更改HTML元素。更新（3））但它没有任何影响..任何想法？

Answer 1

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

尝试创建一个函数来计算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>'
)

Answer 2

我用Oguz给出的暗示解决了它。我最终做的是创建一个Ext.util.Hashmap实例，其对是状态类型和总数（例如＆lt;'W'，10＆gt;）。然后我打电话给：

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

...

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

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

然后在<td>元素所在的代码中，我调用：

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

完成：）

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

2 个答案: