Question

以下代码

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

我得到这样的输出，我的意思是它将每个东西显示为单个列表项。

enter image description here

在不同的项目中，我在sencha论坛link

提出同样的问题

这是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这就是我得到的，我试着按你说的那样

enter image description here

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

Answer 1

好吧，正如我所看到的，你使用了一个我们通常与tpl配置一起使用的tpl，以便完整地模板渲染。对于list / dataview，我们不指定完整的tpl，而只指定项目的模板。因此我们使用itemTpl属性。对于您的情况，当您使用itemTpl（其中包含for循环）指定tpl时，它只执行一次并迭代所有建议并将其包含在第一个列表项中。

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

商品

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

<强> itemTpl：

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

这应该适合你。

Answer 2

有时我观察到即使模板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中给出了一些高度＆amp;与.my-item的边界。删除图片功能后也请检查您的列表，或使用带背景图片的<div>代替<img>

在sencha Ext.dataview.List itemTpl中显示一个块中的所有内容

2 个答案: