Problem Getting Images - Gallery PHP

[izak18]

Hi everybody, I have a problem, I tried to show a simple panel with some images, I found a code on the Web and Im using a php to get the images, I also see this example in Sencha Documentation.
I don't know what I doing wrong ... could you tell me what is the error in my code please?.
I got a error "Uncaught Attempting to extend from a class which has not been loaded on the page" but still I can show the images.

This is my code:

Store:

var catalogoStore = new Ext.data.Store ({
    autoLoad: true,
    model: 'catalogoModel',
    proxy: {
        type: 'ajax',
        url: 'get-images.php',
        reader: {
            type: 'json',
            root: 'images'
        }
    }
});

Model:

Ext.regModel('catalogoModel', {    fields: [
        'name', 'url',
        { name: 'size', type: 'float' },
        { name: 'lastmod', type: 'date', dateFormat: 'timestamp' },
        'thumb_url'
    ]
});

View:

var tpl = new Ext.XTemplate(    '<tpl for=".">',
        '<div class="thumb-wrap" id="{name}">',
        '<div class="thumb"><img src="{thumb_url}" title="{name}"></div>',
        '<span class="x-editable">{shortName}</span></div>',
    '</tpl>',
    '<div class="x-clear"></div>'
);


var datav = new Ext.DataView({
    autoScroll: true,
    store: catalogoStore,
    tpl: tpl,
    autoHeight: false,
    height: 400,
    multiSelect: true,
    overItemCls: 'x-view-over',
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images to display',
    style: 'border:1px solid #99BBE8; border-top-width: 0',
})


var buttonsSpecTop = [{
    ui: 'back',
    text: 'Volver',
    handler: function()
        {
            window.open("menu.html","_self");
        }
    },
    {
        xtype: 'spacer'
    }
]


var dockedItems = [{
    xtype: 'toolbar',
    title: 'Catálogo',
    ui: 'dark',
    dock: 'top',
    items: buttonsSpecTop
}]


catalogoView = Ext.extend(Ext.Panel, 
{
    fullscreen: true,
    layout: 'card',
        
    initComponent: function() 
    {
        this.crearDocPanel = new Ext.Panel(
        {
            layout: 'card',
            dockedItems: dockedItems,
            items: datav
        });
        
        this.items = this.crearDocPanel;
        catalogoView.superclass.initComponent.call(this);
    }
});


Ext.reg('catalogoView', catalogoView);

I hope you can help me.
Thanks in advance.

[mitchellsimoens]

You need to clean your code up. Your DataView needs to be created within your panel extension but your panel extension has a card layout within a card layout.

[izak18]

Thanks mitchellsimoens, now my code is like this, but the error still persists:

catalogoView = Ext.extend(Ext.Panel, {
	fullscreen: true,
	layout: 'card',
		
	initComponent: function() 
	{
		this.datav = new Ext.DataView({
		autoScroll: true,
		store: catalogoStore,
		tpl: tpl,
		autoHeight: true,
		height: 400,
		itemSelector: 'div.thumb-wrap',
		emptyText: 'No hay imágenes para mostrar',
		style: 'border:1px solid #99BBE8; border-top-width: 0',
		});
		
		this.crearDocPanel = new Ext.Panel(
        {
            dockedItems: dockedItems,
            items: this.datav
		});
        
        this.items = this.crearDocPanel;
        catalogoView.superclass.initComponent.call(this);
	}
});

What else need to do?
Thanks.

[izak18]

Ok, my error was in my html definition, had a reference to *.js useless.
Thanks for everything.