Javascript 列出大多数情况下相互部分重叠的项目

点击面板的处理程序时，我正在创建一个列表（使用itemTpl），然后用相关项填充其存储，然后将其设置为容器。当显示此列表时，第一个项目将完全显示，其余所有其他项目位于其下方，相互重叠。这种情况90%都会发生，但并不总是如此，如果我调整浏览器大小或更改设备方向，重叠就会消失，所有项目看起来都正常

这是我的商店：

var listStore = Ext.create('Ext.data.Store', {
    fields: ['id','image','name','description']
});

以下是我如何填充该商店：

var json = Ext.decode(response.responseText);
var arr = json.categories;
for(var x = 0; x < arr.length; x++) {
    if(arr[x].id == self.parent.cid){
        var itemsArr = arr[x].items;
        var myitems = [];
        for(var y = 0; y < itemsArr.length; y++) {
            myitems.push({"id":itemsArr[y].id, "image":itemsArr[y].image, "name":itemsArr[y].name, "description":itemsArr[y].description});
        }
        listStore.add(myitems);
    }
}

以下是模板：

<tpl for="."><div class="tp_1"><div class="productBox"><div class="productTitle">{name}</div><div class="productBody"><img class="productImage" src="{image}"/></div></div></div></tpl>

编辑

在测试诸如使用flex、提供边距、执行刷新等各种操作时，我意识到只有在第一次加载列表时才会发生这种重叠。当我返回主页并将其从容器中移除时

hccontainer.remove(Ext.getCmp('ilid'), true);

然后再次创建并将其放入container onTap事件中，它会很好地渲染

---

此外，重叠仅发生在第二项之后，第一项始终完全显示。

这似乎是Sencha的一个未决问题：

在我的案例中，解决方法是延迟刷新列表，如下所示：

var l = Ext.getCmp('ilid');
Ext.defer(function(){ 
  l.refresh(); 
  console.log("Refreshed");
}, 100, l);

---

希望能很快看到TOUCH-3781得到修复。

我通过为保存图像的模板div提供高度，找到了更干净的解决方法

    .productBody
    {
        padding:10px;
        background-color: white;
        height : 240px;
    }

---

看起来发生了重叠，因为模板没有默认的CSS高度。

在Sencha Touch 2.2.1中的模板中使用“div”可以为我带来重叠。我的解决方法是将“div”转换为html表，因此您的模板将变成：

<table><tr><td>{name}</td>
<tr><td><img class="productImage" src="{image}" width="300"></td></tr></table>

{name}

同时向我们展示模板中HTML的CSS。嘿，Tdebaileul，我已经添加了模板和CSS。也谢谢你提醒我接受一些悬而未决的答案。快速更新该漏洞的状态，以避免人们在整个线程中拖网。截至今天（2013年5月28日），它仍然开放，但提出了两个变通办法：1。为模板中的图像元素指定一个固定的高度（在加载资源并确定其实际高度后，似乎不会重新计算列表项的位置）。2.在“painted”事件中执行延迟刷新-Ext.defer（function（）{this.refresh（）；}，50，this）；。这要归功于那些在这方面采取变通办法的人。

var l = Ext.getCmp('ilid');
Ext.defer(function(){ 
  l.refresh(); 
  console.log("Refreshed");
}, 100, l);

    .productBody
    {
        padding:10px;
        background-color: white;
        height : 240px;
    }

<table><tr><td>{name}</td>
<tr><td><img class="productImage" src="{image}" width="300"></td></tr></table>