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循环没有进入。但我不确定为什么。请帮助我，我是我的智慧结束，我对这个XTemplat机制感到绝望。每一个帮助都很贴切。

祝您好运，祝您度过愉快的一天。

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。非常感谢你的帮助。

XTemplate和DataView什么都不显示

2 个答案: