Dataview sample in MVC architecture isn't working

78 views Asked by At

I referred to the ExtJS 5.01 dataview sample and modified it in MVC architecture.

But there is a problem the browser show error message "Uncaught TypeError: Cannot read property 'on' of null".

What's wrong about my code?

Fiddle

Viewport:

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

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

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

Store:

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' }
    ]
});

Model:

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

View:

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);
    }
});
1

There are 1 answers

1
CD.. On BEST ANSWER

In your Ext.application (app.js) add:

stores: ['IconView']

Working example based on your code: https://fiddle.sencha.com/#fiddle/vc2