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>

以下是它的样子：

Overlapping list items

请帮忙！

EDIT !!! 这是模板：

<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修好。

Answer 2

我通过为保存图像的模板div提供高度来找到这个问题的更简洁的解决方法。

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

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

Answer 3

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

列出项目大部分时间彼此部分重叠

3 个答案: