使用Ext ComponentLoader在Ext Panel中加载元素

Question

我已经定义了一个表示具有xtype'image'对象的模型类型。现在我正在尝试使用ComponentLoader从中加载Ext.Panel中的这些对象：

Ext.define('ItemModel', {
    extend: 'Ext.data.Model',
    idProperty: 'itemModel',
    fields: [{
        name: 'id',
        type: 'int'
    },{
        name: 'xtype',
        type: 'string'
    },{
        name: 'src',
        type: 'string'
    }]
});


var previews = Ext.create('Ext.Panel',{
    layout: 'column',
    height: 500,
    items: {
        loader:{
          autoLoad : true,
          url: 'php/read.php',
          renderer: "component"
        } 
    }
}); 

但是我得到了这样的错误：

TypeError: me.el is null


me.container = Ext.get(me.el.dom.parentNode);

read.php返回的JSON看起来像这样：

{"items":[{"id":0,"xtype":"image","src":"img\/newalbum.png"},{"id":1,"xtype":"image","src":"img\/newalbum1.png"}]}

但如果我用“读者”创建一个“商店”，并尝试迭代加载的对象，它的工作正常：

Ext.define('ItemModel', {
    extend: 'Ext.data.Model',
    idProperty: 'itemModel',
    fields: [{
        name: 'id',
        type: 'int'
    },{
        name: 'xtype',
        type: 'string'
    },{
        name: 'src',
        type: 'string'
    }]
});

Ext.define('ItemModelStore', {
    extend: 'Ext.data.Store',
    model: 'ItemModel',
    proxy: {
        type: 'ajax',
        url: 'php/read.php',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

var itemModelStore = Ext.create('ItemModelStore');

itemModelStore.load(function() {
    itemModelStore.each(function(record){
        alert(record.get('src'));
    });
});