数据视图样本在MVC架构下不工作

Dataview sample in MVC architecture isn't working

本文关键字:工作 MVC 视图 样本 数据      更新时间:2023-09-26

我参考了ExtJS 5.01 dataview示例,并在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);
    }
});

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

stores: ['IconView']

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