XTemplate和DataView不显示任何内容

Question

我需要您帮助我的DataView和XTemplate。无论我在尝试什么，我都陷入了这个问题，DataView什么都没有显示。。。json数据对我来说似乎还可以，它来自Spring MVC服务器端。以下是检索到的数据示例：

[
  {
    "id":58987552,
    "objectId":47841258,
    "type":"T1",
    "category":"FILE",
    "fileName":"file_9858585555_1",
    "extension":"pdf",
    "size":14397354,
    "version":34,
    "deleted":0,
    "locked":0},...
  }
]

对我来说，它看起来像是有效的JSON数据。正确的这是我的Extjs代码：

Ext.require(['*']);
Ext.onReady(function(){
createStores();
var dataView = Ext.create('Ext.view.View', {
    store: Ext.data.StoreManager.lookup('store'),
    tpl: [
      '<tpl for=".">',
        '<tpl switch="extension">',
            '<tpl case="pdf" case="PDF">',
                '<div class="thumb"><img src="/site/resources/images/32/pdf32.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
            '<tpl case="xlsx" case="xls">',
                '<div class="thumb"><img src="/site/resources/images/32/xlsx32.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
            '<tpl case="ppt" case="pptx">',
                '<div class="thumb"><img src="/site/resources/images/32/pptx32.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
            '<tpl case="zip" case="7z">',
                '<div class="thumb"><img src="/site/resources/images/32/zip32.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
            '<tpl case="msg">',
                '<div class="thumb"><img src="/clarity/resources/images/32/msg32.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
            '<tpl case="rtf" case="doc" case="docx">',
                '<div class="thumb"><img src="/site/resources/images/32/docx32.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
        '</tpl>',
     '</tpl>'
    ],
    multiSelect: false,
    height: 400,
    trackOver: true,
    overItemCls: 'x-item-over',
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images available',
});
Ext.create('Ext.Panel', {
        id: 'fileBrowser',
        frame: true,
        collapsible: true,
        width: 535,
        items: dataView,
        renderTo: 'documentViewPanel'
});
});

我的stroe代码：

var documentStore = null;
function createDocumentStores() {
var documentProxy = new Ext.data.HttpProxy({
    type : 'ajax',
    url : applicationPath + '/documentViewer/getWorkorders',
    reader : {
        type : 'json',
        idProperty : 'id'
    }
});
documentStore = Ext.create('Ext.data.Store', {
    model : 'DocumentModel',
    storeId : 'documentStore',
    proxy : documentProxy,
    autoLoad : true
});
}

我不确定代码出了什么问题，但数据没有显示在DataView中。在我看来，tpl中的for循环没有输入。但我不知道为什么。请帮帮我，我已经无计可施了，我正在鄙视这个XTemplate机制。每一次帮助都很及时。

致以最良好的问候，祝你今天愉快。

Answer 1

它对我很有效，下面是一个工作示例：http://jsfiddle.net/x_window/25vaX/

Ext.onReady(function(){
var dataView = Ext.create('Ext.view.View', {
    data: [{
        "id":58987552,
        "objectId":47841258,
        "type":"T1",
        "category":"FILE",
        "fileName":"file_9858585555_1",
        "extension":"pdf",
        "size":14397354,
        "version":34,
        "deleted":0,
        "locked":0
      },{
        "id":58987552,
        "objectId":47841258,
        "type":"T1",
        "category":"FILE",
        "fileName":"file_9858585555_1",
        "extension":"zip",
        "size":14397354,
        "version":34,
        "deleted":0,
        "locked":0
      }
    ],
    tpl: [
      '<tpl for=".">',
        '<tpl switch="extension">',
            '<tpl case="pdf" case="PDF">',
                '<div class="thumb"><img src="http://cmsresources.windowsphone.com/windowsphone/hu-HU/How-to/wp8/inline/basic-icon-pin.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
            '<tpl case="xlsx" case="xls">',
                '<div class="thumb"><img src="/clarity/resources/images/32/xlsx32.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
            '<tpl case="ppt" case="pptx">',
                '<div class="thumb"><img src="/clarity/resources/images/32/pptx32.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
            '<tpl case="zip" case="7z">',
                '<div class="thumb"><img src="http://cmsresources.windowsphone.com/windowsphone/hu-HU/How-to/wp8/inline/basic-icon-back.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
            '<tpl case="msg">',
                '<div class="thumb"><img src="/clarity/resources/images/32/msg32.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
            '<tpl case="rtf" case="doc" case="docx">',
                '<div class="thumb"><img src="/clarity/resources/images/32/docx32.png"/></div>',
                '<div class="thumb-wrap" id="{fileName}.{extension}">',
                '<div class="x-clear"></div>',
        '</tpl>',
     '</tpl>'
    ],
    multiSelect: false,
    height: 400,
    trackOver: true,
    overItemCls: 'x-item-over',
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images available',
});
Ext.create('Ext.Panel', {
        id: 'fileBrowser',
        frame: true,
        collapsible: true,
        width: 535,
        items: dataView,
        renderTo: document.body
});
});

检查你的商店里是否有商品。

Answer 2

好吧，我把我的视图代码改为：

tpl: [
      '<tpl for=".">',
        '<tpl switch="suffix">',
            '<tpl case="pdf" case="PDF">',
                '<div class="thumb-wrap" id="{id}">',
                '<div class="thumb"><img src="/site/resources/images/32/pdf32.png" title="{fileName}.{suffix}"/></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '<tpl case="xlsx" case="xls">',
                '<div class="thumb-wrap" id="{id}">',
                '<div class="thumb"><img src="/clarity/resources/images/32/xlsx32.png" title="{fileName}.{suffix}"/></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '<tpl case="ppt" case="pptx">',
                '<div class="thumb-wrap" id="{id}">',
                '<div class="thumb"><img src="/site/resources/images/32/pptx32.png" title="{fileName}.{suffix}"/></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '<tpl case="zip" case="7z">',
            '<div class="thumb-wrap" id="{id}">',
                '<div class="thumb"><img src="/site/resources/images/32/zip32.png" title="{fileName}.{suffix}"/></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '<tpl case="msg">',
                '<div class="thumb-wrap" id="{id}">',
                '<div class="thumb"><img src="/site/resources/images/32/msg32.png" title="{fileName}.{suffix}"/></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '<tpl case="rtf" case="doc" case="docx">',
            '<div class="thumb-wrap" id="{id}">',
                '<div class="thumb"><img src="/site/resources/images/32/docx32.png" title="{fileName}.{suffix}"/></div>',
                '<span class="x-editable">{shortName}</span></div>',
        '</tpl>',
     '</tpl>',
     '<div class="x-clear"></div>'
    ],    

现在它真的起作用了。如果您想要此示例的外观：http://dev.sencha.com/deploy/ext-4.0.0/examples/view/data-view.html不要忘记复制CSS文件：data-view.CSS。非常感谢你的帮助。