Horizontal list

[kortovos]

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?

[mitchellsimoens]

You can do this with a template

[kortovos]

I thought so, but it couldn't hurt to ask.

[MHolst]

Can you give an example of a template for doing that?

[dholth]

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}" />',
'</div>',
'</tpl>'
)
});
Later,


var thumbscroll = new elc.Thumbscroll({store:store});
var tp = new Ext.Panel({
scroll:'horizontal',
cls: 'x-list',
items:[thumbscroll],
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;
}

[dholth]

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'));