gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 05:53:05 24 4
gpt4 key购买 nike

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

请帮忙!

编辑!!!这是模板:

<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 事件中,它呈现得很好。

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

最佳答案

这似乎是 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 得到修复。

关于javascript - 大多数时候列出的项目彼此部分重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13620181/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com