extjs dataview not show images

Question

I want to show some pictures using a dataview. I have one model and one store with the url. My problem is simple, i configured my xtype: 'dataview' but not works and dont show any error. What im i doing wrong?

Store:

Ext.define('Proyecto.store.ST_PJdatos', {
    extend: 'Ext.data.Store',
    model: 'Proyecto.model.MD_PJdatos',

data: [
    { idPersonaje: 1, nombre: 'Aerie', retrato: 'http://img.picshare.at/1440990535_female_godlike_moon_jasonseow01_lg.png', arquetipo: 'Neutral', profesion: 'Mago', pv: 16, pa: 9, ps: 12, idAtributos: 1 },
    { idPersonaje: 2, nombre: 'Tybalt', retrato: 'http://img.picshare.at/1440990535_male_human_jasonseow03_lg.png', arquetipo: 'Neutral', profesion: 'Picaro', pv: 21, pa: 18, ps: 19, idAtributos: 2 },
    { idPersonaje: 3, nombre: 'Zojja', retrato: 'http://img.picshare.at/1440990535_N7bmTqw.png', arquetipo: 'Maligno', profesion: 'Clerigo', pv: 26, pa: 14, ps: 29, idAtributos: 3 },
    { idPersonaje: 4, nombre: 'Arcturus', retrato: 'http://img.picshare.at/1440990535_poe_beaverskin02_lg.png', arquetipo: 'Maligno', profesion: 'Caballero', pv: 31, pa: 27, ps: 10, idAtributos: 4 }
]
});

Model:

Ext.define('Proyecto.model.MD_PJdatos', {
extend: 'Ext.data.Model',

fields: [
    { name: 'idPersonaje', type: 'int' },
    { name: 'nombre', type: 'auto' },
    { name: 'retrato', type: 'auto' },
    { name: 'arquetipo', type: 'auto' },
    { name: 'profesion', type: 'auto' },
    { name: 'pv', type: 'int' },
    { name: 'pa', type: 'int' },
    { name: 'ps', type: 'int' },
    { name: 'idAtributos', reference: 'Proyecto.model.MD_PJatributos', unique: true } 


]
});

MainView:

Ext.define('Proyecto.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'Proyecto.view.main.MainController',
        'Proyecto.view.main.MainModel'
    ],

    xtype: 'app-main',

    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'border'
    },

    items: [{
        xtype: 'panel',
        bind: {
            title: '{name}'
        },
        region: 'west',
        width: 250,
        split: true,
        items: [{
            xtype: 'dataview',
            store:  Ext.data.StoreManager.lookup('Proyecto.model.MD_PJdatos'),
            tpl: [
                '<tpl for=".">',
                    '<div class="thumb-wrap">',
                        '<div class="thumb"><img src="{retrato}"></div>',
                        '<span class="x-editable">{nombre}</span>',
                    '</div>',
                '</tpl>'
            ],
            itemSelector: 'div.thumb-wrap'
         }],
    },{
        region: 'center',
        xtype: 'tabpanel',
        items:[{
            title: 'Tab 1',
            html: '<h2>Content appropriate for the current navigation.</h2>'
        }]
    }]
});

The

Greendrake Greendrake · Accepted Answer · 2015-08-31T04:11:15

First of all, you are passing the model class name to your StoreManager.lookup call, not the store class name:

store:  Ext.data.StoreManager.lookup('Proyecto.model.MD_PJdatos')

Then, even if you passed the store class name it would still not work because StoreManager.lookup expects "The id of the Store, or a Store instance, or a store configuration" but not a store class name.

Replace your StoreManager.lookup call with simply:

new Proyecto.store.ST_PJdatos

extjs dataview not show images

1 Answers