ExtJS 6.0.1 dataview tpl отображается дважды

Я пытаюсь отобразить таблицу в dataview. Все работает нормально, но tpl рендерится дважды:

Во-первых: содержимое tpl загружается вместе с данными. Во-вторых: отображается только tpl без каких-либо данных.

Я узнал, что этот вопрос уже задавали для другой версии здесь. Но не было подходящего ответа для решения этой проблемы. ExtJS tpl обрабатывается дважды

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

Результат приведенного выше кода

Я также пробовал itemTpl. Но не повезло. Было бы полезно, если бы кто-нибудь указал мне, что я делаю неправильно здесь.

Спасибо


extjs extjs6-classic
person a.premkumar    schedule 18.04.2016    source источник
comment
Вы забыли скобки в цикле for ‹td›{selCodeType}‹/td›   -  person JChap    schedule 19.04.2016
comment
Нет, я этого не делал. Я специально так оставил. Поскольку значение данных совпадает с заданным текстом. В любом случае это не причина проблемы. Я уверен в этом.   -  person a.premkumar    schedule 19.04.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны использовать store вместо data с 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>']
            }

Рабочий пример: https://fiddle.sencha.com/#fiddle/18th

person CD..    schedule 19.04.2016