View Full Version : Horizontal list

20 Apr 2011, 3:39 AM
Can you use Ext.List to create a horizontal list?

If not, are there any plans for this, or someone who has already done this?

20 Apr 2011, 8:03 AM
You can do this with a template

25 Apr 2011, 10:51 PM
I thought so, but it couldn't hurt to ask.

30 May 2011, 5:43 AM
Can you give an example of a template for doing that?

30 Jun 2011, 1:09 PM
I'm doing the following to get a horizontally scrolling list, but I have to enclose the wide 'Thumbscroll' element inside a horizontally scrolling panel, and I have to set the width manually. It would be better if it would figure out its own width.

I would at least like to figure out how to get the width of one item without having to hard-code it so I could set the width based on the number of items in the store.

// Horizontally scrolling thumbnails.
elc.Thumbscroll = Ext.extend(Ext.DataView, {
cls: 'thumbscroll x-list',
itemSelector: 'div.thumb',
scroll: false,
html: 'New',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb">',
'<img src="{thumbnail}" />',

var thumbscroll = new elc.Thumbscroll({store:store});
var tp = new Ext.Panel({
cls: 'x-list',
height: '200px'
thumbscroll.setWidth(store.data.length * (128+16));

and CSS to prevent wrapping:

.thumbscroll {
overflow: hidden;
.thumbscroll .thumb {
width: 128px;
vertical-align: top;
display: inline-block;
margin-right: 1.02em;
margin-bottom: auto;

5 Jul 2011, 1:14 PM
I'm using this code to get the width at the moment.

var container = Ext.get(thumbscroll.id);
var lastChild = new Ext.Element(document.getElementById(thumbscroll.id).lastChild);
thumbscroll.setWidth(lastChild.getOffsetsTo(container)[0] + lastChild.getOuterWidth() + lastChild.getMargin('r'));