javascript - ExtJs6 DataView不显示数据

Question

我在渲染存储中的数据时遇到问题。面板:

Ext.define('App.view.idmlFile.SearchBar', {
    extend: 'Ext.panel.Panel',
    xtype: 'idmlSearchBar',
    width: 300,
    header: false,
    scrollable: true,

    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        ui: 'header',
        padding: 10,
        items: [
            {
                xtype: 'textfield',
                name: 'search',
                emptyText: 'search',
                width: '88%'
            },
            {
                xtype: 'button',
                iconCls: 'x-fa fa-search',
                listeners: {
                    click: function (element) {
                        //console.log(element);
                    }
                }
            }
        ]
    }],

    items: Ext.create('Ext.view.View', {
        /*store: {
            data: [
                {src: 'http://www.sencha.com/img/20110215-feat-drawing.png', caption: 'Drawing & Charts'},
                {src: 'http://www.sencha.com/img/20110215-feat-data.png', caption: 'Advanced Data'},
                {src: 'http://www.sencha.com/img/20110215-feat-html5.png', caption: 'Overhauled Theme'},
                {src: 'http://www.sencha.com/img/20110215-feat-perf.png', caption: 'Performance Tuned'}
            ]
        },*/
        store: Ext.data.StoreManager.lookup('IdmlFileStore'),
        tpl: [
            '<tpl for=".">',
                '<div style="margin-bottom: 10px;" class="thumb-wrap">',
                    '<img src="{src}" />',
                    '<br/><span>{caption}</span>',
                '</div>',
            '</tpl>'
        ],
        itemSelector: 'div.thumb-wrap',
        emptyText: 'No items available'
    })

});

如果我替换 store: Ext.data.StoreManager.lookup('IdmlFileStore'),使用注释数据，一切正常。

商店看起来像这样(它也包含在 Application.js 中的“商店”中):

Ext.define('App.store.IdmlFileStore', {
extend: 'Ext.data.Store',
alias: 'store.IdmlFileStore',
model: 'App.model.IdmlFileModel',
data: [
    {src: 'http://www.sencha.com/img/20110215-feat-drawing.png', caption: 'Drawing & Charts'},
    {src: 'http://www.sencha.com/img/20110215-feat-data.png', caption: 'Advanced Data'},
    {src: 'http://www.sencha.com/img/20110215-feat-html5.png', caption: 'Overhauled Theme'},
    {src: 'http://www.sencha.com/img/20110215-feat-perf.png', caption: 'Performance Tuned'}
]};

Console.log 显示商店(从“查找”返回)不为空并且包含所有数据。我该怎么办？

Answer 1

正如评论中所说，所有部分都应该是声明性的:

Ext.define('App.view.idmlFile.SearchBar', {
    extend: 'Ext.panel.Panel',
    xtype: 'idmlSearchBar',
    width: 300,
    header: false,
    scrollable: true,

    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        ui: 'header',
        padding: 10,
        items: [{
            xtype: 'textfield',
            name: 'search',
            emptyText: 'search',
            width: '88%'
        }, {
            xtype: 'button',
            iconCls: 'x-fa fa-search'
        }]
    }],

    items: {
        xtype: 'dataview',
        store: {
            type: 'IdmlFileStore'
        },
        tpl: [
            '<tpl for=".">',
            '<div style="margin-bottom: 10px;" class="thumb-wrap">',
            '<img src="{src}" />',
            '<br/><span>{caption}</span>',
            '</div>',
            '</tpl>'
        ],
        itemSelector: 'div.thumb-wrap',
        emptyText: 'No items available'
    }
});