在煎茶Ext.dataview.List itemTpl在一個塊

顯示每一件事對於下面的代碼在煎茶Ext.dataview.List itemTpl在一個塊

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

早些時候對不同的項目，我問同樣的問題，在煎茶論壇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

正如你所看到的，有一條線來設置高度

來源

2013-05-09 Viswa

您可以分享您在該商店中放入的json數據嗎？ – Swar 2013-05-09 10:21:30

@Swar更新問題與json – Viswa 2013-05-09 10:39:37

好了，因爲我看到，你已經使用了第三方物流，我們一般用tpl配置完整模板渲染作爲一個整體使用。對於列表/數據視圖，我們不指定完整的tpl，而只指定項目的模板。因此我們使用itemTpl屬性。對於您的情況，雖然您指定itemTpl與tpl（其中包含for循環），但它只執行一次，並遍歷所有建議並將其包含在第一個列表項中。

因此，對於您的情況，您應該使用商店的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; 
    } 
});

這應該很好地工作適合你。

來源

2013-05-09 11:22:41 Swar

感謝您的回答和您的權利。 – Viswa 2013-05-09 11:42:36

有時我已經觀察到，即使模板html很小，但項目背景很大，並推動所有其他背景。你可以嘗試在一個div中包裝你的tpl，並給出一些高度和邊界，看看模板是否正確渲染它？

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-09 09:32:43 ThinkFloyd

看到我的更新@ThinkFloyd – Viswa 2013-05-09 10:32:20

你可以告訴我你已經使用的CSS或甚至更好地創建[小提琴]（http://www.senchafiddle.com/），以便其他人可以嘗試它 – ThinkFloyd 2013-05-09 10:39:19

在煎茶Ext.dataview.List itemTpl在一個塊

回答

相關問題