MVC 架构中的 Dataview 示例不起作用

Question

我参考了ExtJS 5.01 dataview sample并在MVC架构中修改了它。

但是浏览器出现问题显示错误信息"Uncaught TypeError: Cannot read property 'on' of null"。

我的代码有什么问题？

视口：

Ext.define('Fiddle.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',

    requires: [
        'Fiddle.view.IconView'
    ],

    items: [{
        region: 'center',
        xtype: 'iconview',
    }]
});

商店：

Ext.define('Fiddle.store.IconView', {
    extend: 'Ext.data.Store',
    model: 'Fiddle.model.IconView',
    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' }
    ]
});

型号：

Ext.define('Fiddle.model.IconView', {
    extend: 'Ext.data.Model',
    fields: [
        { name:'src', type:'string' },
        { name:'caption', type:'string' }
    ]
});

查看：

Ext.define('Fiddle.view.IconView', {
    extend: 'Ext.view.View',
    alias: 'widget.iconview',

    initComponent: function() {
        var me = this;

        var imageTpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div style="margin-bottom: 10px;" class="thumb-wrap">',
                  '<img src="{src}" />',
                  '<br/><span>{caption}</span>',
                '</div>',
            '</tpl>'
        );

        Ext.apply(me, {
            store: 'IconView',
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images available',
            tpl: imageTpl
        });


        me.callParent(arguments);
    }
});

Answer 1

在您的 Ext.application (app.js) 中添加：

stores: ['IconView']

基于您的代码的工作示例：https://fiddle.sencha.com/#fiddle/vc2

MVC 架构中的 Dataview 示例不起作用

Dataview sample in MVC architecture isn't working

javascript

model-view-controller

extjs

extjs-mvc

extjs5