在大多數時間部分重疊的列表項目

在面板的tap處理程序上，我創建一個列表（使用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事件，它呈現的罰款。

也有重疊只發生第二個項目，第一個項目總是顯示完整。

來源

2012-11-29 ThinkFloyd

也告訴我們在你的模板中的HTML的CSS。 –

嘿TDeBailleul，我添加了模板和CSS。也感謝提醒我接受一些傑出的答案。 – ThinkFloyd

我發現這個問題更清潔的解決方法，通過提供高度保存圖像的模板div。

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

看起來像重疊發生的事情，因爲沒有爲模板默認CSS高度。

來源

2012-12-11 13:07:37 ThinkFloyd

這似乎是一個懸而未決的問題與煎茶：

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-03 09:26:07 ThinkFloyd

快速更新該錯誤的狀態以挽救通過整個線程拖網的人。截至今天（2013年5月28日），它仍然是開放的，但已經提出了一些解決方法：1.將模板中的圖像元素設置爲固定高度（似乎列表項目位置在資源加載並解決後不會重新計算它的真實高度）。 2.在「繪製」事件中執行延遲刷新 - Ext.defer（function（）{this.refresh（）;}，50，this）;.感謝那些線程中的解決方案。 – Stuart

在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-07 12:54:59 johnstoecker

在大多數時間部分重疊的列表項目

回答

相關問題