Пример Dataview в архитектуре MVC не работает

Question

Я ссылался на ExtJS 5.01 dataview sample и модифицировал его в архитектуре MVC.

Но есть проблема, когда в браузере появляется сообщение об ошибке «Uncaught TypeError: Can not read property» on «of null».

Что не так в моем коде?

Fiddle

Viewport:

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