1

对于下面的代码

Ext.define('ABC.view.ProductList',{
        extend : 'Ext.Panel',
        xtype : "productlist",
        itemId : 'Productlist',
        config : {
            layout : {
                type : 'fit'
            }
        },
        initialize : function() {
            var tpl = new Ext.XTemplate(
                '<tpl for="suggestions">',
                '<img src="{[this.image(values)]}">',
                '<h1>{name}</h1>',
                '<p>{description}</p>',
                '<span>{globalPrice}</span>',
                '</tpl>',{
                    image : function(value) {
                        var photoUrl = value.photoUrl;
                        var url = localStorage.httpPrefixAddress + photoUrl + '&token='+ localStorage.token;
                        return url;
                    }
                }
            );
            var productList = Ext.create("Ext.List", {
                itemId : 'Plist',
                emptyText : 'Empty',
                store : Ext.getStore('productStore'),
                itemTpl: tpl
            });
            this.add(productList);
        }
    });

我得到了这样的输出，我的意思是它把每件事都显示为单个列表项。

在此处输入图像描述

早些时候，对于不同的项目，我在 sencha 论坛链接上提出了同样的问题

这是Json

 "suggestions":[
      {
         "buckets":[
            "Economy",
            "Expensive"
         ],
         "category":"Service",
         "charge":100,
         "class":"",
         "description":null,
         "gender":"Male",
         "globalPrice":9.2,
         "isPromotional":"N",
         "longScript":null,
         "name":"Universal-Adapter",
         "photoUrl":Photo?productId=9",
         "productId":9,
         "rank":31,
         "shortScript":null,
         "uom":"Nos"
      },
      {
         "buckets":[
            "Expensive"
         ],
         "category":"Electronic",
         "charge":100,
         "class":"",
         "description":null,
         "gender":"Male",
         "globalPrice":99.99,
         "isPromotional":"N",
         "longScript":"ajkl mnopabcdefghijklm nopabcdefghijk",
         "name":"Combination-Padlock",
         "photoUrl":Photo?productId=1",
         "productId":1,
         "rank":29,
         "shortScript":"abcdefghijklmnop",
         "uom":"Nos"
      },
      {
         "buckets":[
            "Expensive"
         ],
         "category":"Electronic",
         "charge":100,
         "class":"",
         "description":null,
         "gender":"Male",
         "globalPrice":99.99,
         "isPromotional":"N",
         "longScript":null,
         "name":"Luggage-Tags-PU-leat",
         "photoUrl":"Photo?productId=3",
         "productId":3,
         "rank":29,
         "shortScript":null,
         "uom":"Nos"
      },
      {
         "buckets":[
            "Expensive"
         ],
         "category":"Travel",
         "charge":100,
         "class":"",
         "description":null,
         "gender":"Male",
         "globalPrice":6.8,
         "isPromotional":"N",
         "longScript":null,
         "name":"Travel-Basic",
         "photoUrl":"Photo?productId=5",
         "productId":5,
         "rank":29,
         "shortScript":null,
         "uom":"Nos"
      },
      {
         "buckets":[
            "Expensive"
         ],
         "category":"Service",
         "charge":100,
         "class":"",
         "description":null,
         "gender":"Male",
         "globalPrice":15.2,
         "isPromotional":"N",
         "longScript":null,
         "name":"Travel-LED-Light",
         "photoUrl":"Photo?productId=10",
         "productId":10,
         "rank":29,
         "shortScript":null,
         "uom":"Nos"
      },
      {
         "buckets":[
            "Economy",
            "Expensive"
         ],
         "category":"Electronic",
         "charge":100,
         "class":"",
         "description":null,
         "gender":"Female",
         "globalPrice":40.9,
         "isPromotional":"N",
         "longScript":null,
         "name":"Inflatable-Pillow",
         "photoUrl":"Photo?productId=7",
         "productId":7,
         "rank":27,
         "shortScript":null,
         "uom":"Nos"
      },
      {
         "buckets":[
            "Economy",
            "Expensive"
         ],
         "category":"Service",
         "charge":100,
         "class":"",
         "description":null,
         "gender":"Female",
         "globalPrice":25,
         "isPromotional":"N",
         "longScript":null,
         "name":"Peg-Less-Washing-Lin",
         "photoUrl":"Photo?productId=8",
         "productId":8,
         "rank":27,
         "shortScript":null,
         "uom":"Nos"
      },
      {
         "buckets":[
            "Expensive"
         ],
         "category":"Travel",
         "charge":100,
         "class":"",
         "description":null,
         "gender":"Female",
         "globalPrice":99.99,
         "isPromotional":"N",
         "longScript":null,
         "name":"Dial-Lock-Strap",
         "photoUrl":"Photo?productId=4",
         "productId":4,
         "rank":25,
         "shortScript":null,
         "uom":"Nos"
      },
      {
         "buckets":[
            "Expensive"
         ],
         "category":"Electronic",
         "charge":100,
         "class":"",
         "description":null,
         "gender":"Female",
         "globalPrice":2.8,
         "isPromotional":"N",
         "longScript":null,
         "name":"Eye-Mask-and-Ear-Plu",
         "photoUrl":"Photo?productId=6",
         "productId":6,
         "rank":25,
         "shortScript":null,
         "uom":"Nos"
      },
      {
         "buckets":[
            "Expensive"
         ],
         "category":"Travel",
         "charge":100,
         "class":"",
         "description":null,
         "gender":"Female",
         "globalPrice":99.99,
         "isPromotional":"N",
         "longScript":null,
         "name":"Luggage-Tags-Plastic",
         "photoUrl":"Photo?productId=2",
         "productId":2,
         "rank":25,
         "shortScript":null,
         "uom":"Nos"
      }
   ]

@ThinkFloyd 这就是我得到的，我按照你说的尝试了

在此处输入图像描述

如您所见，有一条线用于设置高度

4

2 回答 2

2

好的，正如我所看到的，您使用了一个 tpl，我们通常将其与tplconfig 一起用于整个模板渲染。对于列表/数据视图，我们不指定完整的 tpl，而只指定项目的模板。因此我们使用itemTpl属性。对于您的情况，当您itemTpl使用 a指定tpl（其中包括一个 for 循环）时，它只执行一次并遍历所有建议并将其包含在第一个列表项中。

因此，对于您的情况，您应该使用rootProperty您的商店，它将每个建议设置为模型实例，并且 List 将自动迭代商店以为您提供所需的功能。

店铺：

Ext.define('ABC.store.productStore', {
  config : {
    ....
    rootProperty : 'suggestions'
  }
});

项目Tpl：

var tpl = new Ext.XTemplate(
  '<img src="(photoUrl:this.image}">',
  '<h1>{name}</h1>',
  '<p>{description}</p>',
  '<span>{globalPrice}</span>', {
  image: function (photoUrl) {
    var url = localStorage.httpPrefixAddress + photoUrl + '&token=' + localStorage.token;
    return url;
  }
});

这应该适合你。

于 2013-05-09T11:22:41.143 回答
0

有时我观察到，即使模板 html 很小，但项目背景很大，并且会向下推所有其他背景。您可以尝试将您的 tpl 包装在一个 div 中并给出一些高度和边框以查看模板是否正确呈现它？

var tpl = new Ext.XTemplate(
    '<div class="my-item">'
        '<tpl for="suggestions">',
        '<img src="{[this.image(values)]}">',
        '<h1>{name}</h1>',
        '<p>{description}</p>',
        '<span>{globalPrice}</span>',
        '</tpl>',
    '</div>',{
        image : function(value) {
            var photoUrl = value.photoUrl;
            var url = localStorage.httpPrefixAddress + photoUrl + '&token='+ localStorage.token;
            return url;
        }
    }
);

并在 CSS 中为.my-item. 在删除图像功能或使用<div>背景图像而不是使用后，还要检查您的列表<img>

于 2013-05-09T09:32:43.943 回答