I currently have a list set up with the following configuration:
var grid = Ext.create('Ext.List', {
scrollable: {
direction: 'horizontal',
directionLock: true
},
store: compStore,
itemTpl: '<table width="2000px">
<tr><td width="500px" style="border 1px solid black">{company}</td>
<td width="200px">{price}</td>
<td width="200px">{change}</td>
<td width="200px">{pct}</td>
<td width="200px">{updated}</td>
</tr></table>'
});
Currently, I'm only able to see the first three fields on the screen (which are company, price, and change). The remaining columns in the list are not visible since the table is too wide to fit into the view space.
When I horizontally scroll the list, I can momentarily view the other fields. However, they disappear once I release the scrolling action.
The attached image shows that the list is displaying only some columns and horizontal scrolling is not functional.
Could someone please advise on how to implement horizontal scrolling for the list when the content exceeds the viewable width?
Your assistance would be greatly appreciated.