Extjs XTemplate和DataView不显示任何内容_Extjs

Extjs XTemplate和DataView不显示任何内容

extjs

Extjs XTemplate和DataView不显示任何内容,extjs,Extjs,我需要你帮助我的DataView和XTemplate。无论我在尝试什么，我都陷入了这个问题，DataView没有显示任何内容。。。 json数据在我看来还可以，它来自SpringMVC服务器端。以下是检索到的数据的示例： [ { "id":58987552, "objectId":47841258, "type":"T1", "category":"FILE", "fileName":"file_9858585555_1", "extensi

我需要你帮助我的DataView和XTemplate。无论我在尝试什么，我都陷入了这个问题，DataView没有显示任何内容。。。 json数据在我看来还可以，它来自SpringMVC服务器端。以下是检索到的数据的示例：

[
  {
    "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'
});
});

我不确定代码出了什么问题，但数据没有显示在DataView中。在我的竞争中，没有输入tpl中的for循环。但我不知道为什么。请帮帮我，我已经不知所措了，我对这个XTemplat机制感到绝望。每一个帮助都是非常感激的

致以最诚挚的问候，祝你度过愉快的一天。

这对我很有效，下面是一个有效的例子：

Ext.onReady（函数（）{
var dataView=Ext.create（'Ext.view.view'{
数据：[{
“id”：58987552，
“目标”：47841258，
“类型”：“T1”，
“类别”：“文件”，
“文件名”：“文件号98585555 _1”，
“扩展”：“pdf”，
“尺寸”：14397354，
“版本”：34，
“已删除”：0，
“已锁定”：0
},{
“id”：58987552，
“目标”：47841258，
“类型”：“T1”，
“类别”：“文件”，
“文件名”：“文件号98585555 _1”，
“扩展”：“zip”，
“尺寸”：14397354，
“版本”：34，
“已删除”：0，
“已锁定”：0
}
],
第三方物流：[
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
''
],
多选：错，
身高：400，
跟踪：是的，
overItemCls:'x-item-over'，
itemSelector:'div.thumb-wrap'，
emptyText:'没有可用的图像'，
});
Ext.create（'Ext.Panel'{
id:“文件浏览器”，
框架：对，
可折叠的：是的，
宽度：535，
项目：数据视图，
renderTo:document.body
});
});

检查您的商店中是否有商品。

我将查看代码更改为：

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>'
    ],

tpl：[
'',
'',
'',
'',
'',
“{shortName}”，
'',
'',
'',
“{shortName}”，
'',
'',
'',
“{shortName}”，
'',
'',
'',
“{shortName}”，
'',
'',
'',
“{shortName}”，
'',
'',
'',
“{shortName}”，
'',
'',
''
],

现在它真的开始工作了。如果您想要此示例的外观：不要忘记复制CSS文件：data-view.CSS。

非常感谢fpór您的帮助。

不，我认为商店出了问题，或者商店的数据出了问题。。。因为您更改了数据中的存储配置。。。它正在发挥作用。我在上一个问题中添加了我商店的代码。也许你在那里发现了失败。谢谢你的评论。顺便说一句，商店里有很多数据。；-）

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

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>'
    ],