ExtJS 6.0.1 dataview tpl呈现两次

时间:2016-04-18 12:53:18

标签: extjs extjs6-classic

我正在尝试在dataview中呈现一个表。一切都很好,但是tpl渲染了两次:

首先:与数据一起加载的tpl内容 第二:单独使用tpl而没有任何数据

我发现这个问题已经在这里被问到了不同的版本。但是没有相关的答案来解决这个问题。ExtJS tpl renders twice

{
        xtype: 'dataview',
        scrollable: true,
        itemSelector: 'tr',
        data: [{
            selCodeType: 'selCodeType',
            codeTypeMnc: 'codeTypeMnc'
        }, {
            selCodeType: 'selCodeType',
            codeTypeMnc: 'codeTypeMnc'
        }],
        tpl: ['<table><thead>',
                    '<th>Select Code Type</th>',
                    '<th>Code Type MNC</th>',
                '</thead>',
                '<tbody>',
                    '<tpl for=".">',
                        '<tr>',
                            '<td>selCodeType</td>',
                            '<td>codeTypeMnc</td>',
                        '</tr>',
                    '</tpl>',
                '</tbody></table>']
    }

Outcome of the above code

我也试过过itemTpl。但没有运气。如果有人指出我在这里做错了什么会很有帮助。

谢谢

1 个答案:

答案 0 :(得分:0)

您必须使用store代替data dataview

{
                xtype: 'dataview',
                scrollable: true,
                itemSelector: 'tr',
                store: {
                    data:[{
                    selCodeType: 'selCodeType',
                    codeTypeMnc: 'codeTypeMnc'
                }, {
                    selCodeType: 'selCodeType',
                    codeTypeMnc: 'codeTypeMnc'
            }]},
                tpl: ['<table><thead>', '<th>Select Code Type</th>', '<th>Code Type MNC</th>', '</thead>', '<tbody>', '<tpl for=".">', '<tr>', '<td>selCodeType</td>', '<td>codeTypeMnc</td>', '</tr>', '</tpl>', '</tbody></table>']
            }

工作示例:https://fiddle.sencha.com/#fiddle/18th