extjs 数据视图不显示图像

Question

我想使用数据视图显示一些图片。 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 } 


]
});

主视图：

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

Answer 1

首先，您将模型 class 名称传递给您的 StoreManager.lookup 调用，而不是商店 class 名称：

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

然后，即使您传递了商店 class 名称，它仍然无法正常工作，因为 StoreManager.lookup 需要 "The id of the Store, or a Store instance, or a store configuration" 而不是商店class姓名。

将您的 StoreManager.lookup 调用简单地替换为：

new Proyecto.store.ST_PJdatos

extjs 数据视图不显示图像

extjs dataview not show images

javascript

dataview

extjs

image

gallery