ExtJS 6.0.1 dataview tpl rendered twice

Question

I am trying to render a table in dataview. Everything is working fine but the tpl renderes twice:

First: the tpl content loaded along with the data Second: the tpl alone is rendered without any data

I found out that this question was already asked for a different version here. But there was no relevant answer to solve this issue.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

I have tried itemTpl as well. But no luck. It would be helpful if anyone point me what I am doing wrong here.

Thank you

No, I didn't. I left it like that on purpose. Because the value on the data is same as the text given. Anyway that is not the cause of the problem. I am sure about it. — a.premkumar, Apr 19 '16 at 06:53

score 0 · Accepted Answer · edited Apr 19 '16 at 06:43

You must use a store instead of data with dataviews:

{
                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>']
            }

Working example: https://fiddle.sencha.com/#fiddle/18th

ExtJS 6.0.1 dataview tpl rendered twice

1 Answers1