View Full Version : Problem creating scrollable single row dataview of images

20 Aug 2009, 2:40 PM
I am trying to use a Dataview to show a single row of images with a horizontal scrollbar only and have tried the code below with no success. No matter what I change the code to, the dataview always seems to show the start of a second row.
I took the initial code from the Dataview examples...

What I want to happen is the have the images continue offscreen and allow the scrollbar to see offscreen images.

I have no idea how to accomplish this...Any ideas would be helpful.....

Here is the javascript code:

MM.wall.friendstpl = new Ext.XTemplate(
'<tpl for=".">',
'<span class="thumb-wrap" id="{name}">',
'<span class="thumb"><img src="{url}" title="{name}"></span></span>',
'<div class="x-clear"></div>'

MM.wall.friendsDataview = new Ext.DataView({
id: 'MMFriendsDataview',
store: MM.wall.friendsStore,
tpl: MM.wall.friendstpl,
x: 0,
y: 10,
anchor: '90% -20',
emptyText: 'No images to display',
style: 'overflow-y: hidden;',
listeners: {
selectionchange: {
fn: function(dv,nodes){
console.log('Selected Ad');
,dblclick: {
fn: function(dv, ndx, nodes, e ){
MM.wall.showSelectedAd(dv, ndx, nodes, e);

* Setup the Friends / Lists container Panel
MM.wall.friendsPanel = new Ext.Panel({
id: 'friendsListsPanel',
layout: 'absolute',
margins: '0 0 0 0',
bodyBorder: false,
bodyStyle: 'overflow-x: auto; overflow-y: hidden;',
items: MM.wall.friendsDataview

Here is the CSS code:

Friends and Lists Dataview Style
#friendsListsPanel {
height: 100%;

#friendsListsPanel .x-panel-bwrap {
height: 100%;

#friendsListsPanel .x-panel-body{
background: white;
font: 11px Arial, Helvetica, sans-serif;
height: 100%;
#friendsListsPanel .thumb{
background: #FFFFFF; /*#dddddd;*/
padding: 3px;
vertical-align: bottom;
#friendsListsPanel .thumb img{
/*height: 76px; 60 */
/*width: 76px; 80 */
vertical-align: bottom;
#friendsListsPanel .thumb-wrap{
float: left;
vertical-align: bottom;
/*margin: 1px;*/
margin-right: 20px;
/*margin-left: 5px;*/
/*margin-right: 0;*/
/*padding: 20px 5px;*/
#friendsListsPanel .thumb-wrap span{
display: block;
/*overflow: hidden;*/
text-align: center;

Can anyone tell me how to accomplish this?