extjs dataview 不显示图像答案

【问题标题】：extjs dataview not show imagesextjs dataview 不显示图像
【发布时间】：2015-08-31 03:45:04
【问题描述】：

我想使用数据视图显示一些图片。我有一个型号和一个带有网址的商店。我的问题很简单，我配置了我的 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>'
        }]
    }]
});

【问题讨论】：

标签： javascript image extjs gallery dataview

【解决方案1】：

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

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

然后，即使您传递了商店类名称，它仍然无法工作，因为 StoreManager.lookup 期望 “商店的 id，或商店实例，或商店配置”存储类名。

将您的StoreManager.lookup 电话替换为：

new Proyecto.store.ST_PJdatos

【讨论】：

很抱歉，这是一个非常糟糕的主意 (sencha.guru/2015/07/29/instances-on-prototype-are-bad)。只需给 store 一个 storeId，在控制器中 require 它（使用 requires 数组或 stores 数组），并将 storeId 设置为 dataview 的 store 值。这不会在每次创建数据视图时都实例化一个新的存储，并且会保留对它的引用。
@Tarabass 问题是哪里出了问题，而不是如何做对:) 我指出了哪里出了问题，然后简单地展示了让它工作的最快方法——即使没有必要。
这不是争议，而是对您答案的补充。我不想在最佳实践中引入坏习惯；）