x-list-item上的itemTpl內容重疊

我一直在使用Sencha Touch 2.0，我嘗試創建一個包含圖片和其他數據的列表項，但記錄在其他項目行上重疊。您可以查看下面的圖片：x-list-item上的itemTpl內容重疊

enter image description here

頁面的代碼如下：

Ext.define('SBR.view.Comments', { 
    extend : 'Ext.List', 
    xtype : 'commentspage', 
    config : { 
     title : 'Comments', 
     iconCls : 'star', 
     variableHeights: true, 
     store : 'Comments', 
     itemTpl : '<div class="colmask ">' 
       + '<div class="colmid">' 
       + '<div class="colleft">' 
       + '<div class="col1">' 
       + '<div>' 
       + '<img src={imageUrl} alt={firstName} width="50" height="70">' 
       + '</div>' // Image of Student 
       + '<div>' 
       + '<img src={bookImageUrl} alt={firstName} width="50" height="70">' 
       + '</div>' 
       + '</div>'// Image of Book 
       + '</div>' // left_leftcolumn 
       + '<div class="col2">{firstName}&nbsp;{lastName}</div>' 
       + '</div>' // left column 
       + '<div id="col3"></div>' + '</div>' // colmask 
     /*onItemDisclosure : function(item) { 
      console.log('Disclose more info on' + " " + item.data.subject); 
     }*/ 
    } 
});

任何人的任何幫助嗎？

來源

2013-05-20 Anirban Ghosh

嘗試使用setStyleHtmlContent（）函數將styleHtmlContent設置爲true。 – GenieWanted

在CSS中給'.colmask'一些高度 – ThinkFloyd

這是一個體面的工作。我自己並不擅長divs，並且經常遇到與您面臨相同的問題。我的解決方法是我使用表來代替。所以你的情況，這將是

itemTpl : ''+ 
    '<table>'+ 
    ' <tr class="myCSSClass">'+ 
    '  <td><img src={imageUrl} alt={firstName} width="50" height="70"></td>'+ 
    '  <td><img src={bookImageUrl} alt={firstName} width="50" height="70"></td>'+ 
    ' </tr> '+ 
    '. . . . . '+ 
    '</table>',

順便說一句，這只是一個例子，因爲我真的不能告訴你想達到什麼不看你的CSS

來源

2013-06-04 13:23:48 SashaZd

列表的設置高度itemTpl ..或者通過標籤應用CSS（背景等）...這將解決您的問題

來源

2013-10-25 04:46:52 Nishant

x-list-item上的itemTpl內容重疊

回答

相關問題