javascript - 大多数时候列出的项目彼此部分重叠

Question

在面板的点击处理程序上，我正在创建一个列表(使用 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);
    }
}

这是我创建列表的方式:

var itemsList = {
    xtype: 'list',
    itemTpl : self.parent.tp,
    store : listStore,
    flex : 1,
    id : 'ilid',
    layout : 'fit',
    templateId : 'detailsTemplate_'+self.parent.cid,
    detailsView : 'myshop.view.'+self.parent.ctype+'Details',
    direction: 'vertical',
    listeners: {
      itemtap: function (list, index, element, record)
      {
            var popup = Ext.create(list.detailsView, {
                    rec : record.getData(),
                    tid : list.templateId
            });
            Ext.Viewport.add(popup);
            popup.show('pop');
      }
    }
};

这是模板:

<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>

这是它的样子:

请帮忙!

编辑!!! 这是模板:

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

这是相关的 CSS:

.productBox
    {
        border:1px solid #9a9a9a;
    }
.productTitle
    {
        border-bottom:1px solid #9a9a9a;
        padding:5px 10px 0px 10px;
        background-color:#ccc;
        font-weight:bold;
        font-size: 80%;
        height:30px;
    }
.productBody
    {
        padding:10px;
        background-color: white;
    }
.productImage
    {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
.tp_5 .productBody, .st_5 {
        background-color : white;
    }

编辑

在测试使用 flex、提供边距、进行刷新等各种操作时，我意识到这种重叠仅在列表首次加载时发生。当我返回主页并将其从容器中删除时

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

然后再次创建并将其放入容器 onTap 事件中，它呈现得很好。

重叠也只发生在第二个项目之后，第一个项目总是完整显示。

Answer 1

这似乎是 Sencha 的一个开放问题:

http://www.sencha.com/forum/showthread.php?249938-List-Items-with-height-gt-47px-not-rendered-correctly .

在我的案例中有效的解决方法是像这样延迟刷新列表:

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

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