Try it yourself on jsfiddle:
ExtJS fiddle
Original jquery fiddle
With the following HTML:
<style type="text/css"> .item { width: 300px; height: 120px; overflow: hidden; } .item div { padding: 10px; margin: 0; } </style> <div class="category-item"> <div class="list-item-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam. </div> </div>
The javascript to add multi-line overflow in Sencha Touch is:
var item = Ext.select('.item div').first(); var divh = Ext.select('.item').first().getHeight(); while (item.getOuterHeight()>divh) { item.dom.innerText = item.dom.innerText.replace(/\W*\s(\S)*$/, '...'); }
ExtJS is the same with one line changed:
var item=Ext.select('.item div').first(); var divh=Ext.select('.item').first().getHeight(); while (item.getComputedHeight()>divh) { //this line changed item.dom.innerText = item.dom.innerText.replace(/\W*\s(\S)*$/, '...'); }
The above code with display the following:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id...
No comments:
Post a Comment