2

在面板的点击处理程序上，我正在创建一个列表（使用 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 事件中，它渲染得很好。

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

4

3 回答 3

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。

于 2012-12-03T09:26:07.213 回答
0

通过为包含图像的模板 div 提供高度，我找到了更简洁的解决方法。

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

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

于 2012-12-11T13:07:37.807 回答
0

在 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>
于 2013-06-07T12:54:59.287 回答