Extjs4.1 - 定义dataview失败

时间:2013-09-26 02:07:57

标签: extjs extjs4.1

我尝试将数据视图从 http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.view.View 定义为 http://jsfiddle.net/JtTDH/

这是我的代码

Ext.define('Example', {
    extend: 'Ext.view.View',    
    tpl: new Ext.XTemplate(
    '<tpl for=".">',
        '<div style="margin-bottom: 10px;" class="thumb-wrap">',
          '<img src="{src}" />',
          '<br/><span>{caption}</span>',
        '</div>',
    '</tpl>'
    ),
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images available',
    initComponent: function() { 
        var store = Ext.create('Ext.data.Store', {
            id:'imagesStore',
            fields: [
                { name:'src', type:'string' },
                { name:'caption', type:'string' }
            ],
            data: [
                { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
                { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
                { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
                { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
            ]
        });

        this.store = store;
        this.callParent(arguments);  
    }
});

我认为这是正确的,但这不起作用。如何解决这个问题。

1 个答案:

答案 0 :(得分:1)

您的代码很好,但您需要为其定义渲染目标。例如,您可以将renderTo: Ext.getBody()添加到您的定义中,它将正常工作。请在此处查看工作示例:https://fiddle.sencha.com/#fiddle/md