Extjs数据视图不显示图像

extjs dataview not show images

本文关键字:显示图 图像 显示 数据 视图 Extjs      更新时间:2023-09-26

我想用dataview显示一些图片。我有一个模型和一个带有url的商店。我的问题很简单,我配置了我的xtype: 'dataview',但不工作,不显示任何错误。我做错了什么?

存储:

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

模型:

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

首先,您将模型类名称传递给StoreManager.lookup调用,而不是存储类名称:

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

然后,即使你传递了存储类名,它仍然不能工作,因为StoreManager.lookup期望" store的id,或者store实例,或者store配置"而不是store类名。

StoreManager.lookup调用替换为:

new Proyecto.store.ST_PJdatos